Swift官方入门教程系列--二--storyboard与代码的交互【翻译版，源代码】

代码详见github：02_storyboard交互代码

在本课中，将会学习storyboard与代码的交互。完成后，您的应用程序将如下所示：

学习目标

在课程结束时，您将能够：

• 解释故事板中的场景与底层视图控制器之间的关系

• 在故事板中的UI元素和源代码之间创建插座和动作连接

• 从文本字段处理用户输入，并在UI中显示结果

• 使类符合协议

• 了解授权模式

• 在设计应用程序架构时，请遵循目标操作模式

• 源码
  

将UI连接到源代码

在元素的故事板链接到源代码。重要的是要了解故事板与您编写的代码之间的关系。

在故事板，一个现场代表的内容一屏，通常一个视图控制器。视图控制器实现你的应用程序的行为。视图控制器管理具有其子视图层次结构的单个内容视图。视图控制器的坐标信息的应用程序的之间的流动数据模型，它封装应用程序的数据，并且显示的数据，管理他们的内容的看法生命周期的看法，处理方向变化时，该设备旋转时，定义内的导航您的应用程序，并实现行为以响应用户输入。在iOS中所有视图控制器对象类型UIViewController或它的一个子类。

你可以通过创建和实现自定义视图控制器在代码中定义的视图控制器的行为的子类。然后，您可以在故事板中的这些类和场景之间创建连接，以获取在代码中定义的行为以及您在故事板中定义的用户界面。

Xcode中已经创建，你看前面，其中一类ViewController.swift，它连接到你现在在你的故事板的工作现场。将来，当您添加更多场景时，您将在Identity检查器中自行创建此连接。在身份检查可以让你在故事板涉及到该对象的身份，比如什么类的对象属于编辑对象的属性。

在运行时，你的故事板创建的实例ViewController，您的自定义视图控制器子类。从你的故事板的场景出现在设备的屏幕上，用户界面的行为定义ViewController.swift。

虽然现场被连接到ViewController.swift，这不是一个需要进行的唯一的连接。要在应用程序中定义交互，您的视图控制器源代码需要能够与故事板中的视图进行通信。您可以通过在故事板中的视图和视图控制器源代码文件之间定义额外的连接（称为插座和操作）来实现。

创建UI元素的Outlet

奥特莱斯提供了一种方法来引用接口的对象，您将添加到您的故事板，从源代码文件的对象。要创建插座，请将控件从故事板中的特定对象拖动到视图控制器文件。此操作创建一个属性在您的视图控制器文件的对象，它可以让你访问和操纵从代码对象在运行时。

您需要为用户界面中的文本字段和标签创建插座，以便能够引用它们。

将文本字段连接到ViewController.swift代码

1. 打开你的故事板，Main.storyboard。

2. 点击助手按钮Xcode的工具栏附近的Xcode的右上角打开助理编辑。

   

3. 如果您想了解更多的工作空间，折叠项目导航和生活区通过点击工具栏中的Xcode在导航和实用程序的按钮。

   

   您也可以折叠大纲视图。

4. 在编辑器中选择栏，它出现在助理编辑器的顶部，从预览的助理编辑>更改为自动ViewController.swift。

   

   ViewController.swift 显示在右侧的编辑器中。

5. 在ViewController.swift中，找到class行，应该是这样的：

   1. classViewController:UIViewController {

6. 下面的class线，添加以下内容：

   1. //MARK: Properties

   您刚刚向源代码添加了注释。回想一下，一个评论是在不被编译在程序的一部分，但提供上下文或有关的代码的各个部分有用信息的源代码文件中的一段文字。

   以字符开头的注释//MARK:是所使用的组织代码，并帮助你（和其他人谁读你的代码）通过它浏览评论的一种特殊类型。你稍后会看到这个动作。具体来说，您添加的评论表明，这是您的代码列出属性的部分。

7. 在您的故事板中，选择文本字段。

8. 从文本字段按住Control键拖动您的画布在右边的编辑器的代码显示，停在你刚刚添加的注释下就行了阻力ViewController.swift。

   

9. 在出现的名称，类型对话框nameTextField。

   保留其余的选项。您的对话框应如下所示：

   

10. 单击连接。