【译】初学者的 MacOS 开发教程：第一部分

2018-01-09  本文已影响0人  z_k

初学者的 MacOS 开发教程：第一部分
原文

你想开发自己的 macOS APP 吗？
好消息！苹果公司使得 Mac 开发非常简单，在这个系列的教程里你会发现这一点。你将学会创建你的第一个 Mac APP ，哪怕你是一个完全的新手。

你还在等什么？桌面 APP 的世界在等待你。
注意：这是从哪开始这个系列的一些指导

开始

成为一个 Mac 开发者，你需要两件东西：

  1. 一台运行 macOS Sierra 的苹果电脑：macOS 操作系统只能运行在苹果电脑上，所以你需要一台苹果电脑来开发和运行 APP。
  2. Xcode：这是用来创建 macOS APP 的集成开发环境，在这节的后面你将学习如何安装。
    一旦你创建了自己的 APP，如果你想上传到 APP Store 进行分发，你还需要购买一个 Apple 开发者账户。但是直到你准备好把你的 APP 发到全世界之前，这不是必须的。甚至到那时，只有你想通过 APP Store 分发程序时才需要。如果你已经有一个开发者账号来分发 iOS APP，那你已经全部准备好了，苹果已经合并了开发者账号，使得你只需要一个账号就可以在所有苹果设备上分发 APP 了。
    不像其他平台，开发 macOS 应用，只需要安装一个工具：Xcode。Xcode 是一个 IDE（集成开发环境），它包含开发 macOS、iOS、watchOS、tvOS 所需要的全部东西。
    如果你还没有 Xcode，点击菜单左上角的 Apple 图标，选择 App Store 打开 Mac App Store。你将需要一个 App Store 账户，尽管 Xcode 是免费。搜索 Xcode 然后点击 Install 按钮开始下载。一旦下载安装完可以从 Applications 文件夹打开它（可能要花一点时间，它非常大）。第一次运行 Xcode 时，更新完每一个主要更新后，它会向你请求安装附加组件的权限。输入密码，允许 Xcode 安装这些组件。

Hello World！

按照长久以来的传统，学习一门新语言或平台是时，你将从创建一个 Hello World macOS APP 开始。
如果还没有运行 Xcode，请打开它。你将看到一个 Welcome to Xcode 窗口，如果没有看到，可以从 Window 菜单里选择。
点击 Create a new Xcode project，下一步对话框出现时，从顶部的选项卡里选择 macOS。在 Application 部分选择 Cocoa Application，然后点击下一步。为你的 APP 取个名字 HelloWorld，确保语言选择 Swift，并且 Use Storyboards 是选中的。取消其他所有选项。点击下一步，创建并保存你的 APP 项目。

运行你的 APP

Xcode 已经为你创建了基本的模板，它包含 APP 所需的全部文件。这时，运行程序看看你免费获得了多少东西是很有趣的。
点击工具栏上的 Play 按钮或者按 Command-R 快捷键运行 APP。Xcode 将把所有代码编译为机器码，并将 APP 所需的资源文件捆绑在一起，然后执行它。
注意：第一次在 Xcode 里构建和运行APP，你可能会被要求是否激活开发模式（Enable Developer Mode on this Mac）。选择 Enable 是安全的，这时你必须输入要密码。开发模式允许 Xcode 附加一个调试器来执行进程，这个调试器在构建应用时非常有用。
你将看到一个空窗口，但是不要失望——看看你已经能对它做什么：

Xcode 接口

Xcode 将大量的特性打包的一个小的包里，所以不是每杨东西都能同时看到。要成为一个高效的 Xcode 用户，你要知道每样东西在哪里，如何得到它。当你在 Xcode 里打开一个新项目，你将得到一个带有工具条的窗口和三个主面板。
最左边的面板是导航面板，顶部有 8 个显示选项。最经常用的是第一个 Project，它列出项目中的文件，允许你点击其中任何一个来编辑它。中间的是编辑面板，它将显示你从项目导航器里选择的任何东西。右边是工具面板，它将根据编辑面板中的内容不同而变化。

添加 UI

使用 Storyboard 来设计用户接口。你的项目已经有一个 storyboard，到项目导航面板上单击 Main.storyboard 文件，在编辑面板中显示它。
你的屏幕显示发生了显著变化！在编辑面板中，你可以看到文档大纲和 UI 可视编辑器。
看一下你在可视编辑器中可以看到的东西。有三个主区域，每一个在文档大纲中都有文本的表示。

配置 UI

