可变高度UITableViewCell的快速示例

为Swift 3更新

胡威廉（William Hu）的快速回答很好，但在我第一次学习做某事时，它能帮助我掌握一些简单而详细的步骤。下面的示例是我在学习使用可变单元格高度制作UITableView时的测试项目。我基于Swift的这个基本UITableView示例。

完成的项目应如下所示：

创建新项目

它可以只是一个单视图应用程序。

添加代码

将新的Swift文件添加到项目中。将其命名为MyCustomCell。此类将保存添加到情节提要中单元格的视图的出口。在这个基本示例中，每个单元格中只有一个标签。

import UIKit
class MyCustomCell: UITableViewCell {
    @IBOutlet weak var myCellLabel: UILabel!
}

我们稍后将连接此插座。

打开ViewController.swift并确保您具有以下内容：

import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    // These strings will be the data for the table view cells
    let animals: [String] = [
        "Ten horses:  horse horse horse horse horse horse horse horse horse horse ",
        "Three cows:  cow, cow, cow",
        "One camel:  camel",
        "Ninety-nine sheep:  sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep baaaa sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep sheep",
        "Thirty goats:  goat goat goat goat goat goat goat goat goat goat goat goat goat goat goat goat goat goat goat goat goat goat goat goat goat goat goat goat goat goat "]

    // Don't forget to enter this in IB also
    let cellReuseIdentifier = "cell"

    @IBOutlet var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // delegate and data source
        tableView.delegate = self
        tableView.dataSource = self

        // Along with auto layout, these are the keys for enabling variable cell height
        tableView.estimatedRowHeight = 44.0
        tableView.rowHeight = UITableViewAutomaticDimension
    }

    // number of rows in table view
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.animals.count
    }

    // create a cell for each table view row
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell:MyCustomCell = self.tableView.dequeueReusableCell(withIdentifier: cellReuseIdentifier) as! MyCustomCell
        cell.myCellLabel.text = self.animals[indexPath.row]
        return cell
    }

    // method to run when table view cell is tapped
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        print("You tapped cell number \(indexPath.row).")
    }
}

重要说明：

以下两行代码（以及自动布局）使可变单元格高度成为可能：tableView.estimatedRowHeight=44.0tableView.rowHeight=UITableViewAutomaticDimension

设置情节提要

将表视图添加到视图控制器中，并使用自动布局将其固定到四边。然后将表视图单元格拖到表视图上。然后将标签拖到原型单元格上。使用自动布局将标签固定到表视图单元的内容视图的四个边缘。

重要说明：

自动布局与我上面提到的两行重要代码一起工作。如果不使用自动布局，它将无法工作。

其他IB设置

自定义类名和标识符

选择TableViewCell并将自定义类设置为MyCustomCell（我们添加的Swift文件中的类名称）。还将Identifier设置为cell（与上面代码中用于cellReuseIdentifier的字符串相同）。

标签的零行

将标签中的行数设置为0。这意味着多行，并允许标签根据其内容调整自身大小。

连接插座

控件从情节提要中的表视图拖动到ViewController代码中的tableView变量。对Prototype单元格中的Label和MyCustomCell类中的myCellLabel变量执行同样的操作。

完成了

您现在应该能够运行项目并获得高度可变的单元格。

笔记

此示例仅适用于iOS 8及更高版本。如果您仍然需要支持iOS 7，那么这将不适用于您。未来项目中您自己的自定义单元格可能不止一个标签。确保将所有内容固定正确，以便自动布局可以确定要使用的正确高度。你可能还需要使用垂直抗压和拥抱。有关这方面的更多信息，请参阅本文。如果不固定前缘和后缘（左侧和右侧），则可能还需要设置标签的preferredMaxLayoutWidth，以便它知道何时换行。例如，如果在上面的项目中向标签添加了“水平居中”约束，而不是固定前缘和后缘，则需要将此行添加到tableView:cellForRowAtIndexPath方法：cell.myCellLabel.referencedMaxLayoutWidth=表格视图边界宽度

另请参见

了解iOS 8中的自调整单元格和动态类型具有不同行高的表视图单元格Swift的UITableView示例

我将@smileyborg的iOS7解决方案归入一个类别

我决定用@smileyborg将这个聪明的解决方案包装成UICollectionViewCell+AutoLayoutDynamicHeightCalculation类别。

该类别还纠正了@wildsmonkey的回答中概述的问题（从笔尖和systemLayoutSizeFittingSize加载单元格：返回CGRectZero）

它不考虑任何缓存，但现在适合我的需要。随意复制、粘贴和破解。

UI集合视图单元格+自动布局动态高度计算.h

#import <UIKit/UIKit.h>

typedef void (^UICollectionViewCellAutoLayoutRenderBlock)(void);

