1. Understanding Auto Layout（理解自动布局）@Auto Layout Guide（自动布局指南）

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

• 原文：Auto Layout Guide
• 作者：Apple
• 更新：[email protected]

---

Getting Started（新手上路）

Understanding Auto Layout（理解自动布局）

自动布局（Auto Layout）基于约束，动态计算视图结构中所有视图的尺寸和位置。例如，约束一个按钮（button），使其水平对齐一张图片（image view）；且按钮上边（top）总是位于图片视图下边（bottom）下方8pt（point）的地方。图片的尺寸或位置发生变化，按钮的位置也会相应调整。

这种以约束为基础的布局方式，允许我们创造可以动态响应内外部变化的用户界面。

External Changes（外部变化）

外部变化源自父视图（superview）尺寸或形状的改变。每次变化，都需要更新视布局，以达到最佳显示效果。常见的外部变化来源如下：

• 用户缩放窗口（window）（OS X）。
• 在iPad上，用户进入或离开分屏视图（Split View）（iOS）。
• 设备旋转（iOS）。
• 通话或录音时，屏幕上方指示条的出现和消失（iOS）。
• 适配不同尺寸类别（size class）。
• 适配不同屏幕尺寸。

上述改变大多发生在运行时，要求app能够动态响应。剩下的，例如适配不同屏幕尺寸，意味着app需要主动适应不同的显示环境。自适应界面可以确保app在iPhone 4S，iPhone 6 Plus甚至iPad上显示正常，即使屏幕大小不会在运行时改变。此外，自动布局也是iPad上支持滑动和分屏视图的关键所在。

Internal Changes（内部变化）

内部变化源自界面改变引起的视图或控件尺寸的变化。

常见的内部变化来源如下：

• app展示的内容变化。
• app支持国际化（Internalization）。
• app支持动态字体（Dynamic Type）（iOS）。

app内容变化时，新内容所需的布局很可能与旧的不同，常见于展示文字或图片时。例如，每篇新闻长短不一，需要不断根据文本调整布局。类似的，拼图软件必须能够处理不同尺寸，不同比例的图片。

国际化是指配置app，使其能够适应不同语言，地区，文化的过程。支持国际化的app必须考虑上述因素对布局的影响，从而正确显示内容。

国际化对布局的影响主要有三点。其一，翻译后，标签（label）的内容会改变，所需的空间也会改变。例如，表达同一个意思，德语通常比英语长，而日语最短。

其二，使用同一门语言，不同地区使用不同格式表示日期和数字。虽然，相较于不同语言，这种变化不起眼，但界面仍然需要调整。

其三，改变语言不止影响文字大小，也会影响文字的阅读方向。不同语言的阅读方向。例如，英语从左至右，而阿拉伯语和希伯来语都是从右至左。总之，界面元素的排布需要和阅读方向吻合。如果使用英语时按钮位于右下角，那么使用阿拉伯语时它就应该在左下角。

最后，对于iOS app来说，如果支持动态字体，则用户可以改变app字体大小。文本元素的尺寸会因此发生变化。如果用户在运行时改变字体大小，app的布局必须响应。

Auto Layout Versus Frame-Based Layout（自动布局 vs. frame布局）

（译者：frame这个词我就不翻译了）

布局一个界面的元素的方式主要有三种。frame布局，自动缩放（auto resizing）以及自动布局。

以前，布局时，需要为视图结构中每个视图设定frame。frame定义了视图尺寸及其在父视图坐标系中的位置。

图1

为了精确，我们必须计算每个视图的frame。布局一旦发生变化，相关frame都需要重新计算。

从诸多方面看，frame布局是最为灵活和强大的，足以应对任何改变。然而，随之而来的，是我们必须手动管理所有视图的frame，结果就是即便是一个简单界面，也需要花费许多精力去设计，调试和维护。其难度会随着界面复杂度增加成倍上升。

自动缩放的出现在一定程度上减轻了我们的负担。自动缩放规定父视图的frame变化时，视图的frame如何应对。如此一来，简化了布局响应外部变化所需的工作。

然而，自动缩放支持的布局关系很有限。面对复杂界面，我们经常需要通过代码调整自动缩放掩码。此外，它仅响应外部变化，对于内部变化却无能为力。

相比之下，自动缩放仅仅是frame布局基础上的优化，自动布局却代表着一种全新的布局设计范式。frame的概念不复存在，我们要思考的，是视图之间的关系。

自动布局通过约束创建界面。约束一般代表两个视图之间的关系。自动布局根据约束计算视图的位置和尺寸。因此，界面布局可以动态响应或外部变化。

图2

通过约束定义视图行为，这背后的逻辑与面向过程以及面向对象编程大相径庭。幸运的是，掌握自动布局和掌握其他编程技能并无不同。分为两个步骤：首先我们必须理解约束所代表的逻辑，然后熟练使用相关API。在学习其他编程技能的过程中，我们不断重复上述步骤。自动布局也不例外。

接下来，本文会帮助大家逐步掌握自动布局。章节：Auto Layout Without Constraints（不使用约束的自动布局）讲解一个基于自动布局的高级抽象界面元素，其大大简化了特定场景下自动布局的使用。章节：Anatomy of a Constraint（约束详解）为理解和使用自动布局提供了理论支持。章节：Working with Constraints in Interface Builder（通过界面编辑器创建约束）讲解可视化的约束设计工具。章节： Programmatically Creating Constraints（代码创建约束）和章节：Auto Layout Cookbook（自动布局使用手册）细致解释相关API。最后，章节：Auto Layout Cookbook（自动布局使用手册）列举多个复杂程度各异的自动布局范例，以供研究和参考。而章节：Debugging Auto Layout（调试自动布局）为调试自动布局提供思路和工具。