【热点盘点】iOS 8增强的自动布局功能

自动布局是iOS6开始引进的新功能，而iOS 8则在原有自动布局的基础上增加了SizeClass的概念，从而增强了自动布局功能。

自动布局的总体思路归纳起来就是四个字：相对布局。

iOS App的界面都是由一个个UI控件所组成的，这些UI控件之间要么是父子关系，要么是兄弟关系，整个App界面UI控件关系总是如下图所示。

图中②、③、④号控件之间是兄弟关系，它们都是①号控件的子节点；而⑤、⑥、⑦号控件之间也是兄弟关系，它们都是④号控件的子节点。

自动布局则充分利用了UI控件之间的父子关系、兄弟关系，自动布局可控制子节点控件的左边界、右边界、上边界、下边界与父容器的左边界、右边界、上边界、下边界对齐或保持指定距离，与此同时，还可设置子节点控件的宽度占父容器宽度多大比例，子节点控件的高度占父容器高度多大比例；对于兄弟关系的UI控件而言，自动布局可控制兄弟UI控件的左边界、右边界、上边界、下边界对齐，也可控制兄弟UI控件之间的高度比例、宽度比例，还可控制它们之间的间距……通过这种相对关系的管理，iOSApp就可以在运行时自动计算各UI控件的大小和位置。

为UI控件添加自动布局的约束可通过如下三种方式。

第一种：通过Xcode中Editor菜单的Align、Resolve Auto Layout Issues或Pin子菜单添加。使用Interface Builder打开Storyboard界面设计文件时才会看到这些菜单项。

第二种：通过Interface Builder右下角的按钮来添加约束。使用Interface Builder打开界面设计文件之后，在右下角可以看到有几个按钮。

单击第一个按钮即可弹出图中的浮动框，该浮动框与Align子菜单包含的菜单项完全一样，只是通过该按钮可以同时添加多个约束。

一般来说，开发者在添加约束时先不要更新任何UI控件的大小和位置，避免系统更新UI控件的大小和位置时把它们压缩到完全看不见—等到所有约束都添加完成之后，再通过ResolveAuto Layout Issues子菜单的Update Frames来更新UI控件的大小和位置即可。

点击InterfaceBuilder右下角的第二个按钮，打开的浮动框与Pin子菜单包含的菜单项完全一样，只是可以同时添加多个约束。

浮动框上面有4个虚线表示间距的符号，开发者只要点击该虚线符号，该虚线就会变成实线，然后填写相应的数值即可添加约束。

InterfaceBuilder右下角的第三个按钮对应的浮动框与Resolve Auto Layout Issues子菜单包含的菜单项完全一样。

第三种：在InterfaceBuilder中通过快捷方式添加。这种方式通常用于添加两个UI控件之间的相对布局关系。

在按住键盘上control键的同时，在Interface Builder中从一个UI控件拖向另一个具有兄弟关系的UI控件即可看到蓝线。

松开鼠标即可看到弹出菜单。

由于在界面上拖出的蓝线为斜线，因此弹出菜单既可设置两个UI控件在水平方向上的相对布局关系，也可设置在垂直方向上的相对布局关系。如果在界面上拖出的蓝线为垂直竖线，那么Xcode将弹出如下图所示的菜单。

可以看出，如果在两个具有兄弟关系的UI控件之间拖出蓝色的竖线，那么Xcode弹出的菜单将只能设置这两个UI控件在垂直方向上的约束关系。

如果拖出的蓝线为水平横线，那么Xcode将弹出如下所示菜单。

可以看出，如果在两个具有兄弟关系的UI控件之间拖出蓝色的水平横线，那么Xcode弹出的菜单将只能设置这两个UI控件在水平方向上的约束关系。

在按住键盘上control键的同时，在Interface Builder中从一个UI控件向另一个作为父容器的UI控件拖出一条蓝色的斜线，松开鼠标即可看到如下图所示的弹出菜单。

在按住键盘上control键的同时，在Interface Builder中从一个作为父容器的UI控件向它内部的子UI控件拖出一条蓝色的斜线，松开鼠标即可看到如下图所示的弹出菜单。

提示：如果在两个具有父子关系的UI控件之间拖出垂直的蓝线，那么Xcode弹出的菜单将只能设置两个UI控件在垂直方向上的布局约束；如果在两个具有父子关系的UI控件之间拖出水平的蓝线，那么Xcode弹出的菜单将只能设置两个UI控件在水平方向上的布局约束。

对于初学者而言，使用自动布局常犯的两类错误是约束不足（约束太少）和约束冲突（约束太多），如果界面设计者给出的约束只能确定某个UI控件的大小（或大小的某一项）或位置（或位置中的某一项），此时就会出现约束不足的情况，InterfaceBuilder将会在Dock栏的右上角以黄色警告提醒用户；如果界面设计者给出了两个甚至多个互相矛盾的大小、位置约束，就产生了布局错误，在编译时就会提示错误。

如果为自动布局添加的约束出现约束不足，则可通过Editor菜单的Resolve Auto Layout Issues子菜单的Add Missing Constrainter菜单项进行修复；但如果为自动布局添加的约束出现约束冲突时，则需要开发者仔细检查，并修复它们。

对于初始使用自动布局的开发者来说，难点就是理顺界面上各UI控件之间的相对关系：各UI控件的相对大小、相对位置，一旦理顺了这些关系，接下来按上面介绍的方式添加约束即可。

本文摘自《疯狂iOS讲义（上）（第2版）——Objective-C2.0与iPhoneiPad应用开发基础》