macOS 控件教程(1)

原文：macOS Controls Tutorial: Part 1/2
作者：Ernesto García
译者：kmyhy

更新说明：本教程由 Ernesto García 升级为 Xcode 8.2 / Swift 3 。上一版本由 Michael Briscoe 升级为 Xcode 6.3 / Swift 1.2 。原文作者是 Ernesto García。

如果你是一个 iOS 程序员，你想学习 Mac 开发，你有福了——由于你具备的 iOS 技能，你可以发现这很好学习！

有大量的 Cocoa 类和设计模式，比如字符串、字典和委托在 Mac 开发中都能够找到等价物。你感觉就像是回家。

但是，最大的不同在于它拥有不同的控件。 UIButton 和 UITextField 不见了——取而代之的是类似的东东（有细微不同）。

本教程介绍最常见的 macOS UI 控件——大部分 Mac app 都是由它们构成的。你会学习使用这些控件，以及它们的方法和属性，为了快速成为一个合格的开发者，你需要掌握它们！

在本文中，我们会编写一个类似于流行游戏 Mad Libs(疯狂填词) 的简单 Mac app。Mad Libs 是一个填词游戏，你可以在一段文字中插入不同的单词，并组装成一个故事——结果会非常搞笑！

当你完成 2 部分的教程时，你会基本熟练应用

• Labels 和 Text Fields
• Combo Boxes
• Popup Buttons
• Text Views
• Sliders
• Date Pickers
• Buttons
• Radio Buttons
• Check Buttons
• Image Views

注意：学习本教程需要具备基本的 macOS 开发知识。如果你是第一次接触 macOS 开发，你可以先学习我们的 macOS 开发教程初学者系列。

学习一门新平台开发技术的最好方法，是立即开始——因此不再啰嗦，让我们立即开始:]

开始

打开 Xcode，选择 File/New/Project。在项目模板对话框，选择 macOS/Application/Cocoa，这个模板让你创建一个运行在 macOS 上的图形界面 app。然后点击 Next。

https://koenig-media.raywenderlich.com/uploads/2016/12/macos-template.png’ width=’600’/>

接下来，在 Product name 一栏输入 MadLibs，在 Organization name 和 Organization identifier 中填入必要内容。确保 Use Storyboards 被勾选，Language 选择 Swift。

https://koenig-media.raywenderlich.com/uploads/2016/12/macos-projectname.png’ width=’600’/>

点击 Next，指定文件保存位置。点击 Create。

打开 Main.storyboard。Xcode 已经在这里为你创建了基本的 Mac app 框架：一个 Window 控制器和一个 View Controller。

选中 Window Controller 场景中的 window 对象，打开属性面板。将窗口 title 修改为 MadLibs。

https://koenig-media.raywenderlich.com/uploads/2017/01/MadLibsWindowTitle.png’ width=’600’/>

一个 Mac app 通常有一个大小可变的 window，它的内容必须适应 window 的大小。要实现这样，最好的工具就是自动布局。而要在所有控件上添加自动布局将严重分散你的注意力，因此本教程我们将主要精力集中在 macOS 控件的使用上。

因此，我们只使用默认的 autoresizing 属性，这样所有的控件将保持一个固定的位置和大小，无论用户怎样修改 window 的大小——这样会导致部分控件部分超出窗口的可视区域。

注意： 如果你想了解 Auto Layout 以及在 Mac app 中如何使用自动布局，你可以参考我们的 macOS 开发教程初学者系列，第3集。

在本教程中，你需要在这个视图上添加几个 macOS 控件，视图的默认高度可能不足以放下它们。当你需要修改它的大小时，可以将 content 视图的下端往下拖，或者在 Size 检视器中修改视图的 Height 属性。

https://koenig-media.raywenderlich.com/uploads/2017/01/drag-resize-1-650x393.png’ width=’600’/>

编译运行。

https://koenig-media.raywenderlich.com/uploads/2017/01/empty-window.png’ widht=’400’/>

你编写了一个能够运行的 app——甚至没有编写一行代码。现在窗口中是空的，但你将用一些 mac 控件放在上面，这样它看起来会好一些！