/**
 *  A category on UICollectionViewCell to aid calculating dynamic heights based on AutoLayout contraints.
 *
 *  Many thanks to @smileyborg and @wildmonkey
 *
 *  @see stackoverflow.com/questions/18746929/using-auto-layout-in-uitableview-for-dynamic-cell-layouts-variable-row-heights
 */
@interface UICollectionViewCell (AutoLayoutDynamicHeightCalculation)

/**
 *  Grab an instance of the receiving type to use in order to calculate AutoLayout contraint driven dynamic height. The method pulls the cell from a nib file and moves any Interface Builder defined contrainsts to the content view.
 *
 *  @param name Name of the nib file.
 *
 *  @return collection view cell for using to calculate content based height
 */
+ (instancetype)heightCalculationCellFromNibWithName:(NSString *)name;

/**
 *  Returns the height of the receiver after rendering with your model data and applying an AutoLayout pass
 *
 *  @param block Render the model data to your UI elements in this block
 *
 *  @return Calculated constraint derived height
 */
- (CGFloat)heightAfterAutoLayoutPassAndRenderingWithBlock:(UICollectionViewCellAutoLayoutRenderBlock)block collectionViewWidth:(CGFloat)width;

/**
 *  Directly calls `heightAfterAutoLayoutPassAndRenderingWithBlock:collectionViewWidth` assuming a collection view width spanning the [UIScreen mainScreen] bounds
 */
- (CGFloat)heightAfterAutoLayoutPassAndRenderingWithBlock:(UICollectionViewCellAutoLayoutRenderBlock)block;

@end

UI集合视图单元格+自动布局动态高度计算.m

#import "UICollectionViewCell+AutoLayout.h"

@implementation UICollectionViewCell (AutoLayout)

#pragma mark Dummy Cell Generator

+ (instancetype)heightCalculationCellFromNibWithName:(NSString *)name
{
    UICollectionViewCell *heightCalculationCell = [[[NSBundle mainBundle] loadNibNamed:name owner:self options:nil] lastObject];
    [heightCalculationCell moveInterfaceBuilderLayoutConstraintsToContentView];
    return heightCalculationCell;
}

#pragma mark Moving Constraints

- (void)moveInterfaceBuilderLayoutConstraintsToContentView
{
    [self.constraints enumerateObjectsUsingBlock:^(NSLayoutConstraint *constraint, NSUInteger idx, BOOL *stop) {
        [self removeConstraint:constraint];
        id firstItem = constraint.firstItem == self ? self.contentView : constraint.firstItem;
        id secondItem = constraint.secondItem == self ? self.contentView : constraint.secondItem;
        [self.contentView addConstraint:[NSLayoutConstraint constraintWithItem:firstItem
                                                                     attribute:constraint.firstAttribute
                                                                     relatedBy:constraint.relation
                                                                        toItem:secondItem
                                                                     attribute:constraint.secondAttribute
                                                                    multiplier:constraint.multiplier
                                                                      constant:constraint.constant]];
    }];
}

#pragma mark Height

- (CGFloat)heightAfterAutoLayoutPassAndRenderingWithBlock:(UICollectionViewCellAutoLayoutRenderBlock)block
{
    return [self heightAfterAutoLayoutPassAndRenderingWithBlock:block
                                            collectionViewWidth:CGRectGetWidth([[UIScreen mainScreen] bounds])];
}

- (CGFloat)heightAfterAutoLayoutPassAndRenderingWithBlock:(UICollectionViewCellAutoLayoutRenderBlock)block collectionViewWidth:(CGFloat)width
{
    NSParameterAssert(block);

    block();

    [self setNeedsUpdateConstraints];
    [self updateConstraintsIfNeeded];

    self.bounds = CGRectMake(0.0f, 0.0f, width, CGRectGetHeight(self.bounds));

    [self setNeedsLayout];
    [self layoutIfNeeded];

    CGSize calculatedSize = [self.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];

    return calculatedSize.height;

}

@end

用法示例：

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    MYSweetCell *cell = [MYSweetCell heightCalculationCellFromNibWithName:NSStringFromClass([MYSweetCell class])];
    CGFloat height = [cell heightAfterAutoLayoutPassAndRenderingWithBlock:^{
        [(id<MYSweetCellRenderProtocol>)cell renderWithModel:someModel];
    }];
    return CGSizeMake(CGRectGetWidth(self.collectionView.bounds), height);
}

谢天谢地，我们不必在iOS8中演奏爵士乐，但现在就可以了！

在我的例子中，填充是因为sectionHeader和sectionFooter的高度，故事板允许我将其更改为最小值1。因此，在viewDidLoad方法中：

tableView.sectionHeaderHeight = 0
tableView.sectionFooterHeight = 0

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

@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);

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

如果你有一根长长的绳子。例如没有换行符的。然后你可能会遇到一些问题。

公认的答案和其他几个答案都提到了“所谓的”修复。你只需要添加

cell.myCellLabel.preferredMaxLayoutWidth = tableView.bounds.width

