IOS Apps 开发(Swift)（4）——Connect the UI to Code（1）

前言：网上一直没有找到用Swift开发IOS的好的教程，所以找了官网的文档翻译一下算了。如有错误欢迎指正。博主首发CSDN，mcf171专栏。

博客链接：mcf171的博客

原文链接：Connect the UI to Code

——————————————————————————————

在本次课程中，我们将把基础的FoodTracker app的UI和代码联系起来，并且我们也可以定义一些用户在UI上的操作行为。当最终完成的时候你的app应该效果如下图

学习目标

在本次课程中，你可以了解到：

• 明白在storyboard中场景和view controller的联系
• 在UI元素和源代码之间创建一个联系
• 处理用户在文本框的输入并且在UI上显示
• 创建一个实现接口的类
• 理解代理模式
• 在设计app架构的时候遵循面向行为的设计模式

将UI和源代码关联起来

深入理解storyboard和我们自己写的代码如何关联是非常重要的。

在storyboard中，一个场景呈现一个内容，对应一个view controller。View Controller 实现了我们app的行为。一个view controller 关了一个单一的内容视图，通过他的子视图层次。View Controller协同了app的数据模型之间的消息流、展示数据的视图、管理内容视图的生命周期、处理当设备发生旋转时如何进行布局如何变化、定义app的导航、实现对用户输入的响应。在iOS中所有的view controller对象都是UIViewController类型或者是它的子类之一。

我们可以通过创建和实现自定义view controller子类来定义我们的view controller的行为。我们能创建这些类和场景的关联。

Xcode已经创建了一个这样的类ViewController.swift，并且将他和我们的场景关联了起来。在之后的工作中，我们会增加更多的场景，我们会自己在身份查看器中创建这样的关联。身份查看器让我们编辑在storyboard中对象的属性，并和对象的身份进行关联，比如说这个类属于谁。

在运行时，storyboard会创建ViewController的实力。app中我们所看到的场景将会展示在我们storyboard中定义的场景UI和我们在ViewController.swift中定义的用户行为。

尽管场景已经关联了ViewController.swift，但是为了在我们的app中使得我们的view controller和我们的视图进行交互，我们还需要定义额外的链接——outlets和actions。

创建Outlets

Outlets提供了源代码文件引用接口对象（在我们storyboard中增加的对象）的方式。为了创建一个outlet，你需要从storyboard中拖拽指定的对象到我们的view controller文件中，这样就可以在我们的view controller文件中创建这个对象的属性，从而让我们可以在运行时通过代码来访问和操作这个对象。

在本次课程中我们需要创建文本框和标签的outlets

创建文本框以ViewController.swift代码的联系

1、打开storyboard——Main.storyboard

2、点击Xcode工具栏右上的Assistant 按钮打开助手编辑器

3、如果需要更多的工作空间可知折叠工程导航和实用工具区。

4、在编辑器选择栏中选择Preview中的Automatic->ViewController.swift。

5、在ViewController.swift中找到class这一行，看起来应该是这样

class ViewController: UIViewController {

6、在class 这一行下面添加如下注释

// MARK: Properties

7、在storyboard中选择文本框

8、将文本框从画布中control+拖拽到代码区。当拖到注释下的位置时松开鼠标

9、在弹出的对话框中，在名字中输入nameTextField。其余的不用改动

10、点击Connect

这样Xcode就把必要的代码添加到ViewController.swift中村粗了一个指向文本框的指针，并且配置了这个连接

@IBOutlet weak var nameTextField: UITextField!

我们再来捋清一起下刚刚这行代码的意义

IBoutlet属性告诉了Xcode我们能从Interface Builder 中联系 nameTextField。weak关键字意味着在生命周期的某些时候可能是空值。剩下的就是声明了一个UITextField类型名字为nameTextField的变量。

注意在声明的最后有一个感叹号，这个以为这个类型是一个隐式的unwrapped optional，也就是在第一次设置值之后他一动是总有值的。

接下来以相同的方式连接标签和ViewController.swift

连接标签和ViewController.swift

1、在storyboard中选择标签

2、拖拽到ViewController.swift中

3、在弹出的对话框输入mealNameLabel

4、点击connect

同样Xcode也添加了一个指向标签的指针

@IBOutlet weak var mealNameLabel: UILabel!

接下来我们定义Action

创建Action

iOS app是基于事件驱动的程序，也就是说app的工作流是由事件决定的：系统事件和用户的动作。用户的在接口的动作会出发app的时间。这些时间导致了app逻辑的执行和数据的操作。同时app会在UI上响应用户的动作。当某一块app的代码被执行的时候是用户而不是开发者受控制，所以我们需要准确定义一个哪些是用户可以做的动作并且对于这些动作的响应是什么。

一个动作是一块代码，表明了在我们app中的事件。当事件发生的时候，这个代码将被执行。我们可以定义一个动作方法来完成数据的操纵从而更新我们的UI。我们也可以通过动作来驱动我们app的工作流从而完成对用户或者系统事件的响应。

创建动作的方式和创建outlet的方式一样，通过Control+拖拽进行。

首先我们创建一个简单的动作，当用户点击我们的Set Default Label Text按钮时，我们将标签设置为Default Text。

创建一个标签重置的动作

1、在ViewController.swift 中，在最后的花括号前增加以下注释。

// MARK: Actions

2、在我们的storyboard选择Set Default Label Text按钮

3、Control+拖拽将按钮拖到我们的代码区

4、当对话框出现的时候选择Action

5、输入名称setDefaultLabelText

6、输入类型 选择UIButton

你可能注意到默认的类型是AnyObject。在Swift中，AnyObject是一个用来描述属于任意类的一个对象。将这个动作方法的类型具体为UIButton意味着只有按钮对象可以连接这个动作。尽管对于目前我们创建来说这一点无所谓，但是我们必须对这个有印象，因为之后会有用处

到这里你的对话框应该像下图

7、点击Connect

 Xcode就会自动将代码添加到ViewControll.swift中

@IBAction func setDefaultLabelText(sender: UIButton) {
}

sender参数指的是可能会出发这个动作的对象。在我们这个案例中是按钮，IBAction属性表明这个方法是一个动作可以从Interface Builder中连接。剩下的就是一个方法的描述。

现在我们方法体还是空的，接下来我们来实现方法体

实现标签重置动作的代码

1、在ViewController.swift中找到setDefaultLabelText动作方法

2、在方法体中增加下面代码

mealNameLabel.text = "Default Text"

现在这个方法应该看起来像

@IBAction func setDefaultLabelText(sender: UIButton) {
    mealNameLabel.text = "Default Text"
}

里程碑：接下来通过模拟器来测试我们的改变。但我们点击按钮的时候标签应该从Meal Name变为Default Text