UITableViewCell 내부의 UICollectionView — 동적 높이?

우리의 응용 프로그램 화면 중 하나가있는 곳으로 우리를 필요로 UICollectionView(A)의 내부를 UITableViewCell. 이렇게 UICollectionView하면 항목 수가 동적으로 생성되므로 높이도 동적으로 계산되어야합니다. 그러나 임베디드 높이를 계산하는 데 문제가 UICollectionView있습니다.

우리의 가장 중요한 부분 UIViewController은 스토리 보드에서 만들어졌으며 자동 레이아웃을 사용합니다. 그러나 .NET Framework의 높이를 UITableViewCell기준으로의 높이 를 동적으로 늘리는 방법을 모르겠습니다 UICollectionView.

누구든지 이것을 수행하는 방법에 대한 팁이나 조언을 줄 수 있습니까?

정답은 YES입니다 . 할 수 있습니다.

몇 주 전에이 문제를 발견했습니다. 실제로 생각보다 쉽습니다. 셀을 NIB (또는 스토리 보드)에 넣고 고정하여 자동 레이아웃이 모든 작업을 수행하도록합니다.

다음과 같은 구조가 주어집니다.

TableView

TableViewCell

CollectionView

CollectionViewCell

CollectionViewCell

CollectionViewCell

[... 가변 수의 셀 또는 다른 셀 크기]

해결책은 자동 레이아웃에 먼저 collectionViewCell 크기를 계산 한 다음 컬렉션 뷰 contentSize를 계산하고이를 셀의 크기로 사용하도록 지시하는 것입니다. 이것은 "마법을 수행하는" UIView 메서드입니다.

-(void)systemLayoutSizeFittingSize:(CGSize)targetSize 
     withHorizontalFittingPriority:(UILayoutPriority)horizontalFittingPriority 
           verticalFittingPriority:(UILayoutPriority)verticalFittingPriority

여기에서 TableViewCell의 크기를 설정해야합니다.이 경우에는 CollectionView의 contentSize입니다.

CollectionViewCell

상기 CollectionViewCell 당신이 모델을 변경할 때마다 레이아웃에 셀을 말해야한다 (예를 : 당신은 텍스트와 UILabel의를 설정 한 다음 셀을 다시 배치되어야한다).

- (void)bindWithModel:(id)model {
    // Do whatever you may need to bind with your data and 
    // tell the collection view cell's contentView to resize
    [self.contentView setNeedsLayout];
}
// Other stuff here...

TableViewCell

TableViewCell는 마법을 수행합니다. 그것은 당신의 collectionView에 출구를 가지고 사용 collectionView 세포에 대한 자동 레이아웃 수 estimatedItemSize 의 UICollectionViewFlowLayout을 .

그런 다음 트릭은 systemLayoutSizeFittingSize ... 메소드 에서 tableView 셀의 크기를 설정하는 것 입니다. (참고 : iOS8 이상)

참고 : 나는있는 tableView의 대리자 세포의 높이 법을 사용하려고 -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath나누었다 너무 늦기 CollectionView contentSize을 계산하는 자동 레이아웃 시스템과 때로는 잘못 크기가 조정 된 세포를 찾을 수 있습니다.

@implementation TableCell

- (void)awakeFromNib {
    [super awakeFromNib];
    UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout;

    // Configure the collectionView
    flow.minimumInteritemSpacing = ...;

    // This enables the magic of auto layout. 
    // Setting estimatedItemSize different to CGSizeZero 
    // on flow Layout enables auto layout for collectionView cells.
    // https://developer.apple.com/videos/play/wwdc2014-226/
    flow.estimatedItemSize = CGSizeMake(1, 1);

    // Disable the scroll on your collection view
    // to avoid running into multiple scroll issues.
    [self.collectionView setScrollEnabled:NO];
}

- (void)bindWithModel:(id)model {
    // Do your stuff here to configure the tableViewCell
    // Tell the cell to redraw its contentView        
    [self.contentView layoutIfNeeded];
}