现在基本架子就已经搭好了，你可以将主要精力转移到本教程的注意内容上来了——为 app 添加控件。

本教程剩下的步骤都将集中到单个的、不同的控件身上。你会学习每种控件的基本用法，以及如何在 MadLibs 中进行实际的运用。

NSControl——MacOS 控件的基石

NSControl 是其它 macOS 控件的基础。NSControl 提供了 UI 元素的 3 个基础功能：绘制屏幕，响应用户事件、发送 action 消息。

NSControl 是一个抽象类，你不可能直接使用它，你必须创建自己的控件子类。所有常用控件都是 NSControl 的子类，因此都继承了它的属性和方法。

一个控件的最常用的方法是读取/设置它的值，以及启用/禁用控件。这些方法分别是：

设置控件值

如果需要显示数据，通常需要改变控件的值。根据需求的不同，控件值可能是字符串、数字或者对象。大部分情况下，我们会使用和要显示的内容相匹配的值类型，不过 NSControl 也允许你设置多个不同的类型！

控件值的这些 get/set 方法是：

// getting & setting a stringlet myString = myControl.stringValuemyControl.stringValue = myString// getting & setting an integerlet myInteger = myControl.integerValuemyControl.integerValue = myInteger// getting & setting a floatlet myFloat = myControl.floatValuemyControl.floatValue = myFloat// getting & setting a doublelet myDouble = myControl.doubleValuemyControl.doubleValue = myDouble// getting & setting an objectlet myObject: Any? = myControl.objectValuemyControl.objectValue = myObject

这些 setter/getter 方法是符合 Swift 类型安全特性的。

启用/禁用控件

根据 app 状态的变化启用/禁用控件是很常见的 UI 特性。当控件被禁用，它就无法响应鼠标或键盘事件，同时会改变它的 UI 图像以表示控件被禁用，比如控件会“变灰”。

启用/禁用控件的方法分别是：

// 禁用控件myControl.isEnabled = false// 启用控件myControl.isEnabled = true// 获取控件的禁用/启用状态let isEnabled = myControl.isEnabled

是的，就是这么简单——重要的一点是，这些方法对所有 macOS 控件来说都是一样的。在你的 UI 中用到的所有控件都是以同样的方式运作。

是时候来看一下几种常见控件了。

梦幻成真^{（注*：电影名）} – NSTextField

文本 field 是最常见的 UI 控件之一，用于显示或编辑一段文本。在 macOS 这个控件就是 NSTextField。

NSTextField 可以显示、编辑文本。你会看到它和 iOS 中的是不同的，UILabel 显示静态文本，UITextField 用于编辑文本。在 macOS 中，这两者被合二为一了，它会根据 isEditable 属性值的不同而改变不同的行为。

如果你想把它当成 label 用，只需要将 isEditable 属性设置为 false。如果想让它作为文本输入控件——设置 isEditable 为 true。这个属性可以通过代码来改变，也可以在 IB 中设置。

为了节省你的时间，IB 会提供几个预先配置过的 macOS 控件，这些控件可以用来显示文本、编辑文本，但其实都属于 NSTextField。这些控件放在了 Object Library 中，分别是：

https://koenig-media.raywenderlich.com/uploads/2016/12/textfields-catalog.png’ width=’200’/>

学习完基本的 NSTextField 理论知识之后，我们将在 MadLibs app 中使用它们！

活在过去——一个动词的过去式

我们会在 MadLibs app 中添加各种控件，它们允许你不断构建出一个搞笑的句子。当你完成后，所有不同的部分会组合起来并显示，以获得一种喜剧的效果。你的创意越丰富，结果就会越搞笑！

第一个添加的控件是文本输入框，你用它来输入一个动词，这个词会组成句子的一部分，同时还需要一个 label，提示文本输入框的作用。

打开 Main.storyboard。在 Object Library 中 Label 控件，将它拖到 View Controller 场景的 view 中。双击 label，修改它的默认文本为 Past Tense Verb（过去时态的动词）:。

然后,拖一个 Text Field 控件到 view 中，把它放在 label 的右边：

https://koenig-media.raywenderlich.com/uploads/2017/01/drag-label.png’ width= ‘700’/>

