在UITableView中使用自动布局实现动态单元格布局和可变行高

技术背景

在iOS开发中，UITableView是常用的控件之一。当表格单元格内容动态变化时，需要动态计算单元格的高度以适应内容展示。自动布局（Auto Layout）提供了一种强大的方式来实现动态单元格布局和可变行高。

实现步骤

通用步骤

1. 设置和添加约束：在UITableViewCell子类中，将单元格子视图的边缘固定到单元格的contentView的边缘（特别是顶部和底部边缘），确保子视图的垂直内容压缩阻力和内容拥抱约束不被更高优先级的约束覆盖。可以在代码中设置约束，如在updateConstraints方法中添加。
2. 确定唯一的表格视图单元格重用标识符：对于单元格中每一组唯一的约束，使用唯一的单元格重用标识符。避免将具有完全不同约束集的单元格添加到同一重用池中。

iOS 8及以上

3. 启用行高估计：设置tableView的rowHeight属性为UITableView.automaticDimension，并为estimatedRowHeight属性分配一个非零值。

iOS 7支持

3. 进行布局传递并获取单元格高度：为每个重用标识符实例化一个离屏的表格视图单元格，配置其内容，强制其立即布局子视图，使用systemLayoutSizeFittingSize:方法获取单元格的所需高度。
4. 使用估计行高：设置tableView的estimatedRowHeight属性，以避免在首次加载表格视图时，自动布局约束求解导致主线程卡顿。
5. （如有需要）添加行高缓存：如果在tableView:heightForRowAtIndexPath:中进行约束求解时性能仍然不可接受，可以实现行高缓存。

核心代码

iOS 8示例代码（Swift）

override func viewDidLoad() {
    super.viewDidLoad()
    self.tableView.estimatedRowHeight = 80
    self.tableView.rowHeight = UITableView.automaticDimension
}

iOS 7示例代码（Objective-C）

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *reuseIdentifier = ...;
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
    // Configure the cell with content
    [cell setNeedsUpdateConstraints];
    [cell updateConstraintsIfNeeded];
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *reuseIdentifier = ...;
    UITableViewCell *cell = [self.offscreenCells objectForKey:reuseIdentifier];
    if (!cell) {
        cell = [[YourTableViewCellClass alloc] init];
        [self.offscreenCells setObject:cell forKey:reuseIdentifier];
    }
    // Configure the cell with content
    [cell setNeedsUpdateConstraints];
    [cell updateConstraintsIfNeeded];
    cell.bounds = CGRectMake(0.0, 0.0, CGRectGetWidth(tableView.bounds), CGRectGetHeight(cell.bounds));
    [cell setNeedsLayout];
    [cell layoutIfNeeded];
    CGFloat height = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
    height += 1.0;
    return height;
}

- (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([self isTallCellAtIndexPath:indexPath]) {
        return 350.0;
    } else {
        return 40.0;
    }
}

最佳实践

• 在代码中设置约束，便于调试和管理。
• 合理设置estimatedRowHeight属性，以提高性能。
• 对于多行标签，设置numberOfLines为0，并确保正确约束标签到边距/边缘。

常见问题

1. Interface Builder问题：Interface Builder可能无法正确处理自动调整大小的单元格设置，会显示红色自动布局错误图标并给出修改建议，应忽略这些建议，手动更改行高或选择Verify Position Only以避免警告。
2. preferredMaxLayoutWidth问题：如果约束设置正确，通常不需要设置preferredMaxLayoutWidth，需要使用该属性可能是约束设置不正确或缺少约束的标志。
3. 性能问题：如果表格视图行数较多，进行自动布局约束求解可能会导致主线程卡顿，可以使用估计行高和行高缓存来解决。