// THIS IS THE MOST IMPORTANT METHOD
//
// This method tells the auto layout
// You cannot calculate the collectionView content size in any other place, 
// because you run into race condition issues.
// NOTE: Works for iOS 8 or later
- (CGSize)systemLayoutSizeFittingSize:(CGSize)targetSize withHorizontalFittingPriority:(UILayoutPriority)horizontalFittingPriority verticalFittingPriority:(UILayoutPriority)verticalFittingPriority {

    // With autolayout enabled on collection view's cells we need to force a collection view relayout with the shown size (width)
    self.collectionView.frame = CGRectMake(0, 0, targetSize.width, MAXFLOAT);
    [self.collectionView layoutIfNeeded];

    // If the cell's size has to be exactly the content 
    // Size of the collection View, just return the
    // collectionViewLayout's collectionViewContentSize.

    return [self.collectionView.collectionViewLayout collectionViewContentSize];
}

// Other stuff here...

@end

TableViewController

TableViewController 에서 tableView 셀에 대해 자동 레이아웃 시스템을 활성화하는 것을 잊지 마십시오 .

- (void)viewDidLoad {
    [super viewDidLoad];

    // Enable automatic row auto layout calculations        
    self.tableView.rowHeight = UITableViewAutomaticDimension;
    // Set the estimatedRowHeight to a non-0 value to enable auto layout.
    self.tableView.estimatedRowHeight = 10;

}

크레딧 : @rbarbera가이 문제를 해결 하는 데 도움이되었습니다.

내 솔루션은 @PabloRomeu가 제안한 것보다 훨씬 간단하다고 생각합니다.

단계에서 출구 만들기 1. UICollectionView에 UITableViewCell subclass어디에 UICollectionView배치됩니다. 하자, 이름은collectionView

2 단계. UICollectionView높이 제한을 위해 IB를 추가하고 콘센트 UITableViewCell subclass도 만듭니다 . 이름은입니다 collectionViewHeight.

3 단계. tableView:cellForRowAtIndexPath:코드 추가 :

// deque a cell
cell.frame = tableView.bounds;
[cell layoutIfNeeded];
[cell.collectionView reloadData];
cell.collectionViewHeight.constant = cell.collectionView.collectionViewLayout.collectionViewContentSize.height;

테이블 뷰와 컬렉션 뷰는 모두 UIScrollView하위 클래스이므로 콘텐츠 크기를 계산하고 셀을 재사용하려고 할 때 다른 스크롤 뷰에 포함되는 것을 좋아하지 않습니다.

모든 목적을 위해 컬렉션 뷰만 사용하는 것이 좋습니다.

섹션으로 나누고 일부 섹션의 레이아웃을 테이블보기로 "처리"하고 다른 섹션은 컬렉션보기로 "처리"할 수 있습니다. 결국 테이블 뷰로 할 수있는 컬렉션 뷰로는 얻을 수없는 것은 없습니다.

컬렉션보기 "부분"에 대한 기본 격자 레이아웃이있는 경우 일반 표 셀을 사용하여 처리 할 수도 있습니다. 그래도 iOS 5 지원이 필요하지 않은 경우 컬렉션보기를 사용하는 것이 좋습니다.

