从零开发一款为Apple Watch准备的心跳应用原型

说明：

1.阅读本文需要一点点的iOS开发基础。当然，即便你完全不懂iOS开发，也可以照着教程操作一遍，大概体验下iOS开发的感觉。

2.本文编译自raywenderlich.com，仅供学习目的，相关权益归原作者所有

2014年的WWDC上，我们从彼时还未正式出柜的Tim Cook口中听到许久未曾听到的那句话，”One more thing…”。然后就是那款被无数人鄙视，又被无数人期待的Apple Watch揭开了它神秘的面纱。

按照苹果官方的消息，WatchKit SDK将在本月晚些时候发布，不过即便如此，开发者们（特别是注重健康医疗的创业者）也需要开始思考，在这个小小的屏幕上，究竟能给用户带来多大的惊喜呢？

我们可以如何在这个小屏幕上设计自己的应用？我们又将如何利用Apple Watch已经公开的特性，以及未来可能添加的新特性？

于是问题来了，WatchKit只有在本月底才会公开，而真正的手表硬件则要等到2015年（据说是2015年的春天），那么此时我们可以做些什么呢？

好消息是：这个世界上不乏好人，有人专门编写了一款可以运行在iPhone和iPad上的Apple Watch模拟器应用。有经验的开发者可以利用自己熟悉的界面编辑器、故事板和Swift代码来搭建一个Apple Watch原型应用。

在这篇教程里，我们会使用Apple Watch模拟器来体验这款硬件的视觉效果。当然，苹果官方即将公布的WatchKit SDK可能和这个模拟器有非常大的区别，不过至少你可以使用这个原型来尝试一下自己的一些想法，让自己领先于其他人（这一点非常重要）。

开始前的准备

Apple Watch有一些新特性，当我们开始考虑为它设计应用的时候，一定要把这些牢牢记在心里。首先，它有一个灵活的反馈机制，可以区分轻触和重按的区别，这就是所谓的Force Touch。这一点对于太空射击游戏（以后你会在地铁上看到一些奇怪的人对着手表咬牙切齿。。。）来说非常有用，比如轻触代表机枪扫射，而重按则代表发射导弹。

Apple Watch还有一个美其名曰“数字皇冠”的侧边滚轮。通过旋转这个滚轮，我们可以收集到某一维度的动作信息，以便缩放地图和图片，或是滑过一个列表。

震动马达则异常精妙。我们将可以感觉到不同部位的震动。比如当我们使用GPS导航时，用户可以感受到向右转和向左转的震动区别。

最后，Apple Watch还提供了一个传感器，可以通过红外线、可见光LED和二极管来检测你的心跳。在这篇教程中，我们将基于这个心跳传感器来开发一款应用原型。

Watch Simulator（手表模拟器）

我们将基于一个Watch Simulator项目来开始这篇教程。从这里下载它，然后在Xcode中将其打开。

接下来在Xcode中打开Main.storyboard。

此时我们将在Main View Controller Scene中看到一个模拟手表，此外还有一个内嵌的App View Controller Scene，其中放置了我们这款应用的用户界面。当你开始设置UI时，别忘了在App View Controller Scene里面添加所有的视觉元素。

