苹果WatchKit轻松入门

背景

前段时间苹果Apple推出 WatchKit，用于开发Apple Watch应用，同时也推出了 Xcode6.2 Beta（非稳定版，好期待稳定版）版本用于开发 Watch App。Apple Watch是苹果在智能穿戴领域的一个尝试，对于苹果和开发者都非常具有挑战。学会开发 WatchApp 将大幅度提高自己的竞争能力。

内容提要：

1、初识WatchKit

2、安装Xcode 6.2 Beta

3、iOS工程添加WatchKit支持

4、WatchKit项目结构和UI控件

5、主界面

6、Glance界面

7、通知界面

初识WatchKit

我们去Apple的官网的WatchKit的开发页面：

https://developer.apple.com/watchkit/

相当高大上吧，全是英文，英文没学好的话吃亏不？作为程序员，英语还是要尽量努力学习的，因为很多好的资源和开发环境都是英语的。扯远了...  ——||

苹果WatchKit App的特点：

1. 不少的智能手表的App是直接运行在手表中，受限于智能手表的内存和运算能力，不能运行很复杂的App。

2. 目前苹果的做法是：WatchKit分为两部分，一个WatchKit的扩展程序（Extension）以后台程序运行在你的智能手机iPhone上（充分利用iPhone的运算能力和内存），而Watch App运行在你的Apple Watch智能手表上，负责渲染界面，当你的App在Apple Watch上启动时，你的手表就从iPhone获取数据，展示运行结果。（自己的理解，有不对，请指正）

3. 当然了，Apple也承诺之后会允许真正运行在Apple Watch 上的 App 的出现，Apple Watch 和 WatchKit 的未来还是很值得期待的。
   

推荐一个大牛的博客，里面一篇《Apple WatchKit 初探》写得不错，值得学习。

http://onevcat.com/2014/11/watch-kit/

如果英语还不错，可以观看苹果的官方WatchKit开发介绍视频，那自然是极好的（甄嬛体）：

点击中间的播放按钮即可。

安装Xcode 6.2 Beta

目前Xcode的正式版是6.1.1，可是没有集成WatchKit。只有Xcode 6.2 Beta（测试版）集成了WatchKit，所以只好下来试试，期待含有WatchKit的Xcode正式版快些放出。

进入链接：https://developer.apple.com/xcode/downloads/

点击 Download Xcode 6.2 beta 3，会提示你登陆苹果开发者账号，没有的话注册一个。Xcode 6.2 beta 3有2.81GB，所以下载需要些时间，可以够你吃两三只烤鸡 :P 。下载完后双击 xcode_6.2_beta_3.dmg 这个文件，出现如下窗口（对苹果用户应该不陌生）：

只需要简单地将Xcode-Beta这个图标拖放到Applications那个图标上，就开始安装了，安装完大小是5GB多。然后可以在LaunchPad里打开或者在Applications里打开。也可以拖放到Dock里，以方便以后访问。

启动Xcode 6.2 Beta，

点击 Create a new Xcode project （创建一个新的Xcode项目）

我们选择iOS的 Single View Application，点击Next到下一步，

上图是项目的基本配置，项目名称我们叫做“HelloWatchKit”，随便取。Language（编程语言）选择Swift，毕竟是全新的苹果开发语言，老的Objective-C虽然好，但是上手没有Swift那么容易（其实关键是小编只会Swift...），而且苹果也会大力发展Swift。Next下一步，选择存放路径，默认就好，你也可以自己选择放在哪里。

iOS工程添加WatchKit支持

iOS项目创建好了，如何添加WatchKit支持呢？我们需要添加一个Target。可以点击 HelloWatchKit -> Add target 来添加

也可以点击 File -> New -> Target来添加

选择了添加Target之后，会弹出如下窗口，选择 iOS -> Apple Watch，点击Next

进入基本设置，记得勾选 Include Glance Scene（因为之后要用到Glance界面），如下图红色框所示

点击Finish按钮，就可以了。

接下来测试一下我们的工程。

