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

打开Storyboard

你已准备好为应用制作storyboard。Storyboard 是用户界面的可视化描述，展示有内容的屏幕和屏幕之间的转换。使用storyboard来编排驱动应用的流程或故事。当构建时你确切的看到你构建的是什么，立刻得到什么工作、什么不工作的反馈，并立即显示对用户界面的更改。

要打开storyboard

• 在project navigator中，选择Main.storyboard。Xcode在Interface Builder中打开 storyboard，它是可视化界面编辑。它在编辑区域中显示。Storyboard 的背景是画布。画布是用来添加和布置用户界面元素的。

Storybook 看上去像这个样子：

BBUI_storyboard_empty_2x.png

现在，你的storyboard上只有一个场景，它显示应用的一个屏幕内容。场景左侧显示在画布上的箭头表示storyboard的入口，它意味着程序启动的时候这个场景会被加载。现在，你在画布上看到的这个场景包含一个被视图控制器管理的单一视图。很快你将学习到更多关于视图和视图控制器的规则。

当你在iPhone 7模拟器上运行你的应用时，这个场景上的视图就是你在设备屏幕上看到的视图。但是画布上的场景不一定和模拟器屏幕的尺寸一样。你可以在画布的底部选择屏幕的尺寸和方向。在这种情况下，画布要被设置为iPhone 7 的肖像方向，因为它和模拟器是一样的。

即使画布显示特定的设备和方向，但创建一个自适应的界面非常重要，一个可以自动适应的界面可以在任何设备任何方向上都会表现良好。当你开发界面时，可以改变画布的视图，看一看界面如何适应不同尺寸的屏幕。

构建基础UI

是时候要构建基础界面了。你将为场景开始使用用户界面，向你的餐饮跟踪应用，FoodTracker，添加新餐。

Xcode提供一个对象库，这些对象可以被添加到storyboard文件中。它们中的一部分是可以添加到用户界面上的元素，例如按钮（buttons）和文本字段（text fields）。
另外部分，例如视图控制器和手势识别器，定义了应用的行为，但是不会显示在屏幕上。

在用户界面上显示的元素被称为视图。视图向用户呈现内容。它们是构建用户界面，并且以清晰、优雅、和有用的方式呈现内容的组件。视图有多种多样有用的内建行为，包括把自己显示在屏幕上，以及对用户的输入作出响应。

iOS 中的所有视图对象都是UIView及其子类类型的。很多UIView子类在表现和行为上都是高度定制化的。首先添加一个text filed（UITextFile）， 一个UIView的子类，到你的场景中。Text field允许你输入一样文本，这个文本用来命名餐名。

添加text field到场景中

1. 选择 Editor > Canvas，确保Show Bounds Rectangle被选中。
   这个设置使Interface Builder给画布中所有的视图绘制了蓝色的边框。很多视图和控制器有着透明的背景，很难看出它们的实际尺寸。当系统调整尺寸的时候，布局会发生错误，这会导致视图比你预期的要大或者小。启用这个设置会帮助你准确的理解在视图层级结构中都发生了什么。

2. 打开对象库。
   对象库位于Xcode右侧实用工具区的下部。如果你没有看到，在选择条上选择左起第三个按钮。（或者选择，View > Utilities > Show Object Library。）

   
   
   

   object_library_2x.png
   
   

   列表显示了每个对象的名字、描述、以及可视化表示。

3. 在对象库中，在过滤字段中输入text field可以快速找到Text Field对象。

4. 从对象库中拖拽一个Text Field对象到你的场景。

   
   
   

   BBUI_textfield_drag_2x.png
   
   

   如有必要，通过 Editor > Canvas > Zoom 来缩放。

5. 拖拽text field到屏幕的上半部，并和屏幕左缘对齐。
   当你看到基本和下图一样时停止拖拽：

   
   
   

   BBUI_textfield_place_2x.png
   
   

   蓝色的布局引导线帮助你定位text field。布局引导线只有在你拖拽或者调整对象大小靠近它们时才会显示；当你放开text filed时它们就消失了。