首先，我们将设置用于显示用户心率(heart rate）的标签。从Xcode右侧的Object Library中拖出一个Label控件，放到App View Controller 中。

选中该标签，在Xcode右侧面板中切换到Attributes Inspector，然后将标签的文本内容更改为80（text,而不是font size）

接下来，将Color属性设置为white，透明度调整为60%。

接着在Xcode的底部点击Pin按钮，外形有点像星球大战里面的外星战机（四个小图标按钮中的第二个）。取消对Constrain to Margins的勾选，然后将右侧的约束更改为4，将底部的约束更改为-1.将Update Frames更改为Items of New Constraints。

最后，点击Add 2 Constraints以添加约束，并更新布局。

这个时候你会看到标签移到了视图的右下侧。

因为用户的心跳会发生变化，因此我们需要关联一个outlet，以便从代码中更改相关数值。

打开Assistant Editor，然后确保AppViewController.swift也在编辑器中打开。如果没有就从顶部的跳转栏中选择。按住Ctrl键，从标签拖出一条线到类定义的部分。

将outlet命名为bpmLabel，然后点击Connect。

好！现在我们就可以看到有完整的视图了。

创建数据模型

现在我们的视图部分已经设置完成，下一步就是创建数据模型。我们需要找一个地方来保存心跳数据。对这款应用来说，它包含了一个图标，一些描述性的文字，以及精确的心率数据。

在Project Navigator中，右键单击WatchSimulator 群组，然后选择New File… 选择iOS\Source\Swift File模板，然后点击Next。

将文件命名为BeatPattern.swift，然后点击Create。

打开BeatPattern.swift，然后使用以下代码替换其中的内容：

1 2 3 4 5 6

import UIKit struct BeatPattern{ var  icon =  "" var  description =  "Mid-range" var  bpm = 80 }

通过以上代码，我们设置了之前提到的属性结构体。当然，我们更愿意使用emoji表情符号，而不是图像，这也是我们使用String而不是UIImage的原因。

接下来添加一个计算过的属性到结构体中。

1 2 3

var  duration: Double {    return  60.0 / Double(bpm) }

该属性将高速用户每次心跳需要多长时间。如果你对数学感兴趣，那么可以看看它是如何计算的：

60 seconds/minute ÷ X beats/minute = Y seconds/beat

这就是我们所需要的数据模型，还有传说中的算法（即便如此简单！）。此外，因为我们给这些属性提供了默认数值，因此不需要显式定义。Swift将会使用init:description:bpm:自动创建初始化。

显示心跳

根据用户的心率，应用会显式不同的图标，因此我们需要接下来定义这些范围。

打开AppViewController.swift,然后在类中添加以下属性：

这里用到了一些emoji表情符号，部分浏览器可能无法正常显式这些字符，因此上面用了截图。不过这里提供了一个包含了以上代码的文本文件，我们可以下载并拷贝粘贴到自己的代码中。

接下来将以下两个属性添加到类中：

1 2	var  currentBeatPattern = BeatPattern() var  currentBeatPatternIndex = 0

以上代码将把当前的心率使用所定义的结构体保存。

接下来我们需要一个标签来显示emoji表情符号。这里我们不考虑使用storyboard，而是使用代码来实现。在类中添加另外一个属性：

1	let iconLabel = UILabel()

现在我们已经有了这个标签，接下来需要设置并添加到视图中。在viewDidLoad方法的结束添加以下代码：

1	self.view.insertSubview(iconLabel, atIndex: 1)

以上代码将把标签添加到视图中。为了设置标签，接下来要添加以下方法：

1 2 3 4 5 6

override func viewWillAppear(animated: Bool) { super .viewWillAppear(animated) iconLabel.frame = self.view.bounds iconLabel.textAlignment = .Center iconLabel.font = UIFont.boldSystemFontOfSize(132) }

通过以上代码，我们将图标标签的大小设置为整个表屏幕大小。因为显示出来的是单个emoji表情符号，所以我们需要一个132的大字体尺寸。

你可能会想，为何不把这段代码放到viewDidLoad中呢？尽管视图是在viewDidLoad中加载的，但子视图还没有准备就绪，通过等待一会儿调用viewWillAppear(animated:)，我们可以确保添加了新的视图，并把它们放在正确的位置。

不过考虑到这只是个模拟，我们可以按顺序循环可用的心率。添加以下方法处理循环：

1 2 3 4 5 6 7 8 9 10 11

func newBeat() { //1 if  ++currentBeatPatternIndex == beatPatterns.count { currentBeatPatternIndex = 0 } //2 currentBeatPattern = beatPatterns[currentBeatPatternIndex] //3 bpmLabel.text =  "\(currentBeatPattern.bpm)" iconLabel.text = currentBeatPattern.icon }

这里是对以上代码（按注释顺序）的解释：

1.首先我们递增当前的序号，以切换到下一个心跳模式。当我们抵达了最后一种模式，而且新的编号已经达到数组边界时，将编号重设为0，以便重新开始

2.使用新的编号，我们可以使用数组设置currentBeatPattern

3.设置视图中两个标签的数值，注意我们使用了Swift的字符转换。

接下来，我们将添加一个计时器来循环调用newBeat()。

添加一个新的方法如下：

1 2 3 4

override func viewDidAppear(animated: Bool) { newBeat() NSTimer.scheduledTimerWithTimeInterval(8, target: self, selector: Selector( "newBeat" ), userInfo: nil, repeats:  true ) }

以上方法将调用newBeat()，以便开始启动，接下来会设置一个计时器，每隔8秒钟调用newBeat()，并更新视图。

现在编译运行，每隔8秒钟，心跳的色彩图标会更好，而心率数据也会更新。

添加心率动画

最后一件要做的事情，就是在8秒的循环内，添加一个小的动画让心跳看起来是真实的。记住Apple Watch自带传感器，可以检测到真实的心跳，因此显示实时数据会显得更酷。

在AppViewController.swift中添加两个新属性：

1 2 3 4

let shrinkFactor = CGFloat(2.0 / 3) var  expandFactor: CGFloat { return  1.0 / shrinkFactor }

这里的shrinkFactor代表心跳将在动画中的收缩比例，而expandFactor则和shrinkFacgor相反。

通过这种方式，我们可以让心跳看起来没有那么像素化。假定你有一个500像素的图片。如果将其收缩到300像素，然后返回500像素，那么久永远不会超过原始分辨率，保持图像的清晰锐度。尽管Emoji表情符号是矢量字体，但是当在标签中使用时，会被当做像素图来处理。

接下来添加以下方法处理真实的动画：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

func beat() { // 1 UIView.animateWithDuration(currentBeatPattern.duration / 2, delay: 0.0, options: .CurveEaseInOut, animations: { // 2 self.iconLabel.transform = CGAffineTransformScale( self.iconLabel.transform, self.expandFactor, self.expandFactor) }, completion: { _  in // 3 UIView.animateWithDuration(self.currentBeatPattern.duration / 2, delay: 0.0, options: .CurveEaseInOut, animations: { // 4 self.iconLabel.transform = CGAffineTransformScale( self.iconLabel.transform, self.shrinkFactor, self.shrinkFactor) }, completion: { _  in // 5 self.beat() } ) } ) }

以上用到了一些嵌套动画，大概来解释下：

1.最外部的动画是整个效果的上半段，因此其持续时间是整个周期的一半。这里我们还用到了.CurveEaseInout动画效果，让心跳显得更自然。

2.在动画闭包内，将心率缩放为缩小后的大小

3.当放大动画完成后，我们希望开始下一半段，也就是另外一个动画，它的持续时间同样是整个周期的一半。

4.在第二个动画闭包内，区别在于我们将使用expandFactor，而不是shrinkFactor。

5.最后，在第二个动画的完整块中，我们使用了递归调用beat()。在一个周期完成后，另外一个会开始。

最后当然就是启动动画了。

只需要在viewDidAppear:方法的最后添加一行代码：

1

beat()

编译运行。当模拟器打开的时候，我们可以看到心脏的跳动，过一会儿会切换到另外一种心跳模式。

好了，当然这个教程只是让你有点初步的印象。

对于真正的WatchKit，还是让我们期待2014年11月底的苹果官方发布吧。