AutoLayout约束设置实践与运用

约束指定了视图中的一个视图或多个视图之间的关系。比如一个UILabel距离父视图左边8个像素点，距离父视图顶部8个像素点，距离父视图右边8个像素点，这三个关系就是约束。

每个视图的对齐矩形有20个有效的布局属性，但是并不需要在设置约束时都赋值一遍。一般在X轴和Y轴方向各有两个有效约束就可以让系统自己计算其他的布局属性值。

如果设置完约束之后，还不能确定对齐矩形的大小和位置时，Auto Layout就会报错。如果发生在应用程序运行时，那么界面将不会按预期来展示；如果发生在Storyboard开发时，则会有红点提示，如图10.3.1所示：

图10.3.1　缺少约束的AutoLayout告警

创建一个AutoLayoutPractise项目，进行一些自动布局的尝试。先从Object Library中拖出一个UILabel、一个UIButton和一个UIView，并且通过Attributes Inspector对控件的属性进行设置。如图10.3.2所示：

图10.3.2　自动布局实践的控件

此时用鼠标右键点住“文字1”一直拖动到它的父视图上，如图10.3.3所示：

图10.3.3　设置“文字1”与父视图的约束

放开鼠标右键后将弹出图10.3.4中所示的弹窗，Xcode已经帮助开发者过滤掉那些不能设置的布局属性了。本例中设置“Leading Space to Container”和“Vertical Spacing to Top Layout Guide”，分别用于设置“文字1”与父视图左边和顶部的距离，都设置为10。

值在Size Inspector中可以设置为图10.3.5所示的值。

(www.xing528.com)

图10.3.4　设置父子视图约束的弹窗

图10.3.5　Size Inspector设置约束值

接着设置“按钮2”与“文字1”之间的约束，如图10.3.6弹窗所示。本例中使用“Horizontal Spacing”和“Center Vertically”，分别设置为10和0。

图10.3.6　设置兄弟视图约束的弹窗

最后设置UIView的位置。首先和父视图的Leading距离为10，然后和“文字1”保持水平间距是10；接着设置自己的宽、高约束为50、50，用鼠标右键拖动UIView并在自己身上放开（如图10.3.7所示），选择Width和Height，在Size Inspector中设置值。

运行模拟器，最终结果如图10.3.8所示：

图10.3.7　自身约束的弹窗

图10.3.8　添加了约束的运行结果

三个控件按约束的设置展示在了界面上。此处需要读者注意的是，尽量使用Storyboard进行自动布局的开发，Xcode会帮助我们检查最基本的约束设置是否有冲突或者是否能够满足布局的计算。