如何使用自动布局以实现以下布局？

Question

我有一个垂直的UIStackView，其顶部，前边缘和后边缘固定到超级视图，其高度由其子视图确定。

它的排列子视图由5个水平UIStackView组成，每个水平UILabel作为排列子视图。

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

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

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

1. 冒号0全部垂直对齐
2. 信息UILabel的宽度至少占父视图的20％
3. 信息UILabel的宽度最多为父视图的60％
4. 如果所有信息UILabel的宽度小于父视图的60％（请参见3），则它必须缩小到最宽信息UILabel的宽度。

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

但是，我不明白如何创建约束来满足第四个条件。我尝试增加“内容拥抱优先级”，但将标签缩小到父视图的20％（请参阅2）。

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

Answer 1

您可以通过使用最小和最大约束来实现这种UI。 您可以遵循以下限制条件。

1. 根据屏幕的关系将max width赋予Heading label。
2. 将fix width授予colon label
3. 将leading，trailing，top，bottom赋予info label
4. 将信息标签的水平 content hugging priority更改为 252 。

请检查以下图像以获取更多详细信息。

我的示例的实际结构

标题标签的约束

信息标签的约束

输出

如果您需要任何帮助，请随时询问。

Answer 2

这比表面上的复杂得多。

必须对“ Info”列的最小/最大宽度和单词换行进行评估，并且必须根据“ Info”列的可变宽度来评估“ Heading”列的换行... 和 ，“信息”标签必须根据最宽的包装（或不包装）文本来匹配宽度。

自动布局需要处理很多。

我不认为只能通过约束来完成。主要问题在于，自动布局会根据潜力将信息标签的宽度最大化，从而计算出标题标签高度的高度。

因此，我们可以得出以下结论：

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

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

关于约束设置...

“标题”标签不需要特殊设置-只需将行数设置为零即可进行自动换行。

“冒号”标签不需要约束，但它们确实需要将“水平内容拥抱”和“抗压缩性”都设置为$filePath="c:/mispictures/photos/foto1.jpg" Yii::$app->response->sendFile($filePath,"mifile.jpg"); （必需），因为我们不希望它们拉伸或挤压。 >

信息标签需要：

• 水平内容压缩阻力：1000
• 水平内容拥抱：999
• Width：> =乘数为0.2的stackView宽度
• 宽度：<=其乘数为0.6的stackView宽度
• 宽度：=其stackView宽度（乘数为0.2，优先级为999）

最后，底部 4个Info标签需要与 top Info标签相等的宽度约束。

组成5个“行”的水平堆栈视图应设置为：

• 对齐方式：顶部
• 分布：填充
• 间距：8（“列”之间的水平间距）

包含5个“行”的垂直堆栈视图应设置为：

• 对齐方式：填充
• 分布：填充
• 间距：10（“行”之间的垂直间距）

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