选择运行目标是 HelloWatchKit WatchKit App（如下图红框所示），模拟器我选了默认的iPhone 6，点击左上角的灰黑色小三角（红框所示）来运行

苹果的Xcode的运行速度真的很快（虽然Google新发布的Android Studio已经很快了，但还是与Xcode速度上有些差距），立即就为我们呈现了 iPhone 6 和 Apple Watch的两个模拟器的运行状态

怎么样，有点意思不，我们继续学习吧。

WatchKit项目结构和UI控件

我们先来看一下Xcode为我们打开的项目：HelloWatchKit

在左边的项目列表里，点开HelloWatchKit WatchKit App这个目录，再单击Interface.storyboard，在中间就会显示其可视化的界面。我们可以看到有三个界面，最上面的是Main Interface（主界面），在它下面是Glance Interface（Glance界面），Glance是英语：反光; 瞥见 的意思。所以Glance界面是一个用于呈现信息的即时界面，如果不需要也可以把它挥扫掉或者点击一下重新进入主界面Main Interface（我们一般在智能手机上体验过的每个软件更新后，打开下面有好几个白色小圆点的，你要一一扫过才能进入主界面的，那几个就是Glance界面）。在Glance Interface下面是Notification Interface（通知界面），当Apple Watch手表接收到一个通知时，就会进入通知界面，也可以从通知界面再回到主界面。

Apple Watch的程序是写在WatchKit Extension这个目录下的（在我们的项目中就是HelloWatchKit WatchKit Extension）。里面有三个类：InterfaceController，GlanceController和Notification Controller（Controller是控制器的意思），分别对应上面我们介绍过的三个界面：主界面，Glance界面和通知界面。

我们再回到Interface.storyboard，点击Main Interface，可以看到右下角的控件栏显示了可以被添加到主界面的所有控件。目前还不多，一共大概13个控件。比如Group控件是一个布局容器，有垂直或水平之分。Table控件是用来呈现列表的。其他控件如Button（按钮），Label（标签）等大家应该不陌生。

主界面

为了测试，我们随便往Main Interface里拖进去几个控件，选中控件不放开直接拖到主界面上，我们拖了一个Switch（开关），一个Separator（分割线），一个Button（按钮）和一个Timer（计时器，会从零开始计时），此时我们的布局是默认的垂直布局，如下图

我们把目标选为HelloWatchKit WatchKit App，然后点击运行按钮。

可以看到运行起来后，除了Timer计时器控件没有显示，其他都显示了，这是因为我们没有把Timer置为Enabled（可用），我们选中Timer控件，把右上角的Enabled的勾打上，如下图红框所示。并且把Format（格式）改为下拉列表中的Short（短格式），再把Timer的框往右拉大一些（不然显示不全）。

再次运行程序，会看到如下图，Timer开始计时了，有趣吧

然后我们把Timer和Switch控件删除（用不着了），接下来我们选中Label控件，可以在右边配置它的属性，比如我们可以把Position（位置）中的Horizontal（水平）属性改为Center（居中），如下图，可以看到我们的Label由默认的靠左对齐变为居中对齐了，也可以更改Vertical（垂直）的属性为居中或靠底部对齐。

在界面中，我们除了可以添加各种控件，也可以配置界面的各种属性。例如，选中主界面，可以看到右上角的属性列表，我们可以配置它的背景颜色，在Color（颜色）那一栏，我们选择紫色，可以看到背景颜色变为很美的紫罗兰。

我们也可以添加背景图片，在Background（背景）那一栏，目前还没有图片可以选择（No Image）。我们来添加一张图片到工程中，随便拖放一张电脑里的图片到Supporting Files（支持文件）目录，在弹出的窗口点击Finish（完成），

可以看到我们的图片IMG_6090.JPG已经添加到我们的工程了。重新回到我们的Interface.storyboard，在主界面的属性列表里的Background一栏已经可以选择刚添加的图片了，选好后，则主界面如下图所示。

那么，我们如何和主界面中的控件来交互呢？我们来学习一个苹果Xcode的高级功能：Assistant Editor（助手编辑器）。默认的编辑器是Standard Editor（标准编辑器）。在左上角，点击红框所示的Show Assistant Editor，会发现Xcode为我们在Interface.storyboard右边打开了InterfaceController.swift这个文件（前面提到了，这个文件里的类正是控制主界面的），

