可变宽度标签列的 iOS 自动布局

Posted 2023-03-15

【中文标题】可变宽度标签列的 iOS 自动布局

【英文标题】：iOS Auto Layout for Columns of Variable Width Labels

【发布时间】：2014-02-08 16:14:52

【问题描述】：

目标

我正在尝试使用自动布局约束实现以下设计：

我的尝试

中间的标签很简单（水平居中查看）。

左右标签并不那么简单。简单地添加 20 的 Leading 和 Trailing Space 约束不适用于所有内容。此外，下方的详细标签可以更宽。

我考虑为左右标签提供 >= 20 的 Leading 和 Trailing Space 约束并将文本居中。

问题

如何在动态内容的同时实现 3 个标签的列布局：

确保它们之间至少有 20pt 的填充 确保对于较小的内容，左右标签的插入量超过 20pts

【参考方案1】：

Auto Layout Programming Guide 中有一个创建等距视图的示例。该方法是在您想要间隔的视图之间（以及边缘）创建不可见的“间隔”视图，并使用自动布局设置间隔宽度。间隔的宽度（或垂直间隔视图的高度）设置为相等。来自PG：

按比例分配视图 1. 创建可见视图。 2. 创建等于可见视图数加一的间隔视图。 3. 交替放置视图，从间隔视图开始。 要分隔两个可见视图，请将所有视图按以下模式放置，从屏幕左侧开始向右移动：spacer1 | view1 | spacer2 | view2 | spacer3. 4. 约束间隔视图，使它们的长度彼此相等。 5. 创建从第一个间隔视图到容器视图的前导约束。 6. 创建从最后一个间隔视图到容器视图的尾随约束。 7. 在间隔视图和可见视图之间创建约束。

【讨论】：

感谢您的参考。我还在加快自动布局的速度。我会试试这个。

【参考方案2】：

有几种方法可以解决这个问题。

您可以给标签一个固定的宽度，并使文本居中对齐（这在界面生成器中比其他解决方案更容易做到）。如果您使每个标签的大小相同，并将边缘固定在一起，这将为您提供您想要的。您不需要任何间距，除非您的内容可能会填满标签 - 在这种情况下，第二种解决方案更好。 另一个选项是将每个标签的中心固定到超级视图的中心，但使用一个乘数 - 所以对于左标签，乘数为 0.5，中心，乘数为 1.0，右标签，a 1.5 的乘数。目前您只能在代码中执行此操作，但新版本的 Xcode 正在开发中...

【讨论】：

为了清楚起见，第二种解决方案是什么？我没有考虑乘数。我可以检查一下。

第二个解是乘数。我会改写答案。

【参考方案3】：

您可以将大百分比标签和相应的细节标签包装到一个包装视图中，并根据其内容调整该包装视图的大小，然后只需将这三个包装视图与 20 像素的填充对齐。

        -.-.-.-.           -.-.-.           -.-.-.-.
- (20) -| 100% | - (20) -  |100%| - (20) -  | 100% | - (20) -  
        |detail|           | d  |           |detail|
        -.-.-.-.           -.-.-.           -.-.-.-.

这只是解决方案之一，直截了当。

【讨论】：

有道理。不过，我想避免 wrapper views 。尝试学习如何以正确的方式。

是的，完全同意，所以我建议仅在无法想出更好或快速需要的情况下才使用我的解决方案。

【参考方案4】：

我通过为分隔标签的约束创建出口来解决它（在我的例子中，边距是固定的）。

我做到了：

let constant = (constraint1to2.constant + constraint2to3.constant)/2
constraint1to2.constant = constant
constraint2to3.constant = constant