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

Posted 2023-03-15

【中文标题】如何使用自动布局来实现如下布局？

【英文标题】：How to use auto layout so that the following layout is achieved?

【发布时间】：2019-05-15 14:37:43

【问题描述】：

我有一个垂直的UIStackView，其顶部、前缘和后缘都固定在父视图上，其高度由其子视图确定。

其排列的子视图由 5 个水平的UIStackViews 组成，每个子视图都有 3 个 UILabels 作为排列的子视图。

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

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

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

冒号UILabels 都是垂直对齐的 信息UILabels 的宽度至少是父视图的 20% infoUILabels 的宽度最多为父视图的 60% 如果所有 info UILabels 的宽度小于父视图的 60%（参见 3），则它必须缩小到最宽 info UILabel 的宽度。

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

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

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

【问题讨论】：

您的“标题”标签也设置为numberOfLines = 0?意思是，他们可能还需要自动换行？

而且...你总是会有 5 个“行”吗？还是会是动态的？

是的，标题标签也可以自动换行。总会有 5 行。

不清楚，但我假设您希望结果是对齐的“列”，而不是每个“行”排列？换句话说，您想要 top 图像，而不是 bottom 图像：imgur.com/a/Jl9TC0o ?跨度>

@DonMag 是的，你是对的。我想要最上面的图片。

【参考方案1】：

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

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

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

我不认为它只能通过约束来完成。主要问题是自动布局根据信息标签最宽的潜力计算标题标签的高度。

所以，我们可以这样结束：

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

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

关于约束设置...

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

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

信息标签需要：

横向内容抗压性：1000 横向内容拥抱：999 宽度：>= 其 stackView 宽度，乘数为 0.2 宽度： 宽度：= 其 stackView 宽度，乘数为 0.2，优先级：999

最后，bottom 4 Info 标签需要宽度约束等于 top Info 标签。

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

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

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

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

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

【参考方案2】：

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

将max width与屏幕的关系赋予Heading label。 将fix width 给colon label 给leading，trailing，top，bottom给info label 将 Horizo​​ntal content hugging priority 的 info 标签更改为 252。

请查看以下图片了解更多详情。

我的例子的实际结构

标题标签的约束

信息标签的约束

输出

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

【讨论】：

感谢您的回答。这个解决方案的问题是它不满足问题中给出的第四个条件。使其中一个信息标签的文本比另一个长。您会看到信息标签的文本换行，但信息标签的宽度变得小于 superview 的 60%。

我认为您不能像 if lesser then 60% 那样检查条件，但您可以进行最大验证并将相同的最大宽度分配给所有其他标签。