具有“三列”自动布局的 UITableViewCell

Posted 2023-03-08

技术标签:

【中文标题】具有“三列”自动布局的 UITableViewCell【英文标题】：UITableViewCell with 'Three column' Autolayout 【发布时间】：2015-09-29 11:31:35 【问题描述】：

我有一个具有以下布局的 UITableViewCell：

-----------------------------------
[Label1] [Label2         ][Button1]
[Label3] [Label4         ][Button2]
                          [Button3]
------------------------------------

我想将其视为三列，其中 [Label2] 和 [Label4] 可以具有可变内容，这意味着这些标签的高度可以改变。 [Label1]、[Label3] 和 [Button1]、[Button2] 和 [Button3] 的高度和宽度是固定的。

Column 1 - fixed width
[Label1]
[Label3]

Column 2 - variable width and height
[Label2]
[Label4]

Column 3 - fixed width and height
[Button1]
[Button2]
[Button3]

使用 Autolayout 实现此布局的最佳方式是什么？

【问题讨论】：

【参考方案1】：

标签 1 被限制在单元格内容视图的左侧和顶部，具有固定的宽度和高度。

标签 3 被限制在单元格内容视图的左侧，具有固定的宽度和高度。

按钮 1,2,3 被限制在单元格内容视图的右侧并固定宽度和高度。按钮 1 和 2 分别垂直居中于标签 1 和标签 3。

标签 2 的前导限制为标签 1，尾随限制为按钮 1。它的顶部限制为标签 1，底部应限制为标签 3 的顶部。

标签 4 的前导限制为标签 3，尾随限制为按钮 2。它的顶部限制为标签 3，底部应限制为按钮 3 的顶部。

按钮 3 底部限制在单元格内容视图的底部。

标签 2 和标签 4 应设置为 0 行数。

您可能还希望将标签 1 - 标签 3 和按钮 2 - 按钮 3 之间的间距设置为大于或等于 8，以防标签 2 和标签 4 中没有文本，他们希望折叠整个单元格，

您的表格视图应使用自动调整大小的单元格 (tableView.rowHeight = UITableViewAutomaticDimension)。