我发现Suragh的回答最完整、最简洁，因此不会令人困惑。

虽然没有解释为什么需要这些改变。让我们这样做吧。

将以下代码放到项目中。

import UIKit

class ViewController: UIViewController {

    lazy var label : UILabel = {
        let lbl = UILabel()
        lbl.translatesAutoresizingMaskIntoConstraints = false
        lbl.backgroundColor = .red
        lbl.textColor = .black
        return lbl
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        // step0: (0.0, 0.0)
        print("empty Text intrinsicContentSize: \(label.intrinsicContentSize)")
        // ----------
        // step1: (29.0, 20.5)
        label.text = "hiiiii"
        print("hiiiii intrinsicContentSize: \(label.intrinsicContentSize)")
        // ----------
        // step2: (328.0, 20.5)
        label.text = "translatesAutoresizingMaskIntoConstraints"
        print("1 translate intrinsicContentSize: \(label.intrinsicContentSize)")
        // ----------
        // step3: (992.0, 20.5)
        label.text = "translatesAutoresizingMaskIntoConstraints translatesAutoresizingMaskIntoConstraints translatesAutoresizingMaskIntoConstraints"
        print("3 translate intrinsicContentSize: \(label.intrinsicContentSize)")
        // ----------
        // step4: (328.0, 20.5)
        label.text = "translatesAutoresizingMaskIntoConstraints\ntranslatesAutoresizingMaskIntoConstraints\ntranslatesAutoresizingMaskIntoConstraints"
        print("3 translate w/ line breaks (but the line breaks get ignored, because numberOfLines is defaulted to `1` and it will force it all to fit into one line! intrinsicContentSize: \(label.intrinsicContentSize)")
        // ----------
        // step5: (328.0, 61.0)
        label.numberOfLines = 0
        print("3 translate w/ line breaks and '0' numberOfLines intrinsicContentSize: \(label.intrinsicContentSize)")
        // ----------
        // step6: (98.5, 243.5)
        label.preferredMaxLayoutWidth = 100
        print("3 translate w/ line breaks | '0' numberOfLines | preferredMaxLayoutWidth: 100 intrinsicContentSize: \(label.intrinsicContentSize)")

        setupLayout()
    }
    func setupLayout(){
        view.addSubview(label)
        label.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        label.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    }
}

注意，我没有添加任何大小限制。我只添加了centerX和centerY约束。但标签的大小仍然正确为什么？

因为contentSize。

为了更好地处理这个问题，首先保留步骤0，然后注释掉步骤1-6。让setupLayout（）保持不变。观察行为。

然后取消注释步骤1，并观察。

然后取消注释步骤2并观察。

执行此操作，直到取消注释所有6个步骤并观察它们的行为。

从这一切可以得出什么结论？什么因素可以改变contentSize？

文本长度：如果文本较长，则intrinsicContentSize的宽度将增加换行符：如果添加，则intrinsicContentSize的宽度将是所有行的最大宽度。如果一行有25个字符，另一行有2个字符，而另一行则有21个字符，则将根据25个字符计算宽度允许的行数：必须将numberOfLines设置为0，否则将不会有多行。numberOfLines将调整intrinsicContentSize的高度进行调整：假设基于文本，intrinsicContentSize的宽度为200，高度为100，但您希望将宽度限制为标签的容器，您打算做什么？解决方案是将其设置为所需的宽度。通过将preferredMaxLayoutWidth设置为130，则新的intrinsicContentSize的宽度大约为130。高度显然会超过100，因为你需要更多的线条。也就是说，如果你的约束设置正确，那么你根本不需要使用这个！有关更多信息，请参阅此答案及其评论。如果没有限制宽度/高度的约束，则只需要使用preferredMaxLayoutWidth，例如“除非文本超过preferredMaxLayoutWidth否则不要换行”。但如果你将前导/尾随和numberOfLines设置为0，那么你就可以100%确定了！长话短说这里推荐使用它的大多数答案都是错误的！你不需要它。需要它意味着你的约束没有正确设置，或者你只是没有约束字体大小：还请注意，如果增加fontSize，则intrinsicContentSize的高度将增加。我的代码中没有显示这一点。你可以自己试试。

回到tableViewCell示例：

您需要做的是：

将numberOfLines设置为0将标签正确约束到边距/边无需设置preferredMaxLayoutWidth。

假设您有一个带有子视图的单元格，并且希望该单元格的高度足够高，以包含子视图+填充。

1） 将子视图的底部约束设置为cell.contentView减去所需的填充。不要对单元格或cell.contentView本身设置约束。

2） 将tableView的rowHeight属性或tableView:heightForRowAtIndexPath:设置为UITableViewAutomaticDimension。

3） 将tableView的estimatedRowHeight属性或tableView:estimatedHeightForRowAtIndexPath:设置为高度的最佳猜测。

就是这样。