现在，需要为 text field 在 View Controller 中创建一个 IBOutlet。确认打开 Main.storyboard，点击 Assitant editor。确认选择 ViewController.swift 源文件，用 ctrl+左键，从故事板中的 text field 拖一条线到 ViewController.swift 中的类定义下面，松开鼠标，就会创建一个新属性：

https://koenig-media.raywenderlich.com/uploads/2016/12/textoutlet-1.png’ width=’700’/>

这会弹出一个新对话框，将 IBOutlet 的 name 设置为 pastTenseVerbTextField, 然后点击 Connect。

https://koenig-media.raywenderlich.com/uploads/2016/12/textoutlet-popup.png’ width=’300’/>

就这么简单！在你的 View Controller 中你添加了一个 NSTextField 属性，而这个属性和主窗口中的 text field 连接在一起。

当 app 启动时，最好显示一些默认文本，这样人们才知道需要在 text field 输入些什么。因为人们都喜欢实物，而且实物和 MadLibs 总是最容易产生搞笑的效果，我们在这里不妨将 ate 作为默认的文本。

这个工作需要在 viewDidLoad() 中进行。现在，简单地设置控件的 stringValue 属性。

打开 ViewController.swift 在 viewDidLoad() 方法最后一句加上:

// 设置 pastTenseVerbTextField 的默认文本pastTenseVerbTextField.stringValue = "ate"

编译运行。

https://koenig-media.raywenderlich.com/uploads/2017/01/buildrun-textfield.png’ width=’600’/>

好了，看到输入框以及默认的文字了吗？但是如果我们想提供一个列表供用户选择该怎么办？

这就该下拉组合框出场了！

组合框 – NSComboBox

组合框很有意思——也很有用——因为它允许你从一个选项列表中选择一个值，同时还能够输入自己的文字。

它就像是一个文本框，用户可以在里面进行输入，但同时包含了一个按钮，允许显示一个列表供用户选择。在 macOS 的日期时间偏好设置面板中，你可以找到一个现成的例子：

https://koenig-media.raywenderlich.com/uploads/2016/12/date-sshot.png’ width= ‘600’/>

其中，用户既可以从预定义的列表中进行选择，也可以输入自己的服务器名称。

在 macOS 中，这个控件就是 NSComboBox。

NSComboBox 有两个不同的组成部分：文本输入框用于输入字符，选项列表用于当内嵌按钮被点击时显示选项列表。这两部分的数据都可以单独进行控制。

要读取或设置 text field 的值，可以使用前面介绍的 stringValue 属性。这样，就让事情保持简单一致了，点个赞！

为列表提供选项稍微麻烦一点，但也还好了。你可以直接调用控件的方法添加单个的元素，这就和操作可变数组的方式差不多，还可以使用数据源——只要有过 iOS 编程经验和用过 UITableViewDataSource 的人都不陌生！

注意：如果你不熟悉 Data Source 的概念，你可以参考苹果的Delegate 和 Data Source 文档。

方法 1 —— 直接调用控件的方法

NSComboBox 包含了一个内部列表，暴露了几个操作这个列表的方法，比如：

// 向列表中添加对象myComboBox.addItem(withObjectValue: anObject)// 向列表中添加数组myComboBox.addItems(withObjectValues: [objectOne, objectTwo, objectThree])// 删除列表中所有对象myComboBox.removeAllItems()// 根据索引删除列表中某个对象myComboBox.removeItem(at: 2)// 得到当前所选对象在列表中的索引let selectedIndex = myComboBox.indexOfSelectedItem// 选定指定位置的对象myComboBox.selectItem(at: 1)

非常简单吧？但如果你不想在 app 中以硬编码的方式指定这些选项——比如你需要一个动态的列表，列表中的数据保存在 app 之外呢？这个时候用数据源会更加方便 :]

方法 2 ——使用 Data Source

使用数据源方式组合框会在需要显示选项时查询数据源，包括一些元数据——比如列表要显示的对象的数目。要获得这些信息，我们必须在我们的类中（通常是 View Controller，也就是控件所在的控制器）实现 NSComboBoxDataSource 协议。要让组合框使用数据源，需要分两步进行。

