在iOS 8的自动调整大小的UITableViewCell [英] Auto-sizing UITableViewCell in iOS 8

问题描述

我有一个UITableViewCell子类，其中包含一个多标签，我想细胞自身大小动态的基于标签的内容。我知道，iOS 8的推出了基于自动版式约束自动调整大小的细胞，我发现这几个例子已经在SO，但我仍然有一些麻烦，很好地贯彻这一行为。

I have a UITableViewCell subclass which contains a multiline label, and I would like the cell to size itself dynamically based on the content of that label. I'm aware that iOS 8 introduced auto-sizing cells based on AutoLayout constraints, and I've found several examples of this already on SO, but I'm still having some trouble implementing this behavior properly.

下面是我的updateConstraints实现：

Here's my updateConstraints implementation:

- (void)updateConstraints {
    [super updateConstraints];

    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[_nameLabel(==20)]-10-[_tweetLabel]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_nameLabel, _tweetLabel)]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[_avatarView]-10-[_nameLabel]-10-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_avatarView, _nameLabel)]];

    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[_nameLabel]-10-[_tweetLabel]-10-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_nameLabel, _tweetLabel)]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[_avatarView]-10-[_tweetLabel]-10-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_avatarView, _tweetLabel)]];

    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[_avatarView(==45)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_avatarView)]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[_avatarView(==45)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_avatarView)]];
}

在表视图控制器我设置的行高度UITableViewAutomaticDimension（我设置估计行高度以及）。在运行时，我得到了一系列的自动排版错误，所有的表视图细胞的出现几乎完全重叠。

In the table view controller I set the row height to UITableViewAutomaticDimension (and I set an estimated row height as well). At runtime, I get a series of auto layout errors and all of the table view cells appear nearly completely overlapped.

自动布局冲突是以下约束之间：

The auto layout conflicts are between the following constraints:

• 五：| - （10） - [_ nameLabel]


• 五：[_ nameLabel（20）]


• 五：[_ nameLabel] - （10） - [_ tweetLabel]


• 五：[_ tweetLabel] - （10） - |


• 五：[单元（44）]

• V:|-(10)-[_nameLabel]
• V:[_nameLabel(20)]
• V:[_nameLabel]-(10)-[_tweetLabel]
• V:[_tweetLabel]-(10)-|
• V:[cell(44)]

我怀疑最后一个约束，UIView的封装，布局，高度，这迫使44的高度，是问题的原因，但我不太肯定来自，所以希望有人可以摆脱一些轻的问题。

I suspect the last constraint, "UIView-Encapsulated-Layout-Height", which forces a height of 44, is the cause of the issue, but I'm not quite sure where that comes from, so hopefully somebody can shed some light on the issue.

推荐答案

在为实施表视图单元格自动行高，你需要做到以下几点：

In order to implement automatic row heights for table view cells, you need to do the following:

1. 实施允许视图以恩preSS的preferred高度单元格的内容查看内自动布局约束。一定要设置的UILabel s到自动换行多行。

1. Implement Auto Layout constraints within the cell's contentView that allow the view to express its preferred height. Be sure to set UILabels to word wrap over multiple lines.

要确保你已经在两个维度定义的约束的轴向链，也就是说，所有的方式共同结合从视图到其他的一个边缘的约束。也许最简单的办法，以确保这些限制是正确的是要实现自定义的内容作为一个普通的老式的UIView （这是很容易进行测试），然后使用约束，以使 UITableViewCell.contentView 这一观点拥抱。 （我用这个主旨自动化建设视图包装单元。）

Be sure you've defined an axial chain of constraints in both dimensions, that is, constraints that collectively bind all the way from one edge of the view to the other. Perhaps the easiest way to be sure these constraints are correct is to implement your custom content as a plain old UIView (which is easy to test), and then use constraints so that the UITableViewCell.contentView hugs that view. (I use this gist to automate building the "view-wrapping cell".)

设置 tableView.rowHeight = UITableViewAutomaticDimension

我已经花了很多时间与此功能工作的一个令人费解的量。 这GitHub库显示自尺寸表视图细胞包含单个包装的文字标签七个完整示例 - 编程，笔尖为基础，故事情节为基础，等等。

I have spent a puzzling amount of time working with this feature. This github repo shows seven complete examples of self-sizing table view cells containing a single label of wrapping text -- programmatic, nib-based, storyboard-based, etc..

最后，如果你看到不可满足的约束提的UIView封装，布局，高度还是在第一时间表视图负荷类似的警告不要过于担心。这是的UITableView 的初始过程中创建一个单元格，确定人工制品什么的规模的应的基础上自动布局约束的，并保持的UITableViewCell 紧紧包裹了内容查看。我上面提到的回购有更广泛的讨论和code探索API的这个有点尴尬的角落。

Finally, do not worry too much if you see warnings about unsatisfiable constraints mentioning "UIView-Encapsulated-Layout-Height" or similar at the first time the table view loads. This is an artefact of UITableView's initial process for creating a cell, determining what its size should be based on Auto Layout Constraints, and keeping the UITableViewCell tightly wrapping its contentView. The repo I mentioned above has more extensive discussion and code for exploring this somewhat awkward corner of the API.

您应该只担心约束违规警告，如果他们坚持的电池即使已装入并滚动了一下，或者如果你最初看到不正确的布局。在这种情况下，再次，第一步应始终以确保您的约束是通过开发他们孤立如果可能测试他们，在一个普通的的UIView 正确的。

You should only worry about constraint-violation warnings if they persist even after the cell has loaded and has scrolled a bit, or if you are seeing incorrect layouts initially. In this case, again, the first step should always be to ensure your constraints are correct by developing them and testing them in isolation if possible, in a plain UIView.

这篇关于在iOS 8的自动调整大小的UITableViewCell的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！