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

Question

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

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

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

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

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

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

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

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

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

标签： iosautolayoutuistackview

Answer 1

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

1. 给与屏幕max width的Heading label关系。
2. 给fix width_colon label
3. 给leading, trailing, top,bottom给info label
4. 将信息标签的水平 更改为252。content hugging priority

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

我的例子的实际结构

标题标签的约束

信息标签的约束

输出

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