macOS 新手开发：第 1 部分

2017-02-23 本文已影响4175人张嘉夫

你想学习如何开发自己的 macOS app 吗？

好消息！苹果让 macOS 开发变得相当简单，在本教程中你会学到该怎么做。你将学习如何为 macOS 创建第一个 app——哪怕你是一个纯小白。

在第一部分中，你将首先了解如何获取开发 macOS 所需的工具。然后，在创建一个简单的“Hello，World！” app 时，会带你浏览Xcode，了解如何运行 app、编辑代码、设计 UI 和调试代码。
在第 2 和第 3 部分中，你会创建一个更复杂的 Egg Timer app，了解构成一个 macOS 应用程序的组件，从应用程序启动、构建 UI 一直到处理用户交互。

那你还在等什么？桌面 app 的世界的大门已经打开！

注意：开始之前，这里有一些指导：

如果你不懂 Swift，本教程需要你了解一些 Swift，所以先看看 Swift 教程吧。
如果你已经有 iOS 经验，第一部分就会是一次回顾。迅速浏览一遍主题，确定后就直接跳到下一部分吧。
如果都不是，继续阅读吧。本教程是为纯小白准备的——不需要 iOS 或 macOS 开发经验！

上手

要成为 macOS 开发者，你需要做两件事：

一台运行 macOS Sierra 的 Mac：macOS 操作系统只在苹果电脑上运行，所以你需要一台 Mac 来开发和运行 macOS app。
Xcode：用于创建 macOS app 的 IDE。你会在这个部分的后面学习如何安装它。

构建应用程序后，如果要将其上传到 App Store 进行分发，你还需要支付苹果开发者账号。但在你准备把 app 发布到全世界之前这都不是必须的，而且只在你想通过 Mac App Store 进行分发的情况下。如果你已经有一个用于分发 iOS app 的开发者帐户，那么就已经全部搞定了——苹果已经合并了开发者帐户，因此只需要一个帐户即可为任何苹果设备分发应用程序。

和其他平台不同，macOS 开发需要只安装一个工具：Xcode。 Xcode 是一个IDE（集成开发环境），包括开发 macOS，iOS，watchOS 和 tvOS app 所需的一切。

如果你还没有 Xcode，请点击菜单左上角的苹果图标，然后选择 App Store ... 以打开 Mac App Store。虽然 Xcode 是免费的，但你需要一个 App Store 帐户来下载它。

搜索 Xcode 并单击安装按钮开始下载。下载、安装后（可能需要一段时间——它是相当大），从应用程序文件夹中打开它。第一次运行 Xcode 时，以及每次大更新后，它会要求权限来安装其他组件。输入密码并允许 Xcode 安装这些组件。

Hello World！

根据学习新编程语言或平台的长期传统，你要从创建一个 macOS 的 Hello World! app 开始。

如果还没有运行 Xcode，打开它。你应该会看到 Welcome to Xcode 窗口 - 如果没有看到，请从 Window 菜单中选择 Welcome to Xcode。

点击 Create a new Xcode project，在下一个对话框里选择顶部选项卡中的 macOS。从 Application 部分中选择 Cocoa Application，然后点击 Next。

给新的 app 起个名字——HelloWorld——确保语言设置为 Swift，并选中 Use Storyboards。取消选中所有其他选项。

单击 Next 和 Create 以保存新的 app 项目。

运行 App

Xcode 已经为你的 app 创建了具备所有必需文件的基本模板。在这个阶段，运行 app 看看你免费得到了哪些东西是很有意思的。

单击工具栏中的播放按钮或使用 Command-R 快捷键运行 app。 Xcode 现在将所有的代码编译成机器代码，捆绑应用程序所需的资源，然后执行它。

注意：第一次在 Xcode 中构建和运行 app 时，系统可能会询问你是否要在此 Mac 上启用开发者模式。你可以安全选择启用，此时可能需要输入密码。开发者模式允许 Xcode 将调试器附加到正在运行的进程——这将在构建 app 时非常有用！

你现在应该看到了一个空白的窗口，但不要失望——看看你已经做到了什么：

窗口是可调整大小的，可以最小化也可以全屏。
有一套完整的菜单，虽然你没有做任何事，其中许多已经在工作了。
Dock 图标有常用的菜单。

但现在是时候让显示效果更有趣了，所以退出 app，回到 Xcode。

