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

如何在表视图中的UITableViewCells中使用“自动布局”，让每个单元格的内容和子视图确定行高度（自身/自动），同时保持平滑的滚动性能？

当前回答

要设置行高和估计行高的自动尺寸，请确保以下步骤对单元格/行高布局有效。

分配和实现表视图数据源和委托将UITableViewAutomaticDimension分配给rowHeight和estimatedRowHeight实现委托/dataSource方法（即heightForRowAt并向其返回值UITableViewAutomaticDimension）

目标C：

// in ViewController.h
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>

  @property IBOutlet UITableView * table;

@end

// in ViewController.m

- (void)viewDidLoad {
    [super viewDidLoad];
    self.table.dataSource = self;
    self.table.delegate = self;

    self.table.rowHeight = UITableViewAutomaticDimension;
    self.table.estimatedRowHeight = UITableViewAutomaticDimension;
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

    return UITableViewAutomaticDimension;
}

斯威夫特：

@IBOutlet weak var table: UITableView!

override func viewDidLoad() {
    super.viewDidLoad()

    // Don't forget to set dataSource and delegate for table
    table.dataSource = self
    table.delegate = self

    // Set automatic dimensions for row height
    // Swift 4.2 onwards
    table.rowHeight = UITableView.automaticDimension
    table.estimatedRowHeight = UITableView.automaticDimension


    // Swift 4.1 and below
    table.rowHeight = UITableViewAutomaticDimension
    table.estimatedRowHeight = UITableViewAutomaticDimension

}



// UITableViewAutomaticDimension calculates height of label contents/text
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    // Swift 4.2 onwards
    return UITableView.automaticDimension

    // Swift 4.1 and below
    return UITableViewAutomaticDimension
}

对于UITableviewCell中的标签实例

设置行数=0（换行模式=截断尾部（&L）设置与其超级视图/单元格容器相关的所有约束（顶部、底部、左右）。可选：如果您希望标签覆盖最小垂直区域，即使没有数据，也可以设置标签的最小高度。

注意：如果您有多个标签（UIElements）具有动态长度，应根据其内容大小进行调整：请调整要以更高优先级展开/压缩的标签的“内容拥抱和抗压优先级”。

2017-10-24 11:31:04

其他回答

@smileyborg提出的解决方案几乎是完美的。如果您有一个自定义单元格，并且需要一个或多个具有动态高度的UILabel，则systemLayoutSizeFittingSize方法与启用自动布局相结合将返回一个CGSizeZero，除非您将所有单元格约束从单元格移到其contentView（如@TomSwift在这里建议的那样，如何调整超视图的大小以适应具有自动布局的所有子视图？）。

为此，您需要在自定义UITableViewCell实现中插入以下代码（感谢@Adrian）。

- (void)awakeFromNib{
    [super awakeFromNib];
    for (NSLayoutConstraint *cellConstraint in self.constraints) {
        [self removeConstraint:cellConstraint];
        id firstItem = cellConstraint.firstItem == self ? self.contentView : cellConstraint.firstItem;
        id seccondItem = cellConstraint.secondItem == self ? self.contentView : cellConstraint.secondItem;
        NSLayoutConstraint *contentViewConstraint =
        [NSLayoutConstraint constraintWithItem:firstItem
                                 attribute:cellConstraint.firstAttribute
                                 relatedBy:cellConstraint.relation
                                    toItem:seccondItem
                                 attribute:cellConstraint.secondAttribute
                                multiplier:cellConstraint.multiplier
                                  constant:cellConstraint.constant];
        [self.contentView addConstraint:contentViewConstraint];
    }
}

将@smileyborg答案与此混合应该会奏效。

2013-11-11 16:52:47

我必须使用动态视图（通过代码设置视图和约束），当我想设置preferredMaxLayoutWidth标签的宽度为0时。所以我有错误的细胞高度。

然后我添加了

[cell layoutSubviews];

执行之前

[cell setNeedsUpdateConstraints];
[cell updateConstraintsIfNeeded];

之后，标签的宽度符合预期，动态高度计算正确。

2015-09-01 22:37:52

我刚刚遇到一个非常重要的问题，作为回答发布。

@smileyborg的回答基本正确。但是，如果自定义单元格类的layoutSubviews方法中有任何代码，例如设置preferredMaxLayoutWidth，则不会使用以下代码运行：

[cell.contentView setNeedsLayout];
[cell.contentView layoutIfNeeded];

这让我困惑了一阵子。然后我意识到这是因为它们只触发contentView上的layoutSubview，而不是单元格本身。

我的工作代码如下：

TCAnswerDetailAppSummaryCell *cell = [self.tableView dequeueReusableCellWithIdentifier:@"TCAnswerDetailAppSummaryCell"];
[cell configureWithThirdPartyObject:self.app];
[cell layoutIfNeeded];
CGFloat height = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
return height;

注意，如果您正在创建一个新的单元格，我很确定您不需要调用setNeedsLayout，因为它应该已经设置好了。在保存对单元格的引用的情况下，您可能应该调用它。不管怎样，它都不会造成任何影响。

另一个提示是，如果您使用的是单元格子类，则需要设置preferredMaxLayoutWidth等属性。正如@smileyborg提到的，“您的表视图单元格的宽度尚未固定到表视图的宽度”。这是正确的，如果您在子类中而不是在视图控制器中进行工作，则会遇到麻烦。但是，此时可以使用表格宽度简单地设置单元格框架：

例如，在计算高度时：

self.summaryCell = [self.tableView dequeueReusableCellWithIdentifier:@"TCAnswerDetailDefaultSummaryCell"];
CGRect oldFrame = self.summaryCell.frame;
self.summaryCell.frame = CGRectMake(oldFrame.origin.x, oldFrame.origin.y, self.tableView.frame.size.width, oldFrame.size.height);

（我碰巧缓存了这个特定的单元以供重用，但这无关紧要）。

2013-12-03 02:23:31

只需在视图控制器中添加这两个功能，即可解决问题。这里，列表是一个字符串数组，其中包含每行的字符串。

 func tableView(_ tableView: UITableView, 
   estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
        tableView.rowHeight = self.calculateHeight(inString: list[indexPath.row])

    return (tableView.rowHeight) 
}

func calculateHeight(inString:String) -> CGFloat
{
    let messageString = input.text
    let attributes : [NSAttributedStringKey : Any] = [NSAttributedStringKey(rawValue: NSAttributedStringKey.font.rawValue) : UIFont.systemFont(ofSize: 15.0)]

    let attributedString : NSAttributedString = NSAttributedString(string: messageString!, attributes: attributes)

    let rect : CGRect = attributedString.boundingRect(with: CGSize(width: 222.0, height: CGFloat.greatestFiniteMagnitude), options: .usesLineFragmentOrigin, context: nil)

    let requredSize:CGRect = rect
    return requredSize.height
}

2018-05-16 06:08:31