使用 Autolayout 和 Interface Builder 垂直展开/间隔的屏幕元素答案

【问题标题】：Vertically spread/spaced screen elements using Autolayout and Interface Builder使用 Autolayout 和 Interface Builder 垂直展开/间隔的屏幕元素
【发布时间】：2013-11-28 11:45:12
【问题描述】：

我有一个相对简单的纯纵向 UI，布局在 Storyboard 中，其中包含我想要垂直展开以填充 3.5 英寸和 4 英寸屏幕的项目。

换句话说，我希望调整控件之间的间距，以便 UI 可以很好地填满屏幕，而与屏幕尺寸无关。

这似乎不是一件不寻常的事情，但是我无法让 Interface Builder（在 Xcode 5 中）添加正确的约束 - 我似乎只能让它添加固定的垂直空间限制，不会针对不同的屏幕尺寸进行调整。

有没有人知道如何在不借助程序化 UI 构建的情况下做到这一点？我已经投入了大量精力来使基于 Storyboard 的 UI 恰到好处。

该解决方案需要同时在 iOS 6 和 7 上运行。谢谢！

【问题讨论】：

您是否有超过 2 个垂直堆叠的控件要展开？

标签： ios interface-builder xcode5 autolayout uistoryboard

【解决方案1】：

如何做到这一点取决于当屏幕尺寸发生变化时您想要进行什么样的调整。一种方法是分别为超级视图的顶部和底部提供顶部和底部大多数视图的垂直间距约束。添加一个视图，我通常在垂直堆叠的所有视图之间使用不带文本的 UILabel，并使它们彼此具有相等的高度。给其中一个“间隔”视图一个固定的高度，但对其进行编辑，使其优先级小于 1000（这意味着它不是必须满足的）。然后在每个“真实”视图和“间隔”的上方和下方的每个最近邻居之间添加间距约束，以便您将所有视图从上到下通过垂直间距约束连接在一起。当屏幕尺寸改变时，唯一可以改变的将是“间隔”的高度，因为优先级小于 1000，所有其他约束都是强制性的。我的约束如下所示：

每个标签与它们上方和下方的“真实”视图都有标准（8 磅）间距。顶视图和底视图应该与屏幕边缘有任何间距。

【讨论】：

将间隔视图的优先级设置为小于 1000 是拼图中缺少的部分 - 感谢您的帮助！

【解决方案2】：

Apple 现在发布了一份文档，描述了官方认可的解决此问题的方法：

https://developer.apple.com/library/ios/documentation/userexperience/Conceptual/AutolayoutPG/AutoLayoutbyExample/AutoLayoutbyExample.html#//apple_ref/doc/uid/TP40010853-CH5-SW8

方法总结：在控件之间插入间隔视图，它们具有相等的宽度/高度（如适用）约束。

【讨论】：