XCode4.3创建第一个ios入门项目，翻译至官方教程（三）

Xcode 提供了一个对象库，方便将对象添加到故事板文件。其中，有些是用户界面元素，属于视图类，比如按钮、文本框等；其他的是更高等级的对象，比如视图控制器、手势识别器等。

Hello World View Controller 场景已经包含了一个视图，现在你只需要再添加一个按钮、一个标签和一个文本框就可以了。然后你需要将这些部件和视图控制器类连接起来，这样它们才能够按你需要的方式行事。

添加用户界面元素

把对象库里的用户界面（UI）元素拖放到画布就可以将它们添加到视图中去了。当 UI 元素被放到视图中后，你可以按需要进行移动或缩放。

如何将 UI 元素添加到视图，并恰当摆放…

1. 在工程导航栏选中 MainStoryboard.storyboard，画布上便会显示出 Hello World View Controller 的场景。
2. 打开对象库。

   对象库位于实用工具区域的底部。如果你没有找到对象库，可以点按库选择条中左起第三个按钮：

3、在对象库的 Objects 菜单中选择 Controls。

Xcode 会在菜单下边显示一个控件（Controls）列表，列表里包括各个控件的名称和外观以及关于其功能的简要说明。

4、把文本框（text field）、圆角按钮（round rect button）和标签一次一个从列表中拖出来，并放置到视图上去。

5、拖动视图中的文本框，让它位于视图的左上角。

在你移动文本框（以及任意 UI 元素）时，会出现一些蓝色的虚线，它们叫做对齐引导线，它们能帮你轻松在视图中将 UI 元素对齐到边界或中心位置。当文本框上边和右边同时出现对齐引导线时请停止拖动，如图所示：

6、在视图中，准备缩放文本框。

通过拖拽 UI 元素上的缩放柄（Resize Handle），即位于元素边缘上的白色小方块，就可以缩放元素的大小。一般情况下，在画布或者大纲视图中点选某个元素时它的缩放柄就会出现。在这里，文本框应该已经被选中，因为你刚刚完成对齐拖放。如果你的文本框看起来和下边的类似，那么就可以进行缩放了。如果不一样，请在画布或者大纲视图中点选它。

7、向右拖动文本框右侧的缩放柄，直到视图右侧出现对齐引导线。

当你看到这样的画面时请停止拖拽：

8、保持文本框为选中状态，打开属性检视器。

9、在文本框属性检视器靠近顶部的位置，在 Placeholder（占位符）框里填写 Your Name。

     Placeholder 里的文字可以帮助用户理解文本框里需要填写哪些内容，在应用运行时提示文字以灰色呈现，并且在用户点按文本框准备输入时自动消失。

10、然后在文本框属性检视器里，点按 Alignment（对齐）按钮的中间一个，这样可以让文本框里的文字居中对齐。

当你输入了占位符文字以及修改了对齐选项之后，文本框属性检视器看起来应该和图中类似：

11、在视图中，拖动标签（Label）让它位于文本框的正下方，其左边和文本框的左边对齐。

12、拖动标签的右缩放柄，使其刚好和文本框等宽。

     可以看到，标签的缩放柄比文本框的要多，因为标签可以横向缩放也可以纵向缩放（但是文本框只支持横向缩放）。我们不需要改变标签的高度，因此请不要拖动标签四个角上的缩放柄，而要拖动右侧中间的那一个。

13、在标签属性检视器中，同样点按 Alignment 按钮的中间一个，让标签里显示的文字居中对齐。

14、将按钮拖动到视图底部附近，并且放在视图正中央。

15、在画布上，连按按钮并输入文字 Hello。
      当你在视图中连按一个按钮时（在输入文本之前），你看到的应该和图中类似：

在添加了文本框、标签和按钮这些 UI 元素并按上述方法修改布局以后，你的工程看起来应该和图中类似：

文本框还有另外几个选项，通过修改这些选项可以让文本框的行为更加符合用户的预期。首先，用户会根据提示输入自己的名字，你可以确保 iOS 建议让每一个单词首字母都大写；其次，你要确保和文本框关联的键盘设置适合于输入姓名（而不是数字什么的），而且要让键盘中显示一个 Done（完成）按钮。

