iOS应用程序开发教程：四、添加用户界面元素

在学习了查看视图控制器和视图后，我们要学习的是如何配置视图，在开始之前想让我们来添加一些用户界面元素吧。

Xcode 提供了对象库，你可以将库中的对象添加到串联图文件，其中的一些对象属于视图中的用户界面元素，例如按钮和文本栏，其他对象为高级对象，例如视图控制器和手势识别器。“Hello World View Controller”场景已经包含了一个视图，现在需要添加一个按钮、一个标签和一个文本栏。南京iOS应用开发培训

将对象库中的用户界面 (UI) 元素拖移到画布上的视图中，来添加用户界面元素。UI 元素添加到视图后，可以适度移动它们的位置和调整大小。

将 UI 元素添加到视图并适当进行布局

1. 如有需要，选择项目导航器中的 MainStoryboard.storyboard，在画布上显示“Hello World View Controller”场景。

2. 如有需要，打开对象库。对象库出现在实用工具区域的底部。如果看不到对象库，你可以点按其按钮，即库选择栏中从左边起的第三个按钮。

3. 在对象库中，从“Objects”弹出式菜单中选取“Controls”。Xcode 将控制列表显示在弹出式菜单下方。该列表显示每个控制的名称、外观及其功能的简短描述。南京iOS应用开发培训

4. 从列表中拖一个文本栏、一个圆角矩形按钮和一个标签到视图上，一次一个。

5. 在视图中，拖移文本栏将其放置在视图的左上角附近。

在移动文本栏或任何其他 UI 元素时，会出现蓝色的虚线（称为对齐参考线），有助于将项目与视图的中心和边缘对齐。当你看到视图的左方和上方对齐参考线（如下图所示）时，停止拖移文本栏：

6. 在视图中，准备调整文本栏的大小。

通过拖移调整大小控制柄（显示在元素边框上的小白方块）来调整 UI 元素的大小。一般情况下，在画布上或在大纲视图中选择一个元素，该元素的调整大小控制柄就会显露出来。在本例中，因为你刚刚停止拖移，文本栏应该已被选定。如果文本栏外观如下图所示，就可以调整它的大小；否则请在画布上或在大纲视图中选择它。

7. 拖移文本栏右侧的调整大小控制柄，直到视图最右侧的对齐参考线出现。

当看到画布像下图这样时，停止调整文本栏大小：

8. 在仍然选定文本栏时，打开“Attributes”检查器（如有需要的话）。

9. 在“Text Field Attributes”检查器顶部附近的“Placeholder”栏中，键入短语 Your Name。

顾名思义，“Placeholder”栏提供的浅灰色文本是为了帮助用户理解能够在文本栏中输入何种信息。在运行的应用程序中，用户只要在文本栏内轻按，占位符文本就会立即消失。南京iOS应用开发培训

10. 还是在“Text Field Attributes”检查器中，点按中间的“Alignment”按钮，使文本栏的文本居中显示。

在输入占位符文本和更改对齐设置后，“Text Field Attributes”检查器外观应该像这样：

11. 在视图中，拖移标签到文本栏下方，并使其左边缘和文本栏的左边缘对齐。

12. 拖移标签的右侧调整大小控制柄，使标签与文本栏同宽。

比起文本栏，标签有更多的调整大小控制柄。这是因为你可以调整标签的高度和宽度，但只能调整文本栏的宽度。现在不是要更改标签的高度，因此不要拖移标签四个角的调整大小控制柄。要拖移的是标签右侧中间的那个调整大小控制柄。南京iOS应用开发培训

13. 在“Label Attributes”检查器中，点按中间的“Alignment”按钮，使出现在标签中的文本居中显示。

14. 拖移按钮使其靠近视图底部并且水平居中。

15. 在画布上，连按该按钮，然后输入文本 Hello。

在添加文本栏、标签和按钮 UI 元素，并对布局做出建议的修改后，你的项目看起来应该是这样的：

你可能注意到，当你将文本栏、标签和按钮添加到背景视图时，Xcode 在名为 Constraints 的大纲视图中插入了项目。Cocoa Touch 具有一个自动布局系统，让你定义用户界面元素的布局约束。这些约束定义用户界面元素之间的关系，当其他视图的大小改变或设备摆放方向改变时，该关系影响各界面元素如何改变其位置和几何形状。现在不要改变你添加到用户界面的视图的默认约束。

你还可以对文本栏进行一些修改，使文本栏的行为符合用户的期望。首先，因为用户要输入自己的姓名，你可以确保 iOS 对用户键入的每个英文单词的首字母实施大写。其次，还可以确保与文本栏相关联的键盘配置为输入姓名（而不是数字），并且键盘显示“Done”按钮。

这些更改所遵循的原则是：因为在设计时，你已知道文本栏将包含何种类型的信息，你可以配置文本栏使它运行时的外观和行为符合用户的任务。这些配置都可以在“Attributes”检查器中修改。

配置文本栏

1. 在视图中，选择文本栏。

2. 在“Text Field Attributes”检查器中，进行以下选择：

  ·在“Capitalization”弹出式菜单中，选取“Words”。

  ·确保“Keyboard”弹出式菜单设定为“Default”。

  ·在“Return Key”弹出式菜单中，选取“Done”。

选定以上选项后，“Text Field Attributes”检查器应该是这样的：

在 Simulator 中运行应用程序，以确定所添加的 UI 元素外观正如所期望的样子。如果点按“Hello”按钮，该按钮应该高亮显示；如果在文本栏内点按，键盘应该出现。不过，这时按钮没有任何功能，标签还是空的，而且键盘出现后无法使它消失。要添加此功能，需要在 UI 元素和视图控制器之间进行适当的连接。如何建立连接的问题我们会在明天的内容中给大家解决。南京iOS应用开发培训

注：因为只是在 Simulator 中（而不是在设备上）运行应用程序，所以是通过点按来激活控制，而不是用手轻按的方式。