如何使用自动布局实现如下布局？
How to use auto layout so that the following layout is achieved?
我有一个垂直的 UIStackView，其顶部、前导和尾部边缘固定到父视图，其高度由其子视图确定。
它的排列子视图由5个水平UIStackViews组成，每个水平排列子视图有3个UILabels。
对于每个水平 UIStackView，第一个 UILabel 的文本是标题，第二个 UILabel 的文本是冒号，第三个 UILabel 的文本是冒号=12=]就是下图中的信息
所有 UILabel 都具有 numberOfLines = 0，因此它们是多行的。
我想使用自动布局创建约束以满足以下条件-
- 冒号
UILabel全部垂直对齐
- 信息
UILabel 的宽度至少为 parent 视图的 20%
- 信息
UILabel 的宽度最多为 parent 视图的 60%
- 如果所有信息
UILabel 的宽度小于 parent 视图的 60%（见 3 ），则它必须收缩到最宽信息的宽度 UILabel.
我了解如何使用自动布局来创建满足前 3 个条件的约束。
但是，我不明白如何创建约束来满足第四个条件。我尝试增加 "Content Hugging Priority" 但它将标签缩小到 parent 视图的 20%（参见 2）。
谁能指出如何实现这种布局？
您可以通过使用最小和最大约束来实现这种 UI。
您可以遵循以下限制条件。
- 给
max width到Heading label与屏幕的关系。
- 给
fix width 给 colon label
- 给
leading、trailing、top、bottom 给 info label
- 将信息标签的水平
content hugging priority更改为252.
请查看下面的图片了解更多详情。
我例子的实际结构
标题标签的限制条件
info-label
的约束条件
输出
如果您需要任何帮助，请随时再次询问。
这比表面上看起来要复杂得多。
必须根据 min/max 宽度和 word-wrapping 评估 "Info" 列，并且必须根据 word-wrapping 评估 "Heading" 列"Info" 列可变宽度... 和 "Info" 标签必须根据最宽的包装 (或不）文本。
auto-layout 要处理的事情太多了。
我不认为它只能通过约束来完成。主要问题是 auto-layout 根据信息标签最宽的 潜力 计算标题标签的高度。
所以，我们可以这样结束：
标题标签文本不再与标签顶部垂直对齐。
我能想到的最好办法是覆盖 viewDidLayoutSubviews()，使用强制 auto-layout 先计算信息标签然后计算标题标签的计数器。
关于约束设置...
标题标签不需要什么特别的 - 只需将行数设置为零即可 word-wrapping。
"Colon" 标签不需要约束，但它们确实需要将 Horizontal Content Hugging 和 Compression Resistance 都设置为 1000（必需），因为我们不希望它们拉伸或变形挤.
信息标签需要：
- 水平内容抗压：1000
- 水平内容拥抱：999
- 宽度：>= 其 stackView 宽度乘以 0.2
- 宽度：<= 其 stackView 宽度乘以 0.6
- 宽度：= 乘数 0.2 和优先级的 stackView 宽度：999
最后，底部 4 个信息标签需要宽度约束等于 顶部 信息标签。
构成 5 个 "rows" 的水平堆栈视图应设置为：
- 对齐方式：顶部
- 分配：填充
- 间距：8（"columns"之间的水平间距）
包含 5 "rows" 的垂直堆栈视图应设置为：
- 对齐：填充
- 分配：填充
- 间距：10（"rows"之间的垂直间距）
我在 GitHub 上发布了一个演示布局的项目 -- 它有 10 个不同的 "variations" 标签内容来展示大小调整的工作原理：https://github.com/DonMag/MutlilineVarWidthLabelColumns
我有一个垂直的 UIStackView，其顶部、前导和尾部边缘固定到父视图，其高度由其子视图确定。
它的排列子视图由5个水平UIStackViews组成，每个水平排列子视图有3个UILabels。
对于每个水平 UIStackView，第一个 UILabel 的文本是标题，第二个 UILabel 的文本是冒号，第三个 UILabel 的文本是冒号=12=]就是下图中的信息
所有 UILabel 都具有 numberOfLines = 0，因此它们是多行的。
我想使用自动布局创建约束以满足以下条件-
- 冒号
UILabel全部垂直对齐 - 信息
UILabel的宽度至少为 parent 视图的 20% - 信息
UILabel的宽度最多为 parent 视图的 60% - 如果所有信息
UILabel的宽度小于 parent 视图的 60%（见 3 ），则它必须收缩到最宽信息的宽度UILabel.
我了解如何使用自动布局来创建满足前 3 个条件的约束。
但是，我不明白如何创建约束来满足第四个条件。我尝试增加 "Content Hugging Priority" 但它将标签缩小到 parent 视图的 20%（参见 2）。
谁能指出如何实现这种布局？
您可以通过使用最小和最大约束来实现这种 UI。 您可以遵循以下限制条件。
- 给
max width到Heading label与屏幕的关系。 - 给
fix width给colon label - 给
leading、trailing、top、bottom给info label - 将信息标签的水平
content hugging priority更改为252.
请查看下面的图片了解更多详情。
我例子的实际结构
标题标签的限制条件
info-label
的约束条件
输出
如果您需要任何帮助，请随时再次询问。
这比表面上看起来要复杂得多。
必须根据 min/max 宽度和 word-wrapping 评估 "Info" 列，并且必须根据 word-wrapping 评估 "Heading" 列"Info" 列可变宽度... 和 "Info" 标签必须根据最宽的包装 (或不）文本。
auto-layout 要处理的事情太多了。
我不认为它只能通过约束来完成。主要问题是 auto-layout 根据信息标签最宽的 潜力 计算标题标签的高度。
所以，我们可以这样结束：
标题标签文本不再与标签顶部垂直对齐。
我能想到的最好办法是覆盖 viewDidLayoutSubviews()，使用强制 auto-layout 先计算信息标签然后计算标题标签的计数器。
关于约束设置...
标题标签不需要什么特别的 - 只需将行数设置为零即可 word-wrapping。
"Colon" 标签不需要约束，但它们确实需要将 Horizontal Content Hugging 和 Compression Resistance 都设置为 1000（必需），因为我们不希望它们拉伸或变形挤.
信息标签需要：
- 水平内容抗压：1000
- 水平内容拥抱：999
- 宽度：>= 其 stackView 宽度乘以 0.2
- 宽度：<= 其 stackView 宽度乘以 0.6
- 宽度：= 乘数 0.2 和优先级的 stackView 宽度：999
最后，底部 4 个信息标签需要宽度约束等于 顶部 信息标签。
构成 5 个 "rows" 的水平堆栈视图应设置为：
- 对齐方式：顶部
- 分配：填充
- 间距：8（"columns"之间的水平间距）
包含 5 "rows" 的垂直堆栈视图应设置为：
- 对齐：填充
- 分配：填充
- 间距：10（"rows"之间的垂直间距）
我在 GitHub 上发布了一个演示布局的项目 -- 它有 10 个不同的 "variations" 标签内容来展示大小调整的工作原理：https://github.com/DonMag/MutlilineVarWidthLabelColumns