这些修改都基于一个原则：既然你清楚文本框里将要输入什么内容，那么就应该将其外观及动作设置到最适合用户完成相应任务的状态。所有调整和配置都可以在属性（Attributes）检视器中完成。

如何配置文本框…

1. 在视图中，选中文本框。
2. 在文本框属性检视器中，进行以下几项修改：
   • 在 Capitalization（大写）菜单里选择 Words（单词）。
   • 确保 Keyboard（键盘）菜单选择的是 Default（默认）。
   • 在 Return Key（回车键）菜单里选择 Done（完成）。
3. 当你完成这些配置后，文本框属性检视器看起来应该是这个样子：

在 iOS 模拟器中运行你的应用，确保你添加的所有 UI 元素看起来都是你所希望的样子。你在点按 Hello 按钮时，它应该会高亮一下，如果你点按文本框里面的部分，键盘就应该显示出来。目前按钮还没有任何功能，标签也只会显示“Label”，并且键盘一旦被调出就无法收回去了。要添加你需要的功能，就得把 UI 元素和视图控制器进行正确连接。接下来，我们来看如何进行连接。

注意：由于你正在 iOS 模拟器中运行此应用，而不是真实设备中，你激活控件的方式是点按而不是真实的轻敲。

为按钮创建动作

当用户激活某个 UI 元素时，该元素会发送一个消息给能够做出对应的动作的对象（例如“将此联系人添加到用户的联系人列表中”）。这种交互行为是“目标-动作机制（Target-action mechanism）”中的一部分，这是另一个 Cocoa Touch 的设计模式。

在这篇教程里，用户轻敲 Hello 按钮时，你要让按钮给视图控制器（即目标）发送一个“更改欢迎辞”的消息（即动作）。这个消息将修改一个由视图控制器管理的字符串（也就是模型对象）。然后，视图控制器去更新标签里显示的文字，反映出模型对象中这个值的改变。

在 Xcode 中，给某个 UI 元素添加动作并设定相应的动作方法的途径是：按住 Control 键并从画布上的该元素拖动到合适的源文件上（一般而言就是视图控制器的源文件）。故事板会把通过这种方式建立的连接进行存档。之后，当应用运行载入故事板时，这些连接就会被还原出来。

如何给一个按钮添加动作…

1. 在工程导航栏里选择 MainStoryboard.storyboard，画布中会显示其场景。
2. 在 Xcode 工具条里，点按 Utilities（实用工具）按钮关闭实用工具区域，然后点按辅助编辑器按钮（Assistant Editor）调出辅助编辑器面板。

   辅助编辑器按钮位于 Editor（编辑器）按钮中间，图标是这样的：

   
   

   3、确保辅助编辑器里显示的是视图控制器的头文件（即 HelloWorldViewController.h）。

   4、在画布中，按住 Control 并从 Hello 按钮拖动到 HelloWorldViewController.h 的方法声明部分（即 @interface 语句到 @end 语句之间的部分）。

   按住 Control 并拖动的时候，你看到的应该和图中类似：

   
   

   拖动到目标位置并松开 Control 键后，Xcode 将弹出一个配置框，在里面可以配置你刚刚完成的动作连接：
   

注意：如果按住 Control 键拖动时在 HelloWorldViewController.h 的方法声明区域以外的地方松开，你将会看到其他样子的弹出框甚至什么也不会出现。如果不小心这样，可以点按画布中的视图来取消该弹出框（如果需要的话），然后再次按住 Control 键拖动。

5、在弹出框中，这样配置按钮的动作连接：

• 在 Connection（连接）菜单中，点选 Action（动作）。
• 在 Name（名称）文本框里输入 changeGreeting:（可不要漏掉那个冒号呀）。 接下来的步骤中，你需要实现 changeGreeting: 方法，这样才能真正让它将用户输入的文字“放”到标签上显示出来。
• 确保 Type（类型）文本框里是 id。
  id 型数据可以标示任何一种 Cocoa 对象。我们在这里选用 id 是因为无需关心发送消息的对象究竟是什么。
• 确保 Event（事件）菜单里选中的是 Touch Up Inside。 之所以选用 Touch Up Inside 事件是因为我们要在用户的手指在按钮范围内抬起时发送消息。
• 确保 Arguments（参数）菜单中选中的是 Sender。

 当你配置完动作连接之时，弹出框里的内容看上去应该和图中类似：

