Auto Layout的使用

这是关于自动布局的第一篇文章。
>> Stack View的使用

自动布局(Auto Layout)能够根据对视图的约束(Constraint)，动态地计算视图层次结构中所有视图的大小和位置。

基于约束的Auto Layout使我们能够搭建动态响应内部、外部变化的用户界面。外部变化包括用户改变窗口大小（OS X）、旋转设备（iOS）、在iPad上进入或离开分割视图（iOS）、不同屏幕尺寸，内部变化包括app显示内容长度变化、字体大小变化、对国际化的支持等。

大部分的外部变化会在运行时发生，这就要求app要动态的调整视图布局。尽管屏幕尺寸不会改变，但创建一个自动布局的界面就可以适用于iPhone SE、iPhone 7 Plus、甚至iPad不同尺寸屏幕的设备。

当用户界面中视图或控件大小变化时会导致内部变化。如对国际化的支持，把用户界面上的文字改变为其他语言时，新的语言可能占用不同大小空间；不同的语言有不同布局方向，如英语、中文都是自左向右，而阿拉伯语自右向左，这时中、英文界面右下角的按钮在阿拉伯语中应在左下角。如app支持调整字体大小，调整后用户界面中任何文本的高度和宽度都会发生变化，此时需要调整布局。

1. Auto Layout与Frame-Based Layout比较

布局用户界面方式有三种，第一种是代码方式，第二种是使用Autoresizing masks，第三种是使用Auto Layout。

通过代码方式来布局用户界面时需要设定视图在其父视图坐标系中的位置和大小。

为布局界面，你必须计算视图层级中每一个视图的位置和大小。如果其中一个发生了改变，你就需要再次计算所有受影响的视图。在许多方面，以代码方式构建的界面会更灵活、更强大。当界面有变化时，你可以操作其它视图的变化。也正因为你需要控制其它视图的变化，构建一个简单的界面可能需要大量工作，构建一个自适应的界面就变的更加困难。

第二种方式是使用Autoresizing masks来构建界面，Autoresizing masks指定视图如何随父视图的变化而改变，这简化了适应外部变化布局的复杂度。Autoresizing masks用于较小数量的可能布局，对于复杂的用户界面，需要结合使用代码布局。另外，Autoresizing masks只适用于外部变化，不响应内部变化。

第三种方式为使用Auto Layout添加一系列约束来构建界面，这些约束代表两个视图间的关系，最后Auto Layout根据这些约束计算出视图的位置和大小。Auto Layout动态的响应内部、外部变化。

视图层次结构布局被定义为一系列线性方程。每个约束表示一个方程。目标是声明一系列方程，最后只有一个可能的布局方案。下图是一个示例方程。

这个约束表示Red视图的Leading必须在Blue视图Trailing后8points，该方程由以下几部分组成：

• Item 1：方程式中的第一项，这里指Red视图。第一项必须是视图或布局参考线（Layout Guide）。
• Attribute 1：在Item 1添加约束的位置。在这里是Red视图的Leading。
• Relationship：左右两侧的关系，可以是equal、greater than or equal和less than or equal之一。在这里左右两侧相等。
• Multiplier：第二项的值乘以该浮点值。在这里，乘数是1.0。
• Item 2：方程式中的第二项，在这里是Blue视图。与第一项不同，这一项可以为空。
• Attribute 2：在Item 2添加约束的位置。在这里是Blue视图的Trailing。如果Item 2为空，这里也要为空。
• Constant：浮点类型的常量。在这里是8.0，该值被添加到Attribute 2。

通过创建这样的方程可以创建多种约束，可以定义两个视图间的距离，对齐视图、定义两个视图大小关系、