首先，将控件的 usesDataSource 属性设置为 true。然后设置控件的 dataSource 属性，将一个实现指定协议的对象赋给这个属性。如果实现数据源的类就是包含了控件的 View Controller，则这个步骤通常会在 viewDidLoad() 方法中进行，比如这样：

class ViewController: NSViewController, NSComboBoxDataSource {.....  override func viewDidLoad() {    super.viewDidLoad()    myComboBox.usesDataSource = true    myComboBox.dataSource = self  }.....}

注意：上述代码中，语句书写的顺序是重点。如果在设置 dataSource 属性时 useDataSource 为 false(这是默认值)，则会导致数据源设置失败，你的数据源是无效的。

要实现这个协议，我们需要实现这两个数据源方法：

// 返回数据源所管理的组合框中的对象个数func numberOfItems(in comboBox: NSComboBox) -> Int {  // anArray 是一个数组，包含了多个对象  return anArray.count}// 返回和组合框 index 所对应的对象func comboBox(_ comboBox: NSComboBox, objectValueForItemAt index: Int) -> Any? {  return anArray[index]}

最后，当数据源发生改变时，需要刷新控件，你可以调用组合框的 reloadData() 方法。

到底用哪一种方法?

如果你的选项比较少，而且你不需要经常改变它们，可以使用将选项一次性添加到内部列表的方法。如果你的选项比较大或者它们是可变的，则使用数据源方法更高效快捷。对于本教程，我们将使用方法一。

现在，你已经学习了组合框的基本用法，是时候来在我们的 app 中使用它！:]

单身酒吧——一个单数名词

在这一节，我们会用一个组合框来输入一个单数名词。你可以从列表中选择，也可以自己输入。

首先，用一个 label 来描述这个组合框的用途。

打开 Main.storyboard。从 Object Library 中找到 Label 控件，将它拖到内容视图。将它的对齐方式设为 Right ，title 设为 Singular Noun:。

注意：更快捷的做法是，按下 Option 键，拖动一个现成的 label 就能复制出另一个 label。这很方便，因为我们可以让复制出来的 label 保持相同的大小和属性。

拖一个 Combo Box 控件到内容视图。把它放在 label 的右边。

https://koenig-media.raywenderlich.com/uploads/2017/01/addcombo.png’ width=’700’/>

现在为 NSComboBox 添加一个到 View Controller 的 IBOutlet。这和我们在 text field 上所用的技术是一样的：打开 Assitant Editor（确保打开的源文件窗口是 ViewController.swift），然后 ctrl+左键，从组合框拖一条线到 ViewController 类的 NSTextField 属性下边：

https://koenig-media.raywenderlich.com/uploads/2017/01/combo-outlet.png’ width=’700’/>

在弹出的对话框中，设置 IBOutlet 的 name 为 singularNounCombo。

https://koenig-media.raywenderlich.com/uploads/2016/12/combo-outlet-2.png’ width=’200’/>

现在这个 NSComboBox 属性连接到了组合框控件。我们接下来要添加一些数据以便在列表中展示。

打开 ViewController.swift 在刚才的 IBOutlet 后面添加:

fileprivate let singularNouns = ["dog", "muppet", "ninja", "pirate", "dev" ]

现在，在 viewDidLoad() 最后一句加入：

// 将 singularNouns 数组添加到组合框singularNounCombo.removeAllItems()singularNounCombo.addItems(withObjectValues: singularNouns)singularNounCombo.selectItem(at: singularNouns.count-1)

第一句移除列表中的默认项。第二句调用 addItems() 将 singularNouns 中的名词添加到组合框。最后一句，选择列表中的最后一项。

编译运行 app，看看你的组合框是什么样子！

https://koenig-media.raywenderlich.com/uploads/2017/01/buildrun-combo.png’ width=’300’/>

好——看起来一切正常。如果你点击组合框，你可以查看和选择不同的选项。

如果你想显示选项列表，但不允许用户输入自己的值呢？往后看，有一种专门的控件用于解决这个问题。

碰！黄鼠狼跑掉了^{（注*：一首英文儿歌）}——NSPopupButton

弹出按钮允许用户从选项列表中选择，但不允许他们输入专辑的值。在 macOS 中这个控件是 NSPopupButton。