위의 Pablo Romeu의 답변 ( https://stackoverflow.com/a/33364092/2704206 )은 내 문제에 대해 크게 도움이되었습니다. 그러나 내 문제를 해결하기 위해 몇 가지 다른 작업을 수행해야했습니다. 우선, layoutIfNeeded()자주 전화 할 필요가 없었습니다 . 함수 collectionView에서 호출하기 systemLayoutSizeFitting만하면되었습니다.

둘째, 테이블 뷰 셀의 컬렉션 뷰에 자동 레이아웃 제약 조건을 적용하여 패딩을 제공했습니다. 그래서 너비를 targetSize.width설정할 때 앞뒤 여백을 빼야했습니다 collectionView.frame. 또한 반환 값 CGSize높이에 위쪽 및 아래쪽 여백을 추가해야했습니다 .

이러한 제약 상수를 얻기 위해 제약 조건에 대한 출력을 생성하거나, 상수를 하드 코딩하거나, 식별자로 조회 할 수있는 옵션이있었습니다. 사용자 정의 테이블 뷰 셀 클래스를 쉽게 재사용 할 수 있도록 세 번째 옵션을 사용하기로 결정했습니다. 결국, 이것이 작동하는 데 필요한 모든 것입니다.

class CollectionTableViewCell: UITableViewCell {

    // MARK: -
    // MARK: Properties
    @IBOutlet weak var collectionView: UICollectionView! {
        didSet {
            collectionViewLayout?.estimatedItemSize = CGSize(width: 1, height: 1)
            selectionStyle = .none
        }
    }

    var collectionViewLayout: UICollectionViewFlowLayout? {
        return collectionView.collectionViewLayout as? UICollectionViewFlowLayout
    }

    // MARK: -
    // MARK: UIView functions
    override func systemLayoutSizeFitting(_ targetSize: CGSize, withHorizontalFittingPriority horizontalFittingPriority: UILayoutPriority, verticalFittingPriority: UILayoutPriority) -> CGSize {
        collectionView.layoutIfNeeded()

        let topConstraintConstant = contentView.constraint(byIdentifier: "topAnchor")?.constant ?? 0
        let bottomConstraintConstant = contentView.constraint(byIdentifier: "bottomAnchor")?.constant ?? 0
        let trailingConstraintConstant = contentView.constraint(byIdentifier: "trailingAnchor")?.constant ?? 0
        let leadingConstraintConstant = contentView.constraint(byIdentifier: "leadingAnchor")?.constant ?? 0

        collectionView.frame = CGRect(x: 0, y: 0, width: targetSize.width - trailingConstraintConstant - leadingConstraintConstant, height: 1)

        let size = collectionView.collectionViewLayout.collectionViewContentSize
        let newSize = CGSize(width: size.width, height: size.height + topConstraintConstant + bottomConstraintConstant)
        return newSize
    }
}

식별자로 제약 조건을 검색하는 도우미 함수로 다음 확장을 추가합니다.

extension UIView {
    func constraint(byIdentifier identifier: String) -> NSLayoutConstraint? {
        return constraints.first(where: { $0.identifier == identifier })
    }
}

참고 : 스토리 보드 또는 생성되는 위치에서 이러한 제약 조건에 대한 식별자를 설정해야합니다. 0 상수가 없으면 상관 없습니다. 또한 Pablo의 응답에서 UICollectionViewFlowLayout와 같이 컬렉션보기의 레이아웃 으로 사용해야 합니다. 마지막으로 collectionViewIBOutlet을 스토리 보드에 연결해야합니다 .

위의 사용자 정의 테이블 뷰 셀을 사용하여 이제 컬렉션 뷰가 필요한 다른 테이블 뷰 셀에서이를 하위 클래스로 분류하고 UICollectionViewDelegateFlowLayout및UICollectionViewDataSource 프로토콜을 있습니다. 이것이 다른 사람에게 도움이되기를 바랍니다!

나는 모든 답을 읽었습니다. 이것은 모든 경우에 적용되는 것 같습니다.

override func systemLayoutSizeFitting(_ targetSize: CGSize, withHorizontalFittingPriority horizontalFittingPriority: UILayoutPriority, verticalFittingPriority: UILayoutPriority) -> CGSize {
        collectionView.layoutIfNeeded()
        collectionView.frame = CGRect(x: 0, y: 0, width: targetSize.width , height: 1)
        return collectionView.collectionViewLayout.collectionViewContentSize
}

Pablo Romeu의 솔루션에 대한 대안은 테이블 뷰 셀에서 작업을 수행하는 대신 UICollectionView 자체를 사용자 정의하는 것입니다.

근본적인 문제는 기본적으로 컬렉션 뷰에는 고유 크기가 없으므로 사용할 차원의 자동 레이아웃을 알릴 수 없다는 것입니다. 유용한 고유 크기를 반환하는 사용자 지정 하위 클래스를 만들어이를 해결할 수 있습니다.

UICollectionView의 하위 클래스를 만들고 다음 메서드를 재정의합니다.

override func intrinsicContentSize() -> CGSize {
    self.layoutIfNeeded()

    var size = super.contentSize
    if size.width == 0 || size.height == 0 {
        // return a default size
        size = CGSize(width: 600, height:44)
    }

    return size
 }

override func reloadData() {
    super.reloadData()
    self.layoutIfNeeded()
    self.invalidateIntrinsicContentSize()
}

(reloadData ()와 비슷한 방식으로 reloadSections, reloadItemsAtIndexPaths와 같은 관련 메서드도 재정의해야합니다.)

layoutIfNeeded를 호출하면 컬렉션 뷰가 콘텐츠 크기를 다시 계산하여 새로운 고유 크기로 사용할 수 있습니다.

또한 테이블 뷰 컨트롤러에서 뷰 크기 변경 (예 : 장치 회전시)을 명시 적으로 처리해야합니다.

    override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator)
{
    super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator)
    dispatch_async(dispatch_get_main_queue()) {
        self.tableView.reloadData()
    }
}