Xcode 界面

Xcode 将很多功能单独分装，所以一次无法看到全部。要成为一个高效的 Xcode 用户，你需要知道它们都在哪里——以及如何获得它们。

左面板是导航面板，在顶部有8个显示选项。主要使用的是第一个 ——项目——其中列出了项目中的所有文件，并允许单击任何一个来编辑它。

中间面板是编辑器面板，将显示你从项目导航器中选择的任何内容。

右侧面板是实用工具面板，它将根据编辑器面板中查看的内容而有所不同。

添加 UI

用 Storyboard 来设计用户界面。你的 app 已经有一块 storyboard 了，所以转到项目导航器，然后点击 Main.storyboard 以在编辑器面板中显示它。

你的显示屏刚刚发生了戏剧性的变化！在“编辑器”面板中，现在可以看到 Document Outline 和 UI 的可视化编辑器。

看看能够在可视化编辑器中看到的东西。有三个主要区域，每个在 Document Outline 中也有相应的文本表示：

Application Scene：菜单栏和项目。
Window Controller Scene：配置窗口行为。
View Controller Scene：UI 元素所在的地方／

在 实用工具 面板里，可以看到顶部包含 8 个选项卡，底部包含 4 个选项卡。

底部是一些你可以插入到项目里的东西。现在需要插入 UI 元素，所以选择 Object library，从左数第三个。

在底部的过滤器（filter）中，输入 “text” 来减少可选的数量，并将 Text Field 拖动到 View Controller Scene 中。

现在过滤 “button” 并将 Push Button 拖动到 View Controller Scene 中。最后，添加一个 Label。

现在，使用播放按钮或 Command-R 来运行 app。你会看到这三个 UI 元素。尝试在 text field 里输入——它已经支持所有标准的编辑快捷方式：复制、粘贴、剪切、全选、撤销、重做等。但是按钮毫无反应，label 只是显示了 “Label”，所以是时候让它们更具交互性了。

配置 UI

回到 Main.storyboard 然后点击选中那个 button。在右侧的 实用工具 面板中，确保显示 Attributes Inspector——顶部的第 4 个按钮。

将 button 的标题改为 “Say Hello”。该按钮可能不够宽，无法显示所有文本，所以打开 Editor 菜单然后选择 Size to Fit Content，应该能解决这个问题。（如果 Size to Fit Content 是灰色的，点击任意其他地方来取消选中按钮，然后重新选择它试试。）

现在点击 text field 以选中它。在这个 app 中，用户会在这里输入他们的名字，如果点击按钮，app 会在 label 里显示 “Hello 这里是名字”。要帮助用户使用，使用 Attributes Inspector 以为 text field 添加一些 placeholder 文本。

把 text field 拉大一点，以便可以输入长名字，然后把按钮拖到它的右边。在 View Controller Scene 里拖动对象的时候，会出现蓝色的线以帮助你排列和放置对象，基于苹果人机界面指南（Apple’s Human Interface Guidelines）。

把 label 放在 text field 和 button 下方。由于 label 会是最重要的那个，所以让它的字体再大一点。在 Attributes Inspector 里选择 label，将字体改为 System Regular 30。

不如让文本变成红色，更刺激一点？

你无法知道用户可能会输入多长的名字，所以调整 field 的大小以适应该字体的高度，宽度填满窗口。

构建并运行 app，以检查 UI 改动是否生效。如果你对 label 中文字的外观感到满意，就删除 label 的标题，以便 label 从空开始。

把 UI 连接到代码

这个 app 仍然不知道你想干什么，但为了使它工作，需要开始添加代码，该代码必须能够与 UI 通信。要做链接的话，需要使用 Xcode 的 Assistant Editor。在 Main.storyboard 可见的情况下，在 Project Navigator 中按住 option 点击选中 ViewController.swift。这将创建包含 ViewController 代码的第二个编辑器面板。

根据显示器的大小，现在可能看起来有点局促，所以使用工具栏中最右边的按钮来隐藏实用工具。如果需要更多空间，就隐藏导航器。

选中 text field。按住 Control 键并从 text field 拖动到 ViewController 类声明的顶部。放开，在弹出框的名称框中输入 nameField，然后单击 Connect。

对 labe 执行相同操作，将其命名为 helloLabel。