弹出按钮在 macOS 中十分常见，你几乎在每一个 app 中都能发现它们的身影——包括你正在使用的 Xcode! 在本教程中，在我们设置所用到的许多控件属性时，都要用到弹出按钮。比如：

https://koenig-media.raywenderlich.com/uploads/2016/12/popup-example.png’ width=’400’/>

填充空间——向弹出按钮添加选项

就像你想到的一样，向 NSPopupButton 中添加条目就像向 NSComboBox 中添加条目——但是 NSPopUpButton 不支持数据源方式。NSPopupButton 有一个内部选项列表，以及有几个用于操作这个列表的方法：

// 向列表中添加一个选项myPopUpbutton.addItem(withTitle: "Pop up buttons rock")// 向列表中添加多个选项myPopUpbutton.addItems(withTitles: ["Item 1", "Item 2", "Item 3"])// 移除列表中所有项myPopUpbutton.removeAllItems()// 获得当前所选项的索引let selectedIndex = myPopUpbutton.indexOfSelectedItem// 将当前选择设置为指定位置的选项myPopUpbutton.selectItem(at: 1)

很简单吧？这就是 macOS 控件的美妙之处了——就操作这些控件的方式上来说，有许多地方都是相同的。

是时候在你的 app 中使用一个弹出按钮了！:]

小姑居处^{（注*：电影名）} — 一个复数名词

现在，你可以添加一个弹出按钮到 MadLibs 中，以便用户可以选择一个复数名词来构成自己的搞笑金句。

打开 Main.storyboard，拖一个 label 在 Singular Noun 标签下方。

将对齐方式修改 Right ，标题修改为 Plural Noun:。然后，拖一个 Pop Up Button 控件到窗口中，放到 label 的右边。

内容视图变成这个样子：

https://koenig-media.raywenderlich.com/uploads/2017/01/add-popup.png’ width=’700’/>

我们还需要为弹出按钮创建 IBOutlet，这个你应该很熟悉了：打开 Assitant Editor，确认打开的源文件是 ViewController.swift，用 Ctrl-左键，从弹出按钮脱一条线到 ViewController 类中，创建一个 IBOutlet：

https://koenig-media.raywenderlich.com/uploads/2017/01/drag-popup.png’ width=’700’/>

在弹出的对话框中，设置 IBOutlet 的 name 为 pluralNounPopup:

https://koenig-media.raywenderlich.com/uploads/2016/12/popup-outlet-2.png’ width=’300’/>

现在需要为控件准备数据！

打开 ViewController.swift ，在类实现中新增属性：

fileprivate let pluralNouns = ["tacos", "rainbows", "iPhones", "gold coins"]

在 viewDidLoad() 方法最后一句加入：

// 将 pluralNouns 添加到弹出按钮中pluralNounPopup.removeAllItems()pluralNounPopup.addItems(withTitles: pluralNouns)pluralNounPopup.selectItem(at: 0)

第一句删除已有的选项。第二句条用 addItems 将复数名词数组添加到弹出按钮。第三句选中列表中第一项。

编译运行 app，你会看到：

https://koenig-media.raywenderlich.com/uploads/2017/01/buildrun-popup.png’ width=’400’/>

当 app 打开后，你会看到弹出按钮显示的是第一项 tacos，如果点击按钮，你才能够看到列表的所有选项。

好，你现在有两个让用户选择的控件了，其中一个还允许用户输入单行文本。不过如果要让用户输入多行文本时怎么办？

请继续阅读 text view！

第二个文本控件 – NSTextView

和 text field 不同，text view 通常用于显示富文本。更高级的功能甚至允许显示嵌入的图片。

这个 macOS 控件就是 NSTextView。

一个充分使用了 NSTextView 的例子是文本编辑器：

https://koenig-media.raywenderlich.com/uploads/2016/12/textedit.png’ width=’700’/>

NSTextView 的功能非常强大，要介绍清楚非得要另外一个单独的教程，因此我们只介绍一部分在我们的 app 中将用到的几个基本功能。 (是不是感觉松了一口气？) :]

这是我们将会用到的几个 text view 的基本方法：