나는 최근에 같은 문제에 직면하고 있었고 거의 모든 해결책을 시도해 보았고 그중 일부는 효과가 있었고 다른 일부는 @PabloRomeu 접근 방식 에 대한 주요 관심사가 없었 습니다. 셀에 다른 내용이있는 경우 (컬렉션 뷰 이외) 당신은 그들의 높이와 제약의 높이를 계산하고 결과를 반환해야 자동 레이아웃을 올바르게 얻을 수 있으며 내 코드에서 수동으로 계산하고 싶지 않습니다. 그래서 여기 내 코드에서 수동 계산을 수행하지 않고도 잘 작동하는 솔루션이 있습니다.

에서 cellForRow:atIndexPath테이블 뷰의 나는 다음을 수행 :

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    //do dequeue stuff
    //initialize the the collection view data source with the data
    cell.frame = CGRect.zero
    cell.layoutIfNeeded()
    return cell
}

여기서 일어나는 일은 콜렉션 뷰 높이가 계산 된 후 tableview 셀이 높이를 조정하도록 강제하는 것입니다. (데이터 소스에 collectionView 날짜를 제공 한 후)

내가 가질 콘텐츠에 따라 크기를 반환하는 컬렉션 뷰 클래스에 정적 메서드를 추가합니다. 그런 다음에서 해당 메서드를 사용 heightForRowAtIndexPath하여 적절한 크기를 반환합니다.

또한 이러한 종류의 viewController를 임베드하면 이상한 동작이 발생할 수 있습니다. 한 번 해봤는데 해결하지 못한 이상한 메모리 문제가있었습니다.

아마도 내 변형이 유용 할 것입니다. 지난 두 시간 동안이 작업을 결정했습니다. 100 % 옳고 최적 인 척하지는 않지만 제 기술은 아직 매우 적고 전문가의 의견을 듣고 싶습니다. 감사합니다. 한 가지 중요한 참고 사항 : 이것은 정적 테이블에서 작동합니다. 현재 작업에 지정되어 있습니다. 그래서, 모든 I 사용은 viewWillLayoutSubviews 의 있는 tableView . 그리고 조금 더.

private var iconsCellHeight: CGFloat = 500 

func updateTable(table: UITableView, withDuration duration: NSTimeInterval) {
    UIView.animateWithDuration(duration, animations: { () -> Void in
        table.beginUpdates()
        table.endUpdates()
    })
}

override func viewWillLayoutSubviews() {
    if let iconsCell = tableView.cellForRowAtIndexPath(NSIndexPath(forRow: 0, inSection: 1)) as? CategoryCardIconsCell {
        let collectionViewContentHeight = iconsCell.iconsCollectionView.contentSize.height
        if collectionViewContentHeight + 17 != iconsCellHeight {
            iconsCellHeight = collectionViewContentHeight + 17
            updateTable(tableView, withDuration: 0.2)
        }
    }
}

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    switch (indexPath.section, indexPath.row) {
        case ...
        case (1,0):
            return iconsCellHeight
        default:
            return tableView.rowHeight
    }
}

