美文网首页
Autolayout之指定类型尺寸的布局(Size Class)

Autolayout之指定类型尺寸的布局(Size Class)

作者: 我才是臭吉吉 | 来源:发表于2019-03-01 15:34 被阅读0次

    注:本文翻译自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-CompactCompact-RegularRegular-CompactRegular-Regular。这些“最终”类型代表了设备显示的实际尺寸。

    剩下的五种是“基础Size Class”:Compact-AnyRegular-AnyAny-CompactAny-RegularAny-Any。抽象的尺寸类型,他们代表了能同时代表两种或更多种类的“最终Size Class”。例如,在Compact-Any的Size Class中,“已安装”的对象会同时出现在Compact-CompactCompact-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设计帮助。

    相关文章

      网友评论

          本文标题:Autolayout之指定类型尺寸的布局(Size Class)

          本文链接:https://www.haomeiwen.com/subject/eyiduqtx.html