看看 Xcode 生成的代码，你会看到这些都有 @IBOutlet 标记。这是 Interface Builder Outlet 的简写，告诉 storyboard 编辑器这些对象名称可用于链接到可视对象。

对于按钮，代码不需要有名字，但它需要知道用户何时点击按钮。这需要一个 @IBAction 而不是一个 @IBOutlet。

选中按钮并按住 Control 拖动到 ViewController.swift 中。这次，将Connection 弹出窗口更改为 Action，并将名称设置为sayButtonClicked。这将创建按钮被点击时调用的函数。

现在一切准备就绪，可以写代码了。使用右上角的 X 来关系 Assistant Editor，然后切换到 ViewController.swift。如果您已隐藏导航器，请单击右上角的切换按钮，或按 Command-1 直接跳转到项目导航器。在sayButtonClicked 中输入以下代码。

var name = nameField.stringValue
if name.isEmpty {
  name = "World"
}
let greeting = "Hello \(name)!"
helloLabel.stringValue = greeting

构建并运行 app。单击 Say Hello 按钮而不输入任何内容，你会看到 “Hello World！”。现在输入你的名字，然后再次点击按钮查看你自己的个人问候。

调试

有时候，程序员会犯错误——我知道这很难相信，但事实就是这样。Xcode 允许我们在任意点停止代码，逐行运行，检查每个点的变量值，以便我们可以找到错误。

找到 ViewController.swift 里的 sayButtonClicked 并单击 var name = 旁边的行号。将出现一个蓝色的矩形。这是一个活动断点，单击按钮，调试器将停止在这里。再次点击它，它会变成浅蓝色。它现在是一个非活动断点，不会停止代码并启动调试器。要完全删除断点，请将其拖出行号。

再次添加断点并运行 app。点击 Say Hello 按钮。Xcode 会跳到前面来，断点代码行高亮显示。在编辑器面板的底部，现在将有两个新部分：变量和控制台。变量部分显示此函数中使用的变量以及 self——视图控制器和sender——按钮。

在变量显示器上方是一组用于控制调试器的按钮。将鼠标放在每一个上，阅读提示，看看它是做什么的。单击 Step Over 按钮移动到下一行。

在变量显示器中，你可以检查 name 是否为空字符串，因此再单击 Step Over 两次。调试器将移入并通过 if 语句，并将 name 变量设置为 “World”。

在变量显示器中选择 name 变量，然后单击下面的 Quick Look 按钮以查看内容。现在单击 Print Description 按钮以查看打印在控制台中的信息。如果“World”值没有正确设置，你将能够在这里看到，并尝试修复代码。

检查 name 变量的内容后，点击 Continue program execution 按钮以停止调试，让程序继续。使用右上角的按钮来隐藏调试区域／

图片

除了代码和用户界面，app 还需要一些插图。由于不同的屏幕类型（Retina 和非 Retina），经常需要提供每个 asset 的多个版本。为了简化这个过程，Xcode 使用 Asset Libraries 来存储和组织应用程序附带的 assets。

在项目导航器中，单击 Assets.xcassets。到目前为止唯一的项目是 AppIcon，它包含用于显示 app 图标所有分辨率所必需的图片。点击AppIcon——你可以看到它需要 10 个不同的图片来覆盖所有的可能性，但如果你提供任意一个，Xcode 也会尽可能利用它。这不是好的做法，因为你应该提供所有需要的图标尺寸，但对于本教程来说，一个图标就足够了。

下载示例图标，它是一个 512 x 512 像素的图像。将其拖动到 Mac 512pt 1x 框中。

构建并运行 app，以查看 Dock 栏中的图标。如果仍然看到的是默认 app 图标，请退出 HelloWorld 应用程序，返回 Xcode 并在 Product 菜单里选择 Clean，然后再次运行 app。

获取帮助

除了作为一个编辑器，Xcode 还包含编写 macOS 应用程序所需的所有文档。

打开 Help 菜单，然后选择 Documentation and API Reference。搜索NSButton。确保 Swift 是所选语言，然后单击顶部搜索结果，就可以阅读有关按钮和按钮属性的所有详细信息。

还有一种方法可以直接从代码中获取相关文档。回到 ViewController.swift 并找到 sayButtonClicked 中的第一行。按住 Option 单击 stringValue 这个单词。弹出窗口显示了简短的描述。在弹出窗口的底部是属性引用的链接。单击此链接，文档将打开以显示更多信息。