使用“自动布局”更新集合视图高度以适合表视图单元格内的所有单元格

Question

我想利用iOS 8中新增的动态高度。我需要在UITableViewCell中放置一个UICollectionView。我想确保集合视图中的所有单元格在屏幕上都可见，因此表格单元格的高度应该增加以适合集合视图。我差点就要工作了。我只是无法使表格单元格的大小合适——它的高度要么太长要么太短，在我与表格交互之前，一些布局问题是可见的（更多信息请参见下文）。

我已经将集合视图的自动布局约束设置为表的单元格的content View：前导、尾随、顶部和底部。然后，我在集合视图上创建了一个高度约束，这样我就可以在计算合适的高度以适应集合视图中的所有单元格后即时更新其常量（因为我不认为有一种方法可以自动做到这一点）。

这是其余的设置。

viewDidLoad {
    self.tableView.rowHeight = UITableViewAutomaticDimension
    self.tableView.estimatedRowHeight = 44
}

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()

    let cellDimension = self.collectionView.frame.size.width / 7 //always 7 columns

    let flowLayout = self.collectionView.collectionViewLayout as! UICollectionViewFlowLayout
    flowLayout.itemSize = CGSizeMake(cellDimension, cellDimension)

    self.collectionViewHeightConstraint.constant = cellDimension * 4 //always 4 rows
}

我还没有实现高度对于RowAtIndexPath.

这种设置会导致相互冲突的垂直约束。我尝试过降低约束的优先级并在一系列组合中更改关系，但都没有导致所需的行为。如果我将高度约束的优先级降低到999，表视图单元格一开始太高，但在我上下滚动表视图后，表单元格高度会更新到预期的高度。对于其他一些组合，结果要么是表单元格太短，但完整的集合视图会流血，要么是表单元格太短，集合视图会被切断，要么是表单元格太高，这取决于我对约束应用的优先级和关系。此外，在视图进行动画处理时，集合视图单元格没有以适当的大小显示（但在动画完成时，它们会被适当调整），或者如果我重新加载表格，则集合视图单元格的大小不正确，直到我滚动表格。

如何解决这些外观问题以获得动态表格视图单元格高度，其中包含基于显示器宽度的动态单元格大小的完全可见的集合视图？

Answer 1

看看forkingdog是如何解决tableview单元格的动态高度问题的

在他的tableview中——而不是使用现成的估计行高——您将需要类似

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return [tableView fd_heightForCellWithIdentifier:@"FDFeedCell" configuration:^(FDFeedCell *cell) {
        cell.entity = self.feedEntities[indexPath.row];
    }];
}



#import "UITableView+FDTemplateLayoutCell.h"
#import <objc/runtime.h>

@implementation UITableView (FDTemplateLayoutCell)

- (id)fd_templateCellForReuseIdentifier:(NSString *)identifier;
{
    NSAssert(identifier.length > 0, @"Expects a valid identifier - %@", identifier);

    NSMutableDictionary *templateCellsByIdentifiers = objc_getAssociatedObject(self, _cmd);
    if (!templateCellsByIdentifiers) {
        templateCellsByIdentifiers = @{}.mutableCopy;
        objc_setAssociatedObject(self, _cmd, templateCellsByIdentifiers, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    }

    UITableViewCell *templateCell = templateCellsByIdentifiers[identifier];
    if (!templateCell) {
        templateCell = [self dequeueReusableCellWithIdentifier:identifier];
        templateCellsByIdentifiers[identifier] = templateCell;
    }

    return templateCell;
}

- (CGFloat)fd_heightForCellWithIdentifier:(NSString *)identifier configuration:(void (^)(id))configuration
{
    // Fetch a cached template cell for `identifier`.
    UITableViewCell *cell = [self fd_templateCellForReuseIdentifier:identifier];

    // Reset to initial height as first created, otherwise the cell's height wouldn't retract if it
    // had larger height before it gets reused.
    cell.contentView.bounds = CGRectMake(0, 0, CGRectGetWidth(self.frame), self.rowHeight);

    // Manually calls to ensure consistent behavior with actual cells (that are displayed on screen).
    [cell prepareForReuse];

    // Customize and provide content for our template cell.
    if (configuration) {
        configuration(cell);
    }

    // Add a hard width constraint to make dynamic content views (like labels) expand vertically instead
    // of growing horizontally, in a flow-layout manner.
    NSLayoutConstraint *tempWidthConstraint =
    [NSLayoutConstraint constraintWithItem:cell.contentView
                                 attribute:NSLayoutAttributeWidth
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:nil
                                 attribute:NSLayoutAttributeNotAnAttribute
                                multiplier:1.0
                                  constant:CGRectGetWidth(self.frame)];
    [cell.contentView addConstraint:tempWidthConstraint];

    // Auto layout does its math
    CGSize fittingSize = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];

    [cell.contentView removeConstraint:tempWidthConstraint];

    // Add 1px extra space for separator line if needed, simulating default UITableViewCell.
    if (self.separatorStyle != UITableViewCellSeparatorStyleNone) {
        fittingSize.height += 1.0 / [UIScreen mainScreen].scale;
    }

    return fittingSize.height;
}

@end

Answer 2

下面是我的解决方法，我认为这可以在IB中完成。

首先，我会设置CV单元格的最小大小，然后设置CV的拥抱优先级，以尽可能紧紧地拥抱其内容。这应该保证，除所有外部影响外，CV将尽可能减小大小，使其所有细胞都可见。

接下来，我将对TBV单元格的内容视图和CV进行同样的操作，也就是说，我将TBV单元格内容视图的拥抱优先级设置为尽可能紧紧地拥抱CV。同样，这应该强制要求，在忽略外部影响的情况下，TBV单元应保持所需的最小尺寸，以便完整显示CV。

Answer 3

从我可以理解你的代码在设置集合视图单元格和大小，在我看来，你想有正方形的集合单元格，并有4行7个单元格，所有完全可见。

如果您将约束添加到单元格中所有4个边距（顶部、底部、左侧和右侧）的集合视图中，然后将纵横比约束添加到集合视图中7:4，则表视图应该能够以正确的大小自动为您计算单元格高度。