// 获取 text view 的文本let text = myTextView.string// 设置 text view 的文本myTextView.string = "Text views rock too!"// 设置 text view 的背景色myTextView.backgroundColor = NSColor.white// 设置 text view 的文字颜色myTextView.textColor = NSColor.black

很简单吧——没啥大不了的。

NSTextView 内置了对 NSAttributedString 的支持。如果你将一个 attributed string 传递给 text view，这些字符串将按照正确的属性进行显示，比如字体、字号大小和文字颜色。

注意：一个 attributed 字符串是一种特殊的字符串，你可以用将其中每一段字符设置为不同属性——比如字体、它的颜色、是否粗写等等。要了解 attributed string，请参考我们的 TextKit 教程。这是一个 iOS 教程，但关于 NSAttributedString 的内容其实也适用于 Mac 开发。

The Phrase that Pays^{(注*：歌曲名)} – 添加 Text View

万事俱备，你可以添加 text view 到 MadLibs app 中了！text view 允许用户输入多个短语，这些短语将用到最后的结果中。

打开 Main.storyboard，拖一个 label 在 Plural Noun 标签下面 (也可以像前面一样，复制一个现成的 label)。将 alignment 修改为 Right，title 修改为 Phrase:。

然后，拖一个 Text View 控件到这个 label 右边。

你的窗口看起来会是这个样子：

https://koenig-media.raywenderlich.com/uploads/2017/01/add-textview.png’ width=’700’/>

如果你想将试图拖大一点，你会发现奇怪的事情发生了。当你拖动窗口大小时，text view 会跟着移动，并改变位置。

https://koenig-media.raywenderlich.com/uploads/2017/01/textview-error.png’ width=’400’/>

因为默认情况下，Xcode 会自动改变 text view 的约束，当 text view 的父视图改变大小时，它的位置会随之而动。我们想让 text view 固定，就需要禁用这个特性。

从 Document Outline 视图中选择 Bordered Scroll View – Text View，打开 Size 检视器。

在 AutoResizing 栏，你会看到一个矩形框，带有 4 条红线连接到它的父试图。每一条红线代表一个自动改变大小约束。我们只需要点击右边和下边两条红线，禁用它们，让它们断开连接，变成淡红色的虚线：

https://koenig-media.raywenderlich.com/uploads/2017/01/add-autores.png’ width=’300’/>

现在，你再修改 window 的大小，text view 也会被固定，并和 label 进行对齐。

接下来要创建一个 NSTextView 的 IBOutlet 到 view controller。选中 textview，打开 Assistant 编辑器，确保 ViewController.swift 被打开。 Ctrl-左键，从 text view 拖一条线到 ViewController 类的其它 IBOutlet 下面。

重要提示：Text view 外面有一个 scroll view 包裹。在创建 IBOutlet 之前确认你选中的是 text view 而不是 scroll view 非常重要。要选中 text view，你需要连点 text view 三次，或者从 Document Outline 视图中进行选择。

https://koenig-media.raywenderlich.com/uploads/2017/01/textview-drag.png’ width=’700’/>

在弹出窗口中，确认 type 是 NSTextView，然后将 name 设置为 phraseTextView。

https://koenig-media.raywenderlich.com/uploads/2016/12/textview-outlet2.png’ width=’200’/>

然后，在 viewDidLoad() 方法最后一句加上：

// 设置 text view 的默认文本phraseTextView.string = "Me coding Mac Apps!!!"

编译运行 app，你会看到：

https://koenig-media.raywenderlich.com/uploads/2017/01/textview-result.png’ width=’400’/>

好棒啊！Mad Libs app 已经初具雏形。

按下你的按钮——NSButton

按钮是一种 macOS 控件，当它们被点击，它们会发送一条消息给 app。

这个 macOS 控件就是 NSButton。

按钮有各种样式（你可以在 Object Library 中看到）。它们的工作方式都一样，所不同的仅仅是外观。

https://koenig-media.raywenderlich.com/uploads/2016/12/button-catalog-1.png’ width=’400’>

你可以选择适合于你的 app 设计风格的不同类型的按钮——请参考 macOS 人机交互指南，它建议你根据 app 的设计体验给出一些建议和指导。

