使用包装标签增加 TableViewCell 高度

Posted 2023-03-04

【中文标题】使用包装标签增加 TableViewCell 高度

【英文标题】：Grow TableViewCell height with wrapping Label

【发布时间】：2015-11-04 20:38:40

【问题描述】：

我在自定义TableViewCell 中有以下四个Labels，目前看起来像这样：

我有这个：

第一个、第三个和第四个标签的宽度限制是固定的，最大行数设置为 1。第二个 Label 填充标签一和三之间的水平空间。

我希望第二个 Label 最多换行 2 行并垂直对齐到顶部，以便每个标签的第一行如下对齐：

我想要这个：

我已将每个标签的背景颜色设为灰色，以便可以看到约束。

【问题讨论】：

除非您想深入研究并进行大量计算，这已经在 SO 上进行了很多讨论，否则请使用单行标签之一来“测量”第二个标签的最大高度并让它限制行数。带有大写文本的第三个标签看起来不错，~2.2 的乘数应该可以解决问题。可能还希望将所有标签设置为多行以具有相同的插图。

【参考方案1】：

您可以使用自动调整大小的单元格来实现此目的。要完成这项工作，请将这两行添加到您的 UITableview:

tableView.rowHeight = UITableViewAutomaticDimension
tableView.estimatedRowHeight = 50

然后在 Interface Builder 中为您的 Prototype Cell 设置以下约束：

取消选中所有约束上的“约束到边距”。

标签 1：

顶部：10 左：10 底部：大于等于 10 宽度：60（或实际宽度）

标签 2：

顶部：10 左：10 底部：10

标签 3：

顶部：10 左：10 底部：大于等于 10 宽度：60（或实际宽度）

标签 4：

顶部：10 左：10 右：10 底部：大于等于 10 宽度：60（或实际宽度）

如果您像这样设置约束，当第二个标签将其文本换行到第二行时，单元格高度会自动变高。

【讨论】：

完美！简单直接。谢谢。

【参考方案2】：

要顶部对齐UILabel，您可以将所有UILabel 的边距顶部约束设置为常量，或者设置顶部对齐约束。要设置顶部对齐约束，请选择标签并从标签按住 ctrl 并拖动到另一个标签。从弹出窗口中选择顶部对齐。

要记住的一点是，对于第二个标签，将 4 个边距长度设置为 5pt 左右，但不要像其他标签那样限制其宽度或高度。

选择第二个标签后，在右侧实用程序面板中最多可以配置 2 行。

动态改变单元格的高度有点棘手。首先，您应该知道文本是否足够长以将标签拉伸成 2 行以及标签的高度。 (See Here) 如果文本足够长，可以占用两行，该方法将返回一个比正常情况大的高度值。根据这个高度变化，使用下面的 UITableViewDelegate 来动态改变那个 UITableViewCell 的高度：

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

希望这会有所帮助。