采用自动布局(Auto Layout)
Auto Layout是一个强大的布局引擎,它帮助你设计自适应的布局,用以动态的应对任何屏幕尺寸的改变。你使用约束(constraints)来描述布局。约束是用来解释一个元素相对于其他元素的位置,以及这个元素自身的尺寸。Auto Layout根据约束来动态的计算每个元素的尺寸和位置。
定义布局的一种方便方法是使用栈视图(UIStackView)。栈视图提供一种简化的界面,用于在列和行上布局视图集合。栈视图使用钩子(hook)下的Auto Layout来计算它管理的所有视图的尺寸和位置。这使你可以轻松访问Auto Layout的全部功能,同时大大降低布局的复杂性。
想要采用Auto Layout,把界面中已存在的元素包裹到一个栈视图中,然后添加必要的约束来确定栈视图在场景中的位置。
给菜品场景添加Auto Laout约束
-
点击Standard editor按钮回到标准编辑器。
通过点击Navigator和Utilities按钮,展开project navigator和utility area。
-
按住Shift键,并选择text field、label、以及button。
-
在画布的右下,点击Embed In Stack(嵌入栈)按钮。(或者,选择Editor > Embed in > Stack View。)
Xcode 把用户界面元素包裹在一个栈视图中,把它们堆在一起。Xcode分析现有的布局,确定这些元素应该垂直而不是水平堆放。
-
如有必要,打开大纲视图。选择Stack View对象。
-
在Attributes检查器中,在Spacing字段键入8。按下回车键。
你将注意到用户界面元素之间的垂直距离变大,并且栈视图也随之变大。
-
在画布底部的右侧,打开Add New Constraints(添加新约束)菜单。
- 在上面的“Spacing to nearest neighbor”(相邻的最近空间),点击两个水平约束和上面的垂直约束来选中它们。
当它们选中的时候会变成红色。
这些约束表示了与最近相邻的 前导、尾部、以及顶部之间的间隔。在这个上下文中,最近相邻这个术语的意思是最接近用户界面元素的边界,这个元素可以是superview,也可以是其他用户界面元素,也可以是边缘(一般是指引导线)。因为“Constrain to margins”(约束到边缘)复选框被选中,本例中的栈视图将约束到超视图(superview)的左右边缘。这提供了栈视图和场景边缘之间的空间。
另一方面,栈顶部与场景顶部布局引导线是相对约束关系。如果状态条可见,则所有的顶部布局引导线都在状态条之下。如果没有,则它在场景顶部之下。所以,你需要在栈视图和布局引导线之间增加一点空间。 - 在左右的框中填入0,在顶部的框中填入20。
-
在Update Frame旁边的弹出菜单中,选择Item of New Constraints。
这将导致Interface Builder在创建约束是自动更新受影响视图的框架(frame)。Add New Constraints 菜单看上去是这样的:
-
在Add New Constraints菜单中,点击 Add 3 Constraints按钮。
菜品场景用户界面看上去会是如此:
注意现在text field仍然没有扩展到场景的边缘。添加约束来修改它。
让text field的宽度适应栈视图
- 在storyboard中,选中菜品场景中的text field。
-
在画布底部的右侧,再次打开Add New Constraints菜单。
- 在上面的“Spacing to nearest neighbor”(相邻的最近空间),点击右侧水平约束来选中它们。当选中时,它变成红色。
- 在右边的框中填入0。
-
在Update Frame旁边的弹出菜单中,选择Item of New Constraints。
Add New Constraints 菜单看上去是这样的:
-
在Add New Constraints菜单中,点击 Add 1 Constraints按钮。
菜品场景用户界面看上去会是如此:
检查点:在iOS模拟器中运行应用。
通过选择Hardware > Rotate Left 和 Hardware > Rotate Right (或者 Command-Left Arrow 和 Command-Right Arrow)来旋转模拟器。注意text field如何随着设备的方向和屏幕尺寸的改变而变长和缩短。同时也注意一下状态栏在风景方向的时候会消失。
点击text field的内部,使用屏幕键盘输入文本(如果愿意,也可以通过选择Hardware > Keyboard > Connect Hardware Keyboard来使用电脑键盘)。
检查Auto Layout
如果你没有得到你想要的行为,使用自动布局调试功能来帮助你。可以使用Update Frames按钮和Resolve Auto Layout Issues(解析自动布局)菜单来访问这些功能。
如果收到错放视图的警告,使用Update Frames按钮。这个按钮更新选中的视图及其所有子视图的frame。选择场景视图控制器来更新场景中的所有视图。你也可以通过按住Option再点击Update Frame按钮来仅更新选中的视图。
如果布局没有按照你的期望行为,点击Resolve Auto Layout Issues按钮来打开一个调试命令菜单。这个菜单中的命令有两种形式。
一种影响当前选中的视图。另一种影响所有在视图控制器中的视图。如果所有的命令都变灰,选择场景的视图控制器或者其中一个视图然后再重新打开菜单。
选择Reset to Suggested Constraints(重置为建议的约束)让Xcode使用一些列可用的约束来更新你的界面。选择Clear Constraints(清空约束)来移除用户界面中的所有约束,然后根据前面的介绍来重新设置约束。
总结
在本课中,你熟悉了Xcode 项目的内容,并使用其中的一些工具来设计和运行了iOS 应用。你还构建了一个简单的用户界面。
虽然这个项目的场景还没有完成,但是基本的用户界面已经有了。确保你的布局从一开始就健壮且可扩展,这样就有了一个坚实的基础。
注意
要想看本课完整的例子项目,下载这个文件并在Xcode中查看。
Download File
(构建基础UI结束。明天是新的一章。)