macOS开发入门教程 : Part 2

原文：macOS Development for Beginners: Part 2
作者：Sarah Reichelt
译者：kmyhy

欢迎回来！

在本系列的第一部分，你学习了如何安装 Xcode，如何创建 App，添加 UI，连接 UI 到代码，运行 App，调试 App 以及如何获取帮助。如果你没有掌握这些内容，请回到第一部分进行学习。

在这一部分，你将创建一个更复杂的 APP 的 UI。你将学习如何使窗口可以拉伸大小，导航到第二个窗口以显示 App 的偏好设置。

开始

打开 Xcode，在欢迎界面，点击创建新 Xcode 项目，或者同第一部分一样用 File/New/Project… ，然后选择 macOS/Application/Cocoa Application。点 next,将 App 取名为 EggTimer，语言用 Swift ，勾上 Use Storyboards 。点击 Next，选择项目保存地址。

编译运行 App，检查是否有错误发生。

EggTimer App

这个 App 叫做 EggTimer，它从指定的时间开始倒计时。有一张图片，当你的鸡蛋煮熟后，它会改变。同时播放声音。第二个窗口用于显示 App 的偏好设置。

Window Controller

在开始设计 UI 之前，确保你在项目导航器中选中了 Main.storyboard。在 Window Controller 中点击，选中它下面的 window。在可视化编辑器中，Window Controller 显示为 View Controller，因为它包含了 View Controller。在这个 App 中，你想让窗口大小不小于 346x471。这也是窗口的初始大小。

对 UI 进行布局 1

基本的 UI 包含了两个 Stack View。第一个包含了属于时间和鸡蛋图片。第二个包含了 3 个按钮。首先从按钮开始：

1. 从 Object Library 中搜索 “Button” 。
2. 拖一个 Gradient button 到 View Controller 上。
3. 在属性面板中，删除它 的 image，将 title 改为 Start。
4. 将 font 改为 System 24。

对 UI 进行布局 2

第二个 stack view 包含剩余计时时间和图片。拖一个 label 到 view controller 中，将它的 title 改为 6:00，Alignment 改为居中。当前系统字体（San Francisco）使用等间距数字，也就是说如果你有一个计数器，数字显示会随着它们的改变跳来跳去——这很烦。

为了避免这个，将 font 改成 Helvetica Neue，大小为100。这样 labe 就显得太小了，因此拉伸它直到你觉得合适。

连接 UI 和代码

和第一部分中一样，要连接 UI 和代码必须创建 @IBOutlet 和 @IBAction。对于这个窗口，你需要为下列 UI 元素创建 @IBOutlet：

• 倒计时标签
• 鸡蛋图片
• 3 个按钮

这 3 个按钮也需要 @IBAction，当用户点击它们时才会触发方法。在项目导航器中，选中 Main.storyboard。

在项目导航器的 ViewController.swift 上点击 Option+左键，打开 Assistant 编辑器。如果你的屏幕空间不够，用右上角的按钮隐藏工具面板和导航器。

选中倒计时标签，control+左键拖到 ViewController 类中，和第一部分中所做的一样。设置 name 为 timeLeftField。对 Image view 重复同样步骤，设置 name 为 eggImageView。为按钮创建 IBOutlet 分别命名为 startButton、stopButton 和 resetButton。

按钮还需要创建 @IBAction。从 Start 按钮用 control + 左键拖一条线，但 Connection 中设为 Action，name 设置为 startButttonClicked。重复同样步骤在剩余按钮上，分别创建两个 IBAction 叫做 stopButtonClicked 和 resetButtonClicked。

如果你像我一样经常会搞忘记将 Connection 修改为 Action，你最终会得到两个 @IBOutlet 而没有 @IBAction。要删除多出来的 @IBOutlet，先在 ViewController 中删除多余的代码。然后打开工具面板中的连接面板。

你会看到在 Referencing Outlets 下面有两个 Outlet。点击错误的那个 Outlet 右边的 X，将它删除。然后重新创建 @IBAction，这次不要忘记修改 Connection 了。

菜单

在 Main.storyboard 中，点击菜单条或者 Application Scene 以选中它。 App 模板默认提供了一些菜单，但对于这个 App，绝大部分都是用不到的。找到菜单的最简单办法是使用文档树。用倒三角按钮去展开视图的菜单和它的内容。

// MARK: - IBActions - menus @IBAction func startTimerMenuItemSelected(_ sender: Any) { startButtonClicked(sender) } @IBAction func stopTimerMenuItemSelected(_ sender: Any) { stopButtonClicked(sender) } @IBAction func resetTimerMenuItemSelected(_ sender: Any) { resetButtonClicked(sender) }

这些函数将通过菜单调用，它们会调用按钮的 action 方法。你也可以直接让菜单项调用按钮的 action 方法，但我使用的这种方式是为了在调试时更容易看出事件的调用顺序。保存文件，关闭助手编辑器。

Control+左键，从 Start 菜单项拖一条线到橙黄色立方块（即 First Responder）。弹出一个菜单，显示一个常常的选项列表。输入 sta 快速定位，然后选择 startTimerMenuItemSelected。

偏好设置窗口

连接偏好设置中的对象

Option+左键，在项目到导航器中点击 PrefsViewController.swift，如果屏幕空间不足，请隐藏两边的窗口。你需要为 popup 按钮、slider 和“6 minutes”标签创建 @IBOutlet。Control+左键，从每个控件拖到 PrefsViewController.swift 文件并分别命名为：

• Popup: presetsPopup
• Slider: customSlider
• Label: customTextField

然后，右键+左键，创建 @IBAction，请记得将 Connection 改成 Action：

• Popup: popupValueChanged
• Slider: sliderValueChanged
• Cancel button: cancelButtonClicked
• OK button: okButtonClicked

你的代码会变成这个样子：

App 图标

UI 中还剩一个工作就是为 App 添加图标。你之前已经下载过 App 的图片资源，其中的部分图片已经导入到项目的 Assets.xcassets 中了。再次打开下载的文件夹，找到 egg-icon.png 文件。

在项目导航器中选择 Assests.xcassets，点击 AppIcon，然后将 egg-icon.png 拖到 Mac 256pt 1x 方框中。正如在第一部分中所说，对于真正的 App，你应该提供所有尺寸的 AppIcon，但在这里，只需要一个尺寸就够了。

结束

现在 App 的 UI 就实现完了，但 App 还没有功能。如果你有某些地方不对，可以从这里下载已经实现好整个 UI 的 Xcode 项目，它是为下一部分教程准备的。

在第三部分，你会添加让 App 工作起来的代码。

有任何问题和建议，请在下面留言。