注:本文翻译自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设计帮助。
网友评论