iOS 6编程Interface Builder自动布局功能

Interface Builder自动布局功能

为了帮助基于约束来实现自动布局,Interface Builder增加了大量的功能,下面将阐述这些新功能。

自动化约束

从前一个范例中,我们知道在视图布局设计过程中,Interface Builder自动给子视图设置了约束。另外,需要知道Interface Builder自动添加的约束和开发人员手工添加的约束是有区别的。手动添加的约束认为是用户约束(user constraints)。Interface Builder 自动添加的约束首先需要调整为user constraints,然后才能删除。user constaints也可以配置为标准间距(standard spacing)。这些在后面的教程中会具体演示。

子视图在布局上的定位操作,也是指示Interface Builder 配置相应的约束。如在父视图中移动按钮视图到水平中心位置,将出现中心指示线,将按钮放置在此处,将自动创建一个水平中心的约束(center constraint)。移动按钮视图到父视图的边缘位置,将出现边界指示线(margin guideline),如下图所示。如果放置在此处,Interface Builder 将创建一个约束,使用Apple建议的标准间隔距离(standard spacing distance)来固定按钮视图底部和父视图底部之间的间隔。

如果一个视图移动接近另外一个视图的边缘时,垂直指示线也会出现,相同标准设置的约束也会创建。下图是Save按钮接近Cancel按钮时,垂直指示线出现在Save按钮的右侧边缘。

可视化提示

Interface Builder在布局画布中包含了一些可视化提示,突出显示当前视图上配置的约束。当在Interface Builder布局画布中选择一个视图时,该视图相关的约束将可视化显示。例如,在AutoLayout范例程序中,当我们选择画布中的按钮时,一些额外的线条会显示,如下所示:

穿过按钮中心位置的垂直线条表示设置了按钮视图在父视图水平中心位置的约束(类似于NSLayoutAttributeCenterX 属性)。如果用一个等式描述,可以理解为:
label.NSLayoutAttributeCenterX = superview.NSLayoutAttributeCenterX

按钮下面的I线条,从按钮视图的底部到父视图的底部,表示在2个视图之间设置了一个垂直间隔约束,线条上没有额外的可视化信息,表示这是一个等式约束(equality constraint)。下图显示2个按钮视图之间设置了一个大于等于的水平间距约束:

在按钮视图中的文本下面的水平线表示设置了2个按钮之间水平对齐文本基线(content baseline)的约束(可用NSLayoutAttributeBaseline表示)。另外,我们注意到水平间距约束线条比水平对齐线条要更粗一些,比较粗的线条表示这是一个用户约束(user constraint),比较细的线条表示是Interface Builder 自动添加的约束。
宽度约束显示为和视图平行放置的I线条。如下图文本视图对象,设置了大于等于的宽度约束。

查看和编辑约束

所有对视图设置的约束都显示在文档大纲面板中。当视图层次中有多个视图容器时,每一个视图容器(container view)都将有一个单独的约束列表。例如,下图显示了包含2个按钮的用户界面的约束列表:

当在列表中选择任何一个约束时,相应地在布局画布中将显示对应的可视化提示。
可以使用多种方法来显示和编辑特定的约束,其中一种方法是从布局画布(layout canvas)或者文档大纲面板中一个约束,然后在Attributes  Inspector面板查看和编辑约束的属性。下图显示了等式间距约束的设置。

在上图中,我们可以修改Relation、Constant、Direction和Priority等等约束的属性值。可以选择Standard复选框,就可以设置间距为Apple推荐的标准间距。
通过在布局画布选择一个特定视图,在Size Inspector面板中将显示该视图相关的约束列表。如下图所示,列出了当前选择视图的4个相关的约束。点击人一个约束的设置图标,将显示编辑或者删除约束的选项。如果约束类型不是用户约束(user constraint),则需要首先选择Promote to User Constraint 选项,然后Delete 选项才可以使用。

除了这些约束外,还有Content Hugging Priority和Content Compression Resistance Priority 属性值也显示在这里。以一个按钮视图为例,可以水平扩展(水平hugging为低优先级),但是不能垂直增长(设置vertical hugging为高优先级)。相似地,按钮文本内容不应该压缩或者省略一部分,因此Content Compression Resistance Priority 的水平和垂直参数都应该设置为比较高优先级。一般而言,我们不必经常调整Interface Builder添加的这些默认设置。

在Interface Builder中创建新的约束

在Interface Builder中有多种方法创建新的用户约束(user constraints),需要记住,约束可以一次关联多个视图。

针对单一视图添加约束(如宽度约束)的一种方法是,在布局画布中选择该视图,然后选择Xcode的Editor > Pin 菜单。Pin 菜单提供了当前选择视图的可用约束列表,如宽度、高度和连接到父视图的所有边界等等。

Editor 菜单也可用来设置多个视图的约束。选择多个视图,然后选择Editor > Pin菜单设置约束。此时设置的约束将应用到所有选择的视图上。

当选择多个视图时,Editor > Align 菜单也可用来对齐选择的视图,如左边界、右边界,baseline等等。
除了使用Editor 菜单之外,还可用快速Interface Builder右下角的迷你工具条,如下图所示:

本节通过一个非常简单的范例,演示了在iOS 6 用户界面设计过程中,使用自动布局所带来的好处。后面,我们还会深入介绍Interface Builder所提供的自动布局的功能。

针对iOS 6 用户界面设计过程中,自动布局(Auto Layout)的更多功能,在新版《一步一步学习iOS 6 编程》有更多详细的介绍。

原文地址:https://www.cnblogs.com/tuncaysanli/p/2727973.html