6、在popover中，点按弹出框右下角的 Connect（连接）。

Xcode 会为新的 changeGreeting: 方法添加一个存根实现，并且在这个方法的左侧显示一个内部有填充的圆形来标示已经进行过连接：

当你按住 Control 键并从按钮元素拖动到 HelloWorldViewController.h 文件并配置对应的动作时，其实你完成了两件事：

• 你向视图控制器类添加了适当的代码。明确地说，你向 HelloWorldViewController.h 添加了如下动作方法声明：
  

  - (IBAction)changeGreeting:(id)sender;

  并让 Xcode 向 HelloWorldViewController.m 文件添加了如下存根实现代码

  - (IBAction)changeGreeting:(id)sender {
  }

  注意：IBAction 是一个特殊的关键词，用来告诉 Xcode 把一个方法当成目标-动作连接来看待。IBAction 被定义为 void。

  而动作方法中的 sender 参数指向的是动作消息的发送者（在这篇教程里，发送者就是按钮）。

• 你已经在按钮和视图控制器之间建立好连接了。

接下来，需要在视图控制器和剩下的两个 UI 元素之间建立连接，即标签和文本框。

为文本框和标签创建插座变量（Outlet）

插座变量（Outlet）描述的是两个对象之间的连接。当你需要让一个对象（例如视图控制器）与它所包含的一个对象（例如文本框）进行沟通时，你就会把被包含的那个对象称为插座变量。当应用运行起来时，你在 Xcode 里创建的插座变量就被还原出来了，这样在运行时这些对象就可以相互交流了。

在本篇教程中，我们需要让视图控制器获取用户在文本框里输入的文字并将其显示到标签上。为了确保视图控制器能够和这些对象进行沟通，你要在它们之间创建插座变量连接。

要为文本框和标签添加插座变量，步骤和添加按钮动作时的很相似。在开始操作之前，确保画布上仍然可以看到主故事板文件，并且  HelloWorldViewController.h 在辅助编辑器中是打开的。

如何为文本框添加插座变量…

1. 按住 Control 键并从视图中的文本框拖动到头文件的方法声明区域。
   当你进行 Control 拖动时，看起来应该和图中差不多：

   

只要按住 Control 拖动到了方法声明的区域里，并在区域里的任何地方松开便可。在本篇教程中，文本框和标签的插座变量声明显示在 Hello 按钮的方法声明上边。

2、完成 Control 拖动并松开时，会出现一个弹出框，请这样配置文本框的连接：

• 确保 Connection（连接）菜单里选中的是 Outlet。
• 在 Name（名称）文本框里输入 textField。
  你怎么称呼这个插座变量都行，但插座变量和它所代表的物体在名称上有关联的话，你的代码会更易读。
• 确保 Type（类型）文本框里是 UITextField。
  将 Type 文本框设置为 UITextField 就确保 Xcode 只会把这个插座变脸和文本框相连接。
• 确保 Storage（存储）菜单中选中的是 Weak（弱），这也是默认选项。

3、当你完成配置之后，此时的弹出框看上去应该是这样的：

4、点按弹出框右下角的 Connect（连接）。

为文本框添加插座变量时，你实际上完成了两件事：

• 你向视图控制器添加了适当的代码。明确地说，就是你向 HelloWorldViewController.h 中添加了下列声明：
  

  @property (weak, nonatomic) IBOutlet UITextField *textField;

  注意：IBOutlet 是一个特殊关键词，用来告诉 Xcode 把该对象当作插座对象来对待。它实际上未被定义为任何东西，所以在编译时是没有影响的。

  同样，你还让 HelloWorldViewController.m 文件的 viewDidUnload 方法里新增了下列语句：

  self setTextField:nil;

  viewDidUnload 方法是由你选用的 Xcode 模板提供的，并且 UIKit 框架已经帮你实现它了。当某个视图控制器需要卸载它所包含的某个视图时，就会调用 viewDidUnload 方法，因此这个方法正好可以用来将视图的插座变量设为 nil。

• 你已经建立好了从视图控制器到文本框的连接。

  在视图控制器和文本框之间建立连接后，用户输入的文字就会被发送给视图控制器。在 changeGreeting: 方法声明的部分，Xcode 会在文本框声明语句的左侧显示一个含有填充的圆形表示已经连接。

