Start Developing iOS Apps (Swift)->构建基础UI（三）

采用自动布局（Auto Layout）

Auto Layout是一个强大的布局引擎，它帮助你设计自适应的布局，用以动态的应对任何屏幕尺寸的改变。你使用约束（constraints）来描述布局。约束是用来解释一个元素相对于其他元素的位置，以及这个元素自身的尺寸。Auto Layout根据约束来动态的计算每个元素的尺寸和位置。

定义布局的一种方便方法是使用栈视图（UIStackView）。栈视图提供一种简化的界面，用于在列和行上布局视图集合。栈视图使用钩子（hook）下的Auto Layout来计算它管理的所有视图的尺寸和位置。这使你可以轻松访问Auto Layout的全部功能，同时大大降低布局的复杂性。

想要采用Auto Layout，把界面中已存在的元素包裹到一个栈视图中，然后添加必要的约束来确定栈视图在场景中的位置。

给菜品场景添加Auto Laout约束

1. 点击Standard editor按钮回到标准编辑器。

   
   
   

   standard_toggle_2x.png
   
   

   通过点击Navigator和Utilities按钮，展开project navigator和utility area。

2. 按住Shift键，并选择text field、label、以及button。

   
   
   

   BBUI_AL_shift_select_2x.png

3. 在画布的右下，点击Embed In Stack（嵌入栈）按钮。（或者，选择Editor > Embed in > Stack View。）

   
   
   

   BBUI_AL_stackmenu_2x.png
   
   

   Xcode 把用户界面元素包裹在一个栈视图中，把它们堆在一起。Xcode分析现有的布局，确定这些元素应该垂直而不是水平堆放。

   
   
   

   BBUI_AL_stack_2x.png

4. 如有必要，打开大纲视图。选择Stack View对象。

   
   
   

   BBUI_AL_outlineview_2x.png

5. 在Attributes检查器中，在Spacing字段键入8。按下回车键。
   你将注意到用户界面元素之间的垂直距离变大，并且栈视图也随之变大。

   
   
   

   BBUI_AL_stackspaced_2x.png

6. 在画布底部的右侧，打开Add New Constraints（添加新约束）菜单。

   
   
   

   BBUI_AL_pinmenu_2x.png
7. 在上面的“Spacing to nearest neighbor”（相邻的最近空间），点击两个水平约束和上面的垂直约束来选中它们。
   当它们选中的时候会变成红色。
   这些约束表示了与最近相邻的 前导、尾部、以及顶部之间的间隔。在这个上下文中，最近相邻这个术语的意思是最接近用户界面元素的边界，这个元素可以是superview，也可以是其他用户界面元素，也可以是边缘（一般是指引导线）。因为“Constrain to margins”(约束到边缘)复选框被选中，本例中的栈视图将约束到超视图（superview）的左右边缘。这提供了栈视图和场景边缘之间的空间。
   另一方面，栈顶部与场景顶部布局引导线是相对约束关系。如果状态条可见，则所有的顶部布局引导线都在状态条之下。如果没有，则它在场景顶部之下。所以，你需要在栈视图和布局引导线之间增加一点空间。
8. 在左右的框中填入0，在顶部的框中填入20。

9. 在Update Frame旁边的弹出菜单中，选择Item of New Constraints。
   这将导致Interface Builder在创建约束是自动更新受影响视图的框架（frame）。Add New Constraints 菜单看上去是这样的：

   
   
   

   BBUI_AL_stackconstraints_2x.png

10. 在Add New Constraints菜单中，点击 Add 3 Constraints按钮。
    菜品场景用户界面看上去会是如此：

    
    
    

    BBUI_AL_stackfinal_2x.png
    
    

    注意现在text field仍然没有扩展到场景的边缘。添加约束来修改它。

让text field的宽度适应栈视图

1. 在storyboard中，选中菜品场景中的text field。

2. 在画布底部的右侧，再次打开Add New Constraints菜单。

   
   
   

   AL_pinmenu_2x.png
3. 在上面的“Spacing to nearest neighbor”（相邻的最近空间），点击右侧水平约束来选中它们。当选中时，它变成红色。
4. 在右边的框中填入0。

5. 在Update Frame旁边的弹出菜单中，选择Item of New Constraints。
   Add New Constraints 菜单看上去是这样的：

   
   
   

   BBUI_AL_textfieldconstraint_2x.png

6. 在Add New Constraints菜单中，点击 Add 1 Constraints按钮。
   菜品场景用户界面看上去会是如此：

   
   
   

   BBUI_AL_textfieldfinal_2x.png

检查点：在iOS模拟器中运行应用。
通过选择Hardware > Rotate Left 和 Hardware > Rotate Right (或者 Command-Left Arrow 和 Command-Right Arrow)来旋转模拟器。注意text field如何随着设备的方向和屏幕尺寸的改变而变长和缩短。同时也注意一下状态栏在风景方向的时候会消失。

点击text field的内部，使用屏幕键盘输入文本（如果愿意，也可以通过选择Hardware > Keyboard > Connect Hardware Keyboard来使用电脑键盘）。

BBUI_sim_finalUI_2x.png

检查Auto Layout

如果你没有得到你想要的行为，使用自动布局调试功能来帮助你。可以使用Update Frames按钮和Resolve Auto Layout Issues（解析自动布局）菜单来访问这些功能。

BBUI_AL_resolvemenu_2x.png

如果收到错放视图的警告，使用Update Frames按钮。这个按钮更新选中的视图及其所有子视图的frame。选择场景视图控制器来更新场景中的所有视图。你也可以通过按住Option再点击Update Frame按钮来仅更新选中的视图。

如果布局没有按照你的期望行为，点击Resolve Auto Layout Issues按钮来打开一个调试命令菜单。这个菜单中的命令有两种形式。

一种影响当前选中的视图。另一种影响所有在视图控制器中的视图。如果所有的命令都变灰，选择场景的视图控制器或者其中一个视图然后再重新打开菜单。

选择Reset to Suggested Constraints(重置为建议的约束)让Xcode使用一些列可用的约束来更新你的界面。选择Clear Constraints（清空约束）来移除用户界面中的所有约束，然后根据前面的介绍来重新设置约束。

BBUI_AL_resolvemenu_small_2x.png

总结

在本课中，你熟悉了Xcode 项目的内容，并使用其中的一些工具来设计和运行了iOS 应用。你还构建了一个简单的用户界面。

虽然这个项目的场景还没有完成，但是基本的用户界面已经有了。确保你的布局从一开始就健壮且可扩展，这样就有了一个坚实的基础。

注意

要想看本课完整的例子项目，下载这个文件并在Xcode中查看。
Download File

（构建基础UI结束。明天是新的一章。）