回到 Main.storyboard，点击 button 来选择它。确保右边工具面板上的 Attributes Inspector 是显示的——顶部第4个按钮。
将按钮的标题改为 “Say Hello”，它的宽度可能不够显示所有文本，到编辑菜单上选择 Size to Fit Content 来修正它（如果 Size to Fit Content 是失效的，点击其他地方取消选择按钮，然后再重新选择按钮试试）。
现在单击 text field，在这个 APP 中，用户将在这里输入姓名，当用户点击按钮，APP 将在标签中显示 “Hello name-goes-here!”。为了帮助用户，用属性检查器（Attributes Inspector）添加一些站位文本到 text field 中。延伸一下 text field 让它能显示长的名字，把按钮放在它的右边。当在视图场景里面拖动对象时，会基于 Apple’s Human Interface Guidelines，显示蓝线来帮助对齐和定位对象。
将标签放在 text field 和 button 的下面。因为标签很重要，让它使用一个更大的字体。选择标签，然后在 Attributes Inspector 中将字体改为 System Regular 30。
将文本颜色改为红色，增加更多的兴奋怎么样？
你不知道用户输入的名字会有多长，所以将文本区域的高度改为适应字体的高度，宽带差不多填满窗口。
编译运行 APP，看看你对 UI 的改变是否生效。一旦你对文本标签感到满意，就可以删除标签的 Title 了，让它开始时是空的。

连接 UI 和代码

你的 APP 仍然不能按你的想的去做，为了让它工作，需要添加代码，并让代码和 UI 之间能够通信。为了建立连接，你将使用 Xcode 的辅助编辑器。在 Main.storyboard 可见的同时，按着 Option 键点击项目导航面板中的 ViewController.swift 文件。这将创建包含 ViewController 代码的第二个编辑面板。
根据显示器尺寸的不同，桌面上的东西看起来可能会有点狭窄，可以使用工具条最右边的按钮来隐藏工具面板。如果需要更多空间，可以隐藏导航面板。
选择 text field。按住 CTRL 键从 text field 拖到 ViewController 类定义的顶部，然后放开。在弹出对话框中的名称里文本框里输入 nameField，点击 Connect。Label 标签同样的做法，把它命名为 helloLabel。
看一下 Xcode 生成的代码，它们都用 @IBOutlet 进行标注。它是 Interface Builder Outlet 的缩写，用来告诉 storyboard 编辑器，这些对象名称是用来连接到可视对象的。
对于按钮，代码不需要有关它的名称，但是需要知道什么时候用户点击它。要用 @IBAction 来替代 @IBOutlet。
像前面一样，选择按钮，按住 CTRL 拖到 ViewController.swift。这次将连接改为 Action ，名称设置为 sayButtonClicked。这样当用户点击按钮时就会调用这个函数。
现在所有东西都准备好，可以编辑代码了。点击右上角的 X 关闭辅助编辑器，转到 ViewController.swift。如果你隐藏了导航面板，点击右上角的切换按钮或者直接按 Command-1 跳到项目导航器。
输入下面的代码到 sayButtonClicked 方法：

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

在 ViewController.swift 里完整的代码现在看起来像这样（删除顶部版权信息后）。行号旁边的小圆圈表示一个连接到 storyboard 接口的连接。
编译运行 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），你经常需要提供每个资源的多个版本。为了简化这个过程，Xcode 使用 Asset Libraries 来存储和管理伴随 APP 的资源。
在项目导航器里，点击 Assets.xcassets。到目前只有唯一的一个条目是 AppIcon，它包含在所有分辨率下显示 APP 图标所需的不同的图片。点击 AppIcon，可以看到它需要 10 个不同的图片来覆盖不同的可能性。如果你提供了它们中的一个，Xcode 将以最优的情况来使用它。当你需要提供所有 icon 尺寸时，这不是一个好的实践，但是在这个教程中一个 icon 就足够了。
下载这个 sample icon 512x512 的像素图片。把它拖到 Mac 512pt 1x 盒子里。
编译运行 APP 看看 Dock 菜单里的图标。如果你仍然看到默认的 icon，退出 HelloWorld APP，回到 Xcode ，从 Product 菜单选择 Clean，然后再次运行 APP。

获得帮助

Xcode 不但是一个编辑器，它还包含编写 macOS APP 时所需的文档。
到 Help 菜单选择 Documentation and API Reference。搜索 NSButton，确保 Swift 是选择语言。点击最上面的搜索结果，这样就可以看到按钮和按钮属性的细节了。
还有一个方法可以直接从代码得到相关的文档。回到 ViewController.swift，找到 sayButtonClicked 中的第一行。按住 Option 点击 stringValue。会弹出一个包含简短描述的对话框。对话框的下面有一个 Property Reference 连接。点击这个连接将打开文档窗口，显示更多信息。
Option-clicking 经常是一个很好的学习方式，你甚至可以向自己的函数添加文档，以同样的方式显示出来。
帮助菜单还包含 Xcode Help，关于 Xcode 环境的详细信息。
在这个系列教程的下一部分，你将开始创建一个更复杂的 APP。希望在那里看到你！

上一篇下一篇

猜你喜欢

热点阅读