翻译@Auto Layout Guide（自动布局指南）

• 原文：Auto Layout Guide
• 作者：Apple
• 更新：Yannmm@Github.com

---

Getting Started（新手上路）

Auto Layout Without Constraints（无约束的自动布局）

（译者：这里"无约束"指的是不需手动定义约束 🤔）

借助堆叠视图（Stack View），无需手动定义约束，我们也能感受自动布局的强大。堆叠视图适用于盛装行列排布的界面元素，其有若干属性可供设置。

• axis：（仅适用于UIStackView）定义内容的排布方向，水平或垂直。
• orientation：（仅适用于NSStackView）定义内容的排布方向，水平或垂直。
• distribution：定义既定方向上内容的分布方式。
• alignment：定义与既定方向垂直的方向上内容的对齐方式。
• spacing：定义两个相邻内容之间的间距。

堆叠视图的使用方法很简单：在界面编辑器（Interface Builder）中拖拽一个水平或垂直排布的堆叠视图到画布上，并放入内容。

如果一个内容有固有尺寸（intrinsic content size），在堆叠视图中它会保持这个尺寸；如果没有，界面编辑器会为其提供一个默认尺寸。缩放后者，界面编辑器会自动为其添加尺寸约束。

通过属性（Attributes）面板，修改堆叠视图的属性，微调布局。例如，下例中，间距为8pt，分布方式为均匀填充。

图3

堆叠视图在布局内容时，还会考虑内容视图的内缩（content-hugging）和外扩（compression-resistance）优先级，在尺寸（Size）面板中进行修改它们。

注意

为内容视图添加约束，可以进一步调整布局；然而，要注意避免冲突：一般来说，在某个方向上，如果视图的尺寸等同于固有尺寸，就可以添加约束。更多约束冲突的相关信息，详见Unsatisfiable Layouts（无法满足的约束）。

此外，堆叠视图中还可以互相嵌套，构建更为复杂的布局。

图4

总而言之，如果可能，尽量使用堆叠视图进行布局。如若不能，再手动创建约束。

更多堆叠视图的相关信息，详见UIStackView Class Reference或NSStack View Class Reference。

注意

虽然巧妙使用堆叠视图可以创建复杂界面，但仍无法完全回避手动创建约束。至少，我们需要通过约束定义堆叠视图本身的位置。