6. 如有必要，点击text field来显示调整大小的句柄。
   你通过拖拽用户界面元素的调整大小句柄来调整它的大小，它们是出现在元素边线上的小的白色正方形。通过选择元素来显示这些句柄。当前，这个text field已经被选择了，因为我们刚刚停止停止拖拽它。如果看到text filed像下图一样，那你就已经准备好调整它的大小了；如果没有，那就在画布上选中它。

   
   
   

   BBUI_textfield_resizehandles_2x.png

7. 调整text field左右边缘直到你看到三条纵向的布局引导线：左缘引导线、水平中线引导线、以及右缘引导线。

   
   
   

   BBUI_textfield_finalsize_2x.png
   
   

   尽管你有一个text field在场景中，那是没有向用户说明要在这个字段里面输入什么。
   使用text filed的占位文本来提示用户输入新餐的名字。

设置text filed的占位文本

1. 维持text field被选中的状态，在实用工具区域（utility area）打开Attributes 检查器。
   当你在检查器选择器条上点击左起第四个按钮的时候，Attributes 检查器就出现了。
   它让你编辑在storyboard中的对象属性。

   
   
   

   BBUI_inspector_attributes_2x.png
2. 在Attribute检查器中，找到标记为Placeholder的字段，并且键入Enter meal name。

进一步探索
在发布的应用中，任何能够被用户看到的字符串（类似于text field的占位符文本）都应该是本地化的。更多信息查看 Build Apps for the World。

3. 按下回车键让新的占位符文本显示在text field中。
   你的场景应该看上去是这样的：

   
   
   

   BBUI_textfield_withplaceholder_2x.png
   
   

   当你编辑text field的属性的时候，你也可以编辑当用户点击text field时出现的系统键盘的属性。

配置text field的键盘

1. 确保text field仍然被选中。
2. 在Attribute检查器中，找到标记为Return Key的字段，并选择Done（如有必要向下滚动）。
   这个改变将让键盘上默认的Return键改为Done键，这样会让用户更加明白操作。

3. 在Attributes检查器中，选择Auto-enable Return Key复选框（如有必要，向下滚动）。
   这个改变可以使得在text field输入文本之前用户不能点击Done键，确保用户永远不会让餐名为空。
   Attributes 检查器现在显示的键盘设置如下所示：

   
   
   

   BBUI_keyboardattributes_2x.png
   
   

   接下来，在场景的上部增加一个标签（UILabel）。标签是不交互的；它只是在用户界面上静态的现实文本。为了帮助理解如何定义用户界面元素之间的交互，你将设置这个标签显示用户在text field中输入的文本。这是个好方法，它可以测试text filed获取了用户的输入，并正确的处理了它。

添加label到你的场景

1. 在对象库中，在过滤字段中键入label，快速找到label对象。
2. 从对象库中拖拽一个Label对象到场景中。

3. 拖拽Label让它在text filed的上方，并让其的左侧缘和text field的左侧缘对齐。
   当你看到如下所示时，停止拖拽：

   
   
   

   BBUI_label_place_2x.png
4. 双击这个label，并键入Meal Name。

5. 按下回车键让文本显示在label上。
   现在场景应该如下所示：

   
   
   

   BBUI_label_rename_2x.png
   
   

   现在添加一个按钮（UIButton）到场景。按钮是交互的，所以用户可以点击它来触发一个你设置的动作。稍后，你将创建一个动作，把label的文本重设为默认值。

添加一个按钮到场景

1. 在对象库中，在过滤字段中输入button来快速找到Button对象。

2. 从对象库中拖拽Button对象到场景中。
   3 拖拽button让它在text filed的下方，并让其的左侧缘和text field的左侧缘对齐。
   当看到如下所示时，停止拖拽：

   
   
   

   BBUI_button_place_2x.png
3. 双击button，并键入Set Default Label Text.。
4. 按下回车键让button显示新的文本。

