ios - 如何使用自动布局来实现如下布局？

Question

我有一个垂直的 UIStackView ，其顶部、前缘和后缘固定到 super View ，其高度由其 subview 决定。

其排列的 subview 由 5 个水平 UIStackView 组成，每个 UIStackView 都有 3 个 UILabel 作为其排列的 subview 。

对于每个水平UIStackView，第一个UILabel的文本是标题，第二个UILabel的文本是冒号第三个UILabel的文本是如下图所示的信息

所有 UILabel 都有 numberOfLines = 0，因此它们是多行的。

我想使用自动布局创建约束，以便满足以下条件 -

1. 冒号UILabel全部垂直对齐
2. 信息 UILabel 的宽度至少为父 View 的 20%
3. 信息 UILabel 的宽度最多为父 View 的 60%
4. 如果所有 info UILabel 的宽度小于父 View 的 60%(参见 3)，那么它必须收缩到最宽的 info UILabel 的宽度>.

我了解如何使用自动布局来创建约束以满足前 3 个条件。

但是，我不明白如何创建约束来满足第四个条件。我尝试增加“内容拥抱优先级”，但它将标签缩小到父 View 的 20%(参见 2)。

谁能指出如何实现这种布局？

Answer 1

这比表面上看起来要复杂得多。

必须评估“信息”列的最小/最大宽度和自动换行，并且必须根据“信息”列变量宽度评估“标题”列的自动换行... 和“信息”标签必须根据最宽的换行(或不换行)文本来匹配宽度。

自动布局需要处理很多事情。

我不认为仅在有约束的情况下就可以做到这一点。主要问题是自动布局根据信息标签最宽的潜力来计算标题标签的高度。

所以，我们可以得到这样的结果:

并且标题标签文本不再与标签顶部垂直对齐。

我能想到的最好办法是覆盖viewDidLayoutSubviews()，使用一个计数器强制自动布局首先计算信息标签，然后计算标题标签。

关于约束设置...

标题标签不需要什么特殊的 - 只需将行数设置为零即可允许自动换行。

“冒号”标签不需要约束，但它们确实需要将水平内容拥抱和压缩阻力设置为 1000(必需)，因为我们不希望它们拉伸(stretch)或被挤压.

信息标签需要:

• 水平内容抗压性:1000
• 水平内容拥抱:999
• 宽度:>= 其 stackView 宽度，乘数为 0.2
• 宽度:<= 其 stackView 宽度，乘数为 0.6
• 宽度:=其 stackView 宽度，乘数为 0.2，优先级为:999

最后，底部 4 个信息标签需要等于顶部 信息标签的宽度约束。

组成 5 个“行”的水平堆栈 View 应设置为:

• 对齐方式:顶部
• 分布:填充
• 间距:8(“列”之间的水平间距)

包含 5 个“行”的垂直堆栈 View 应设置为:

• 对齐:填充
• 分布:填充
• 间距:10(“行”之间的垂直间距)

我在 GitHub 上发布了一个项目来演示布局 - 它有 10 种不同的标签内容“变体”来显示大小调整的工作原理:https://github.com/DonMag/MutlilineVarWidthLabelColumns