现在给标签也添加一个插座变量并配置连接。在视图控制器和标签之间建立连接后，视图控制器就可以用包含用户输入文字的一个字符串来更新标签显示的内容。这一步的步骤和刚才给文本框添加插座变量时是相同的，只不过在配置连接时稍有区别。（确保辅助编辑器中的内容是 HelloWorldViewController.h。）

如何给标签添加插座变量…

1. 按住 Control 键并从视图上的标签拖动到辅助编辑器里 HelloWorldViewController.h 的方法声明区域。
2. 松开后会出现弹出框，请按如下方式配置标签的连接：
   • 确保 Connection（连接）菜单里显示的是 Outlet（插座变量）。
   • 在 Name（名称）文本框中填入 label。
   • 确保 Type（类型）框里显示的是 UILabel。
   • 确保 Storage（存储）菜单里显示的是 Weak（弱）。
3. 点按弹出框右下角的 Connect（连接）。

跟着教程走到这一步，你已经创建了三个到视图控制器的连接：

• 一个按钮的动作连接
• 一个文本框的插座变量连接
• 一个标签的插座变量连接

在 Connections（连接）检视器中可以检验这些连接。

如何打开视图控制器的连接检视器…

1. 点按 Standard（标准）编辑器按钮来关闭辅助编辑器，切换到标准编辑视图。
   标准编辑器按钮是 Editor 按钮中最左边一个，看上去是这个样子：
2. 点按 View 按钮中的 Utilities（实用工具）按钮，打开实用工具区域。
3. 在大纲视图中点选 Hello World View Controller。
4. 在实用工具区域打开连接检视器。连接检视器按钮在检视器选择条的最右边，看上去是这个样子：

在连接检视器中，Xcode 会显示选中对象的所有连接情况（在这里是视图控制器的所有连接）。在工作区窗口，你应该能够看到图中的画面：

注意，除了你创建的三个连接之外，视图控制器和它的视图之间也有连接。Xcode 默认会在视图控制器和它的视图之间自动做好连接，你可以不必理会。

为文本框的委托建立连接

你的应用里还缺少一个连接：你需要规定某个对象为文本框的委托（Delegate），并在文本框和文本框委托之间建立连接。在本教程中，你将使用视图控制器作为文本框委托。

为什么要给文本框规定委托对象呢？因为当用户轻敲键盘中的 Done 按钮时，文本框要给它的委托发送消息（回忆一下，委托是一种对象，它代表另一个对象执行动作）。在之后的步骤里，你要利用跟这个消息相关联的方法来收起键盘。

确保故事板文件显示在画布上。如果没有，请在工程导航栏中点选 MainStoryboard.storyboard。

如何为文本框设定委托…

1. 在视图中，按住 Control 键并从文本框拖动到场景坞里的黄色球体上（黄色球体代表视图控制器对象）。
   当你松开时，应该能看到图中的画面：

2、当半透明面板出现时，选择 Outlets（插座变量）部分的 delegate。

测试应用

点按 Run 来测试你的应用。

现在你应该可以看到，在点按 Hello 按钮时它会高亮，点按文本框内部时会出现键盘并且能够输入文字。然而，我们仍然无法收起键盘。在下一章节里，我们将实现这个功能，也就是实现适当的委托方法。现在请退出 iOS 模拟器。

本节回顾

当你在画布中的视图控制器和辅助编辑器中的 HelloWorldViewController.h 文件之间建立了合适的连接以后，你同时也更新了实现文件（即 HelloWorldViewController.m 文件）来支持相应的插座变量和动作。如果想要检视实现文件中发生的变化，在工程导航栏中打开它即可。

在创建连接时，你也可以不使用 Xcode 的自动添加代码功能（即按住 Control 键从画布拖动到源代码中）。相反，你完全可以把属性声明和方法声明手动输入到头文件中，然后建立文本框到它的委托的连接。当然了，尽量使用 Xcode 的自动功能可以帮助你减少输入错误（同时也能减少一点手动输入工作）。

要实现视图控制器，需要做好几件事：为用户的姓名添加一个属性、实现 changeGreeting: 方法、确保用户轻敲 Done 按钮时键盘能够收起来。

XCode4.3创建第一个ios入门项目，翻译至官方教程（一）

XCode4.3创建第一个ios入门项目，翻译至官方教程（二）