5. 输入文本后按钮可能会发生移动，如有移动时，复位它。
   现在，你的场景应该看上去如下所示：

   
   
   

   BBUI_button_rename_2x.png
   
   

   了解你添加的元素是如何真切的安排在场景中是有好处的。查看大纲视图，来看哪些用户界面元素已经被添加到场景中。

查看大纲视图

1. 在storyboard中，找到大纲视图开关。

   
   
   

   BBUI_outlineview_toggle_2x.png
2. 如果大纲视图是折叠的，就点击开关展开它。
   需要时，可使用大纲视图开关来折叠或展开大纲视图。

大纲视图，它出现在画布的左侧，让你看到storyboard中对象的层级表示。

你应该能够看到你刚添加的text field，label，以及button都列在层级中。但是为什么你添加的用户界面元素都嵌套在View之下呢？

视图不仅显示在屏幕上并对用户的输入作出反应，它们还能作为其他视图的容器。视图被安排在一个被称为视图层的层级结构中。视图层定义了视图相对于其他视图的布局。在视图层中，视图中包含的视图被称为subview，而包含了一个视图的父视图被称为这个视图的superview。一个视图可以有多个subviews，但是只能有一个superview。

BBUI_outlineview_2x.png

通常，每个场景都有自己的视图层。每个视图层的顶部都是内容视图（content view）。在当前的场景中，内容视图被称为View，是这个视图控制器的最高层视图。
text filed、label、以及button都是这个内容视图的子视图。所有你放置在这个场景中视图都将是这个内容视图的子视图（尽管它们自己也能嵌套子视图）。

预览你的界面

周期性地预览你的应用可以检查是不是所有的事都符合你的预期。你可以使用助理编辑器（assistant editor）来预览应用界面，它是显示在主编辑器旁边的一个辅助编辑器。

预览界面

1. 点击位于Xcode工具条中靠近Xcode右上角的Assistant按钮，来打开助理编辑器。

   
   
   

   assistant_editor_toggle_2x.png

2. 如果你想要更大的工作空间，点击Xcode工具条中的Navigation和Utilities按钮来折叠导航器和实用区（utility area）。

   
   
   

   navigator_utilities_toggle_on_2x.png
   
   

   你也可以折叠大纲视图。

3. 在编辑器选择器栏中，它出现在助理编辑器的顶部，把助理编辑器从Automatic切换到Preview > Main.storyboard(Preview)。

   
   
   

   BBUI_assistant_editorselectorbar_2x.png
   
   
   

   BBUI_assistant_editorselectorbarpreview_2x.png
   
   

   正如你在助理编辑器中看到的那样，这个预览看上去和画布几乎相同。但是，这并不意味着没有新东西。画布和预览都显示了相同的屏幕尺寸（iPhone 7）和相同的方向（肖像，portrait）。如果你想检查界面是否自适应，你需要预览不同的屏幕尺寸和不同方向。

   
   
   

   BBUI_preview_same_2x.png

4. 想要预览风景（landscape）方向，点击预览底部的旋转（Rotate）按钮。

   
   
   

   BBUI_preview_rotatebutton_2x.png
   
   

   很不幸，事情看起来不太对。Text field、label、以及button依旧保持着相同的尺寸，与屏幕左上角的位置关系也没有改变。这意味着text field不再从边到边的填充屏幕。

   
   
   

   BBUI_preview_rotated_2x.png

5. 想要预览不同的屏幕尺寸，点击助理编辑器底部的加号（Add）按钮，选择iPhone SE。

   
   
   

   BBUI_preview_addSE_2x.png

再一次，Text field、label、以及button依旧保持着相同的尺寸，与屏幕左上角的位置关系也没有改变。但这次，text field延伸过了屏幕的右边缘。

BBUI_preview_small_2x.png

要想创建一个自适应的界面，你需要具体说明界面如何适应不同的屏幕尺寸。例如，当界面界面旋转到风景（landscape）方向时，text field应该伸长。当界面显示在iPhone SE上时，text field应该缩短。使用自动布局（Auto Layout）你可以轻松的指定这些类型的界面规则。

（未完待续......）