自调整TableView单元格

最近,一些初级的iOS开发人员向我询问了可自动调整大小的tableview单元(根据其内容增长的单元),并意识到从理论上解释它的工作原理是一个不错的起点,但是有一个示例对其进行备份甚至更好。 因此,今天我们将在上方创建聊天单元!

自定义大小的单元格根据其子视图的大小要求确定其大小。 正确设置高度的技巧是防止高度模糊的布局约束。

那是什么意思呢?

例如,一个标签被限制在单元格内容视图的顶部和顶部锚点上。 随着文本长度的增加,标签会垂直增加吗? 还是水平? 或两者? 在什么条件下? 横向增长是无限的吗? 这就是我含糊不清的意思。

答案当然是,鉴于当前的限制,标签将无限制地水平增长。 这是不好的。 我们的单元应具有最大宽度和可变高度。

那么该怎么办?

首先,让我们谈谈一般策略。 可以将单元格的contentView看作是矩形橡皮筋。 只要子视图共同顶着顶部和底部,并一直向上和向下相互抵触,从而形成类似堆栈的结构,则内容视图(如橡皮筋)将拉伸以容纳其子视图-使用集体固有尺寸其子视图的大小。

好的讨论,让我们进入代码,看看我们可以学到什么!

从总体上讲,这是我们的目标结构。 橙色勾勒出内容视图,蓝色圆圈勾勒出图像视图,红色代表标签,绿色代表标签的超级视图,这就是我们将要应用的圆角半径以及赋予标签的原因文字气泡边缘的一些填充。

ChatCell.swift

重要的是要注意messageLabel的numberOfLines属性必须设置为0。

仔细检查第50–62行的约束,您会发现以下几点:

  • 所有子视图都限制在其各自的父视图的顶部和底部。
  • 图像视图具有固定的大小,但也具有lessThanOrEqualTo底部约束。
  • messageBackground没有明确的高度,但其尾锚具有最大值。 它还具有lessThanOrEqualTo底部约束。
  • messageLabel在它和messageBackground之间有一个边距,但是它限制在messageBackground的所有边缘。

首先确保子视图与contentView的顶部和底部相对。

第二个方法确保如果messageBackground小于imageView的固定大小,则imageView将直接推向contentView的底部,确定其高度。

如果messageBackground大于imageView?

lessThanOrEqual to bottom约束将确保imageView不会被拉长,因为它可以进一步远离底部。

第三,从lessThanOrEqualTo底部约束开始,将保证与上述图像视图的底部约束相同的行为。

真正的钱是,第三个提供了消息背景的最大宽度,这意味着在达到最大值之后,messageLabel将被迫向下增长,从而导致高度增加🙌🏽

与第四个项目符号结合使用,因为标签卡在messageBackground上,所以随着标签的增长,背景将被迫增长。 随着背景的增长,contentView也将随之增长! 🎉

您需要做的最后一件事是设置表视图的rowHeightestimatedRowHeight如下所示:

  tableview.rowHeight = UITableViewAutomaticDimension 
tableview.estimatedRowHeight = 50

只是为了让您不知道为什么,这是来自Apple的直接解释:

要启用自动调整大小的表格视图单元格,必须将表格视图的rowHeight属性设置为UITableViewAutomaticDimension 。 您还必须将一个值分配给estimatedRowHeight属性。 一旦设置了这两个属性,系统就会使用“自动布局”来计算行的实际高度。

就像这样,我们有自动调整大小的单元! 👏🏽

完整代码在下面的链接中

vhart / ResizingTableViewCellsPlayground

通过在GitHub上创建一个帐户来为ResizingTableViewCellsPlayground开发做出贡献。

github.com


这就是我今天所拥有的。 和往常一样,评论,鼓掌,订阅-如果那是您的事👍🏽

☮️❤️🐶和🐯