1. collectionView가 두 번째 섹션의 첫 번째 행에 있다는 것을 알고 있습니다.
2. 행의 높이를 17p로 둡니다. 콘텐츠 높이보다 큽니다.
3. iconsCellHeight는 프로그램이 시작될 때 임의의 숫자입니다 (세로 형식에서는 정확히 392 여야하지만 중요하지 않음). collectionView + 17의 내용이이 숫자와 같지 않으면 값을 변경하십시오. 다음에이 상황에서 조건은 FALSE를 제공합니다.
4. 모두 tableView를 업데이트하십시오. 제 경우에는 두 작업의 조합입니다 (행 확장의 멋진 업데이트를 위해);
5. 물론 heightForRowAtIndexPath에서 코드에 하나의 행을 추가하십시오.

지금까지 내가 생각 해낸 가장 쉬운 접근 방식은 위의 @igor 답변에 대한 크레딧입니다.

tableviewcell 클래스에서 이것을 삽입하십시오.

override func layoutSubviews() {
    self.collectionViewOutlet.constant = self.postPoll.collectionViewLayout.collectionViewContentSize.height
}

물론 셀 클래스의 콘센트로 collectionviewoutlet을 변경하십시오.

@Igor 게시물 에서 아이디어를 얻고 신속하게 프로젝트에 시간을 투자합니다.

당신의

 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    //do dequeue stuff
    cell.frame = tableView.bounds
    cell.layoutIfNeeded()
    cell.collectionView.reloadData()
    cell.collectionView.heightAnchor.constraint(equalToConstant: cell.collectionView.collectionViewLayout.collectionViewContentSize.height)
    cell.layoutIfNeeded()
    return cell
}

추가 : 셀을로드 할 때 UICollectionView가 고르지 않는 경우.

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {       
  //do dequeue stuff
  cell.layer.shouldRasterize = true
  cell.layer.rasterizationScale = UIScreen.main.scale
  return cell
}

Pablo의 솔루션이 저에게 잘 작동하지 않았고 이상한 시각 효과가있었습니다 (collectionView가 올바르게 조정되지 않음).

작업 한 것은 collectionView의 높이 제약을 (NSLayoutConstraint로) collectionView contentSize로 조정하는 것 layoutSubviews()입니다. 셀에 자동 레이아웃이 적용될 때 호출되는 메서드입니다.

// Constraint on the collectionView height in the storyboard. Priority set to 999.
@IBOutlet weak var collectionViewHeightConstraint: NSLayoutConstraint!


// Method called by autolayout to layout the subviews (including the collectionView).
// This is triggered with 'layoutIfNeeded()', or by the viewController
// (happens between 'viewWillLayoutSubviews()' and 'viewDidLayoutSubviews()'.
override func layoutSubviews() {

    collectionViewHeightConstraint.constant = collectionView.contentSize.height
    super.layoutSubviews()
}

// Call `layoutIfNeeded()` when you update your UI from the model to trigger 'layoutSubviews()'
private func updateUI() {
    layoutIfNeeded()
}

UITableViewDelegate에서 :

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return ceil(itemCount/4.0f)*collectionViewCellHeight;
}

itemCount 및 CollectionViewCellHeight를 실제 값으로 대체하십시오. 배열 배열이있는 경우 itemCount는 다음과 같을 수 있습니다.

self.items[indexPath.row].count

또는 무엇이든.

1. 더미 셀을 생성합니다.
2. UICollectionView의 UICollectionViewLayout에서 현재 데이터를 사용하여 collectionViewContentSize 메서드를 사용합니다.

당신이 좋아하는 속성을 기반으로 컬렉션의 높이를 계산할 수 itemSize, sectionInset, minimumLineSpacing, minimumInteritemSpacing, 당신이 경우 collectionViewCell규칙의 테두리가 있습니다.