自动布局中的多个标签和段视图

Posted 2023-03-11

【中文标题】自动布局中的多个标签和段视图

【英文标题】：Multiple labels and segment views in Auto Layout

【发布时间】：2017-03-18 14:08:15

【问题描述】：

我在使用自动布局时遇到了一些问题。我正在制作一个练习应用程序，并且我已经构建了这个显示来配置用户单位设置，但我正在努力布置约束。这就是我希望它看起来的样子......

但这是我在不同设备（iPhone 5）上运行时得到的结果......

这些是我正在使用的约束：

（单位）- 将中心 X 对齐到 Superview，宽度等于：91，底部空间到：重量，顶部空间到顶部布局指南：31

（权重）- 将中心 X 对齐到 Superview，宽度等于：69，底部空间到 weightSegment：13，顶部空间到单位：22

(WeightSegment) - 将中心 X 对齐到 Superview，宽度等于：260，底部空间到距离：23，顶部空间到重量：13

（距离）- 将中心 x 与 Superview 对齐，顶部空间到权重段：23，底部空间到距离段：13

(DistanceSegment) - 将中心 X 对齐到 Superview，宽度等于：260，底部空间到高度：23，顶部空间到距离：13

（高度） - 将中心 x 与 Superview 对齐，顶部空间到距离段：23，底部空间到高度段：13

(HeightSegment) - 将中心 X 对齐到 Superview，宽度等于：260，底部空间到 Scale：23，顶部空间到高度：13

(Scale) - 将中心 x 对齐到 Superview，顶部空间到高度段：23，底部空间到 ScaleSegment 段：13

(ScaleSegment) - 将中心 X 与 Superview 对齐，宽度等于：260，顶部空间缩放：13

(Done) - 将中心 X 对齐到 Superview，宽度等于：295，高度等于：53，底部空间到 BottomLayoutGuide：67。

【参考方案1】：

对此进行调试，您的水平约束似乎很好，所以让我们删除所有中心 X 对齐和宽度。这留下了垂直约束。我的直觉立刻想到了什么，这似乎是问题所在。您已经从上到下限制了所有内容...单位、重量、WeightSegment 等。除了一个 - 完成按钮。您有三个选择：

最简单：

通过将 ScaleSegment 的顶部与底部对齐来重做完成按钮上的约束。这里的问题是在大型设备上，底部会有大量的“空白”。不过，这比.... 更可取。

B 计划：

保留 Done 按钮约束并重做其他控件，从下向上工作（将它们的底部与最后包含的控件的顶部对齐）。我个人不喜欢这样，因为它有更多的变化，而且您在大型设备上仍然有“空白”，除了它现在位于顶部。不过还有更好的选择。不过，这些选项中的任何一个都更有效....

最佳选择：

使用布局指南。请注意，我只知道如何在代码中执行它们。它们可能在 IB 中不可用！但是，如果您在每个“集合”元素（UILabel 和 UISegmentedControl）之间插入一个 layoutGuide，然后使它们的垂直高度彼此相等，那么您可以控制 exact 您想要的间距量顶部 和 底部，让自动布局根据设备大小决定剩余多少相等的垂直间距。

当然，如果您使用的是 IB 并且 layoutGuides 不可用，请使用最简单的选项。