Autolayout之指定类型尺寸的布局（Size Class）

注：本文翻译自Size-Class-Specific Layout

Interface Builder中的Storyboard默认使用了尺寸类型（以下写作Size Class）。所有的Size Class都会被赋值给UI元素，如场景和视图等。他们给元素的尺寸提供了一个粗略定义。Interface Builder可以让你基于当前Size Class自定义许多布局特性。布局便可以自动适应Size Class的改变。特别的是，你可以在每一个Size Class下设置如下特性：

• 加载（install）或卸载（uninstall）一个视图或控件。
• 安装或卸载一个约束。
• 设置选中的属性值（如字体或布局边距设置）。

当系统读取了一个场景对象（scene），它便初始化了所有的视图、控件和约束，并且把这些对象赋值给相应的插口（outlet）上（如果存在）。你可以通过outlet访问任意对象而不必考虑场景当前的Size Class。可是，这些对象只有在当前Size Class中设为为“已加载”（installed）的情况下，系统才会将它们添加到视图层级当中。

当视图的Size Class改变时（如当你旋转iPhone或在iPad上切换全屏和分隔屏模式时），系统会自动将所需的对象从视图层级上添加或移除。系统还会将视图布局的改变动态的表现出来。

说明

系统会保持着“已卸载”（uninstalled）对象的关联关系，因此从视图层级中移除后，这些对象不会被释放。

“最终Size Class”和“基础Size Class”

Interface Builder区分了九中不同的Size Class。

其中的四种是“最终Size Class”：Compact-Compact、Compact-Regular、Regular-Compact和Regular-Regular。这些“最终”类型代表了设备显示的实际尺寸。

剩下的五种是“基础Size Class”：Compact-Any、Regular-Any、Any-Compact、Any-Regular和Any-Any。抽象的尺寸类型，他们代表了能同时代表两种或更多种类的“最终Size Class”。例如，在Compact-Any的Size Class中，“已安装”的对象会同时出现在Compact-Compact和Compact-Regular尺寸的视图中。

指定Size Class中的设置项总是会覆盖掉通用Size Class中的内容。此外，你必须为九种Size Class提供出无歧义并满足条件的布局。因此，从通用的Size Class到指定的Size Class进行设置是非常容易的。为你的app选择好默认布局，并在Any-Any的Size Class中设置好布局。之后只要根据需要修改其他的”基础“或”最终“Size Class即可。

使用Size Class工具

（注意：本节对应Xcode8）

使用Interface Builder中的Size Class工具，选择你当前编辑中的Size Class。此工具显示在编辑窗口的底部中心位置。默认来说，Interface Builder会将Any-Any作为初始选项。

img

要切换至一个新的Size Class，点击Size Class工具。Interface Builder会弹出一个3 x 3的网格视图。从网格中拖动鼠标来切换Size Class。网格会在顶部显示所选Size Class的名称并在底部显示出描述信息（包含它影响的设备和朝向等）。它还会在被当前Size Class的设置所影响的每一个Size Class中显示出一个绿点。

img

添加到画布中的所有视图和约束都只会在当前Size Class中被加载。当在移除这些对象时，其删除行为会根据原先加载的位置和方式有所不同。

• 在画布中或是在整个项目的目录列表中删除一个对象，则会直接删除它。
• 在画布中或是在文档缩略图中，使用Command-Delete删除一个对象，系统只会从当前Size Class中卸载它。
• 当一个场景对象包含多个Size Class时，除了在画布或目录列表以外，在任何地方删除对象（如，从尺寸检查器中选择并删除约束），只会将其从当前Size Class中卸载掉。
• 如果你只编辑了Any-Any的Size Class，那么删除一个对象就是从项目中直接移除了。

如果你编辑的是除了Any-Any以外的其他Size Class，Interface Builder会将编辑窗口底部的工具栏高亮显示为蓝色。这会使你在指定Size Class下工作时区别更加明显。

使用检查器

你还可以在检查器中修改指定Size Class的设置。所有支持指定Size Class的设置项都会在检查器中显示为一个带有”＋“号的选项。

img

默认来说，检查器中的值都是在Any-Any的Size Class下设置的。要为指定的Size Class设置不同的值，点击”+“号来新建一个Size Class。同时为这个Size Class选择宽度和高度。

img

检查器现在用单独的一行显示了每一个Size Class----Any-Any设置在最顶端，其他的Size Class在下面列出。你可以单独编辑每一行的值。

img

要删除一个自定义Size Class，直接单击每行开头的”x“号即可。

要了解关于在Interface Builder中使用Size Class的更多信息，请查看Size Class设计帮助。