通常在使用按钮时，你只需要给它指定一个 action 并设置它的标题。但是，有时你需要禁用按钮或者改变其外观。下列方法提供了这些操作：

// 禁用按钮myButton.isEnabled = false// 启用按钮myButton.isEnabled = true// 获取/设置按钮标题let theTitle = myButton.titlemyButton.title = theTitle// 获取/设置按钮图片let theImage = myButton.imagemyButton.image = theImage

看起来很简单——在下一节，我们将添加一个按钮到 app 中，易如反掌。

按钮的那些事——添加一颗按钮

打开 Main.storyboard。拖一颗 Push Button 到内容视图。双击按钮，将标题修改为 Go! :

https://koenig-media.raywenderlich.com/uploads/2017/01/button-add.png’ width=’600’/>

这次我们不需要为按钮创建 IBOutlet。

但是，我们需要为按钮创建 IBAction。这样 app 才能够知道按钮什么时候被点击！

打开 Assistant 编辑器，用 ctlr+左键，从按钮拖一条线到 View Controller 的实现代码中。

https://koenig-media.raywenderlich.com/uploads/2017/01/button-addaction.png’ width=’700’/>

在弹出窗口中，确认 connection 被设为 Action。将 action 命名为 goButtonClicked。

https://koenig-media.raywenderlich.com/uploads/2016/12/button-action-2.png’ width=’300’/>

当用户点击按钮，goButtonClicked() 方法将被调用。现在我们需要在方法中写几句测试代码，以验证它能正确工作。

打开 ViewController 在 goButtonClicked() 中加入:

let pastTenseVerb = pastTenseVerbTextField.stringValuelet singularNoun = singularNounCombo.stringValuelet pluralNoun = pluralNouns[pluralNounPopup.indexOfSelectedItem]let phrase = phraseTextView.string ?? ""let madLibSentence = "A \(singularNoun) \(pastTenseVerb) \(pluralNoun) and said, \(phrase)!"print("\(madLibSentence)")

这段代码读取 text field、组合框、弹出按钮和 text view 中的文本，组合成 Mad Lib 金句。

注意一下 text view，它的 string 属性实际上是一个可空类型，因此它有可能为 nil。为了避免这种情况，我们需要用一个空合并操作 ??，当 string 为空时，用 “” 来代替。

目前我们暂时这样写——编译运行 app。

https://koenig-media.raywenderlich.com/uploads/2017/01/button-buildrun.png’ width=’400’/>

当你点击按钮，你会看到控制台中输出了一句短小、搞笑的话。

A dev ate tacos and said: Me coding Mac Apps!!!!

不错吧？但我们还可以让它更滑稽一点吗？

让电脑读出这句话怎么样？Steve Jobs(乔布斯)曾经表演过让 Mac 向世人问好。你可以让你的电脑也这样干……说干就干！

打开 ViewController.swift 在 ViewController 实现中添加代码:

// 1fileprivate enum VoiceRate: Int  {  case slow  case normal  case fast  var speed: Float {    switch self {    case .slow:      return 60    case .normal:      return 175;    case .fast:      return 360;    }  }}//2fileprivate let synth = NSSpeechSynthesizer()

首先，我们声明了一个枚举，表示语速。然后创建了一个 NSSpeechSynthesizer 对象，用于将文本合成为语音。

然后在 ViewController 实现中添加方法:

fileprivate func readSentence(_ sentence: String, rate: VoiceRate ) {  synth.rate = rate.speed  synth.stopSpeaking()  synth.startSpeaking(sentence)}

这个方法让 synth 对象以指定的语速念出某段文本。

让我们来调用它看看！在 goButtonClicked() 方法最后一句添加：

readSentence(madLibSentence, rate: .normal)

编译运行，点击 Go! 按钮，你会听到 Mac 大声念出你的金句。

结束

你可以从这里下载本教程截止到目前为止的完整项目的源代码。

在本教程第二部分，我们将学习更多的 macOS 控件，包括 滑动条、日期选择器、单选按钮、勾选框和 image view——为了最终完成我们的 Mad Libs app，这些控件中的每一个都添加到其中。

同时，有任何问题和建议，请在下面留言！