接下来，很神奇的事情，我们选中主界面中的Label，按住ctrl键（不是cmd键），然后移动鼠标（如果你用触摸板操作，那就是按住触摸板移动），会发现出现一条蓝色的线，一端连接着Label，一端可以随意拖动，

把其拖动到InterfaceController类的第一个方法上面，则会弹出一个对话框，在对话框里填入myLabel这个名字（随便用什么名字），

点击connect（连接）按钮，则创建了一个Outlet（插座，出口），在程序中可以看到Xcode为我们生成了一段代码：@IBOutlet weak var myLabel: WKInterfaceLabel!

类似地，先将Button按钮的文字改为Click（点击），但是与刚才对Label的操作不一样的是，我们在弹出的对话框中不选择默认的Outlet类型，而是选择Action（动作）类型，因为Button按钮按下后我们要让其实现某些动作。名字填上myButton，点击connect生成myButton这个Action。在程序中可以看到Xcode为我们生成了一段代码：@IBAction func myButton() {}

你可以看到我们的InterfaceController.swift现在如下图这样

接着，我们在myButton这个Action的大括号里，写入一行代码：myLabel.setText("The Button is clicked”)

意思是，当Button按钮被按下后，Label的文字会改变为“The Button is clicked”

我们来测试一下效果，运行之后，如下图所示，我们点击Click按钮，可以看到Label文字变为“The Button is clicked”

Glance界面

看完了主界面，我们来学习一下Glance界面。在Glance界面中我们也拖进一个控件，用一个Label，把文字改为“Click To Show Main” （点击显示主界面），因为我们之前说过，我们可以从Glance界面点击一下返回主界面。

为了测试，我们先把运行的第一个界面设置为Glance界面（默认是运行主界面）。点击左上角的HelloWatchKit WatchKit App，在出现的下拉列表里选择 Edit Scheme （编辑体系），

会弹出如下图的窗口，我们在Excutable（可执行程序）的下拉列表里选择Glance - HelloWatchKit WatchKit App.app，然后点击Close（关闭）按钮。

重新运行。可以看到如下图，我们的启动界面变为了Glance界面

在Glance界面的任意位置点击一下，就回到了主界面，如下图，是不是很有意思。

通知界面

体验过了Main Interface（主界面）和Glance Interface（Glance界面），我们最后来看一下Notification（通知）界面。我们先用Edit Scheme把Excutable调为Notification - HelloWatchKit WatchKit App.app，点击Close按钮关闭

运行一下，可以看到通知界面的布局

从上到下有四个组件：HelloWatch那个是通知的标题；Test Message那个是通知的内容；First Button那个是一个按钮，点击会返回主界面；Dismiss（开除，解除）那个是另一个按钮，点击会关闭通知。

虽然没在真机上测试，是不能有实际的通知的，但我们可以用模拟器模拟通知的效果。当然大家也可以连接真机测试。

我们点击 HelloWatchKit WatchKit Extension目录下的Supporting Files目录中的PushNotificationPayload.apns这个文件，可以看到这个文件里面就是控制通知界面的一些代码。

我们再次点击HelloWatch Watch App目录下的Interface.storyboard，看到Glance Interface下面的就是我们的通知界面。

我们可以在PushNotificationPayload.apns这个文件修改通知文本的显示，比如我们将First Button改为“Show Main Interface”，运行，如下所示，

点击Show Main Interface，则回到我们的主界面。

后记

至此，对于WatchKit已经大体介绍完了。苹果的WatchKit开发包的能力远不止此，我们只是演示了基本的知识点。而且因为WatchKit刚放出不就，相信以后应该会越来越强大。祝愿可穿戴设备越走越好，未来可穿戴设备一定举足轻重。

* 您若觉得本文不错，请点右上角“分享到朋友圈”

* 新朋友请关注「程序员联盟」，公众号：ProgrammerLeague

本文出自 “Oscar” 博客，转载请与作者联系！