【干货实战】使用 Swift 开发WatchKit入门教程(二)
导读：昨天凌晨苹果发布了AppleWatch，优才网作为全网第一家做SwiftiOS培训的在线教育网站...
导读：昨天凌晨苹果发布了 Apple Watch，优才网作为全网第一家做Swift iOS培训的在线教育网站当然也要奉上实战干货，不过我们不愿意给大家制作 一篇 Hello World 视频，也不愿意写篇很浅显的技术文章，所以优才网独家翻译了raywenderlich 上的这篇很棒的入门教程。昨天的公众号发布了第一部分，今天的是第二部分。
基本的WatchKit代码
起始项目包括一个名为BitWatchKit的框架，包含一些自定义代码来获取比特币的价格。我们把这个代码做在框架里，因此它可以同时在iPhone应用程序中使用，在iPhone WatchKit扩展中也可以很容易地使用。
将这个框架添加到您的扩展中，打开导航器中的项目文件，并选择BitWatch WatchKit扩展的target。选择General选项卡，然后向下滚动到Linked Frameworks and Libraries部分。
Watch扩展
点击框架列表下的+按钮。你会看到一个窗口，其中列出了可用来添加的框架，你应该看到BitWatchKit.framework就在列表的顶部。选择它，然后单击添加。Watch框架
现在，框架添加进来了，你可以用一些真实的数据更新您的Watch界面！
切换到InterfaceController.swift的WatchKit Extension组。 将以下import语句添加到文件的顶部：
import BitWatchKit
这将允许您访问框架中定义的Tracker类。
接下来，在类定义中添加以下属性：
let tracker = Tracker()var updating =false你需要使用Tracker 实例来通过网络获得比特币价格。您将使用updating变理来标识，是否有一个挂着的“更新价格”的请求。
添加下面的辅助方法到类中：
private func updatePrice(price:NSNumber){
priceLabel.setText(Tracker.priceFormatter.stringFromNumber(price))}这个方法需要一个NSNumber值来更新Watch 上的标签。Tracker还包括一个方便的数字格式，将使用一些像93.1这样的数字能转换成一个字符串，如“$93.10”。
增加一个辅助方法到类中：
private func update(){// 1if!updating {updating =true// 2let originalPrice = tracker.cachedPrice()// 3
tracker.requestPrice {(price, error)-> ()in// 4if error ==nil{self.updatePrice(price!)}self.updating =false}}}让我们一步一步地回顾一下：
1、运行快速检查，以确保你没有在更新中。
2、缓存目前的价格，所以只需要在价格发生变化更新UI界面。
3、requestPrice()是Tracker上的方法，通过网络请求来获取最新比特币价格。 一旦完成，它执行了一个闭包。
4、如果请求成功，所有你需要做的是调用 updatePrice()来更新标签。
现在，你只需要从某处调用这些方法来获得真实的数据，显示在界面上。
界面生命周期你的第一个机会，就是在awakeWithContext(_:)中设置您的界面元素，而此时，整个界面被加载，并且Action和Outlet被连接起来。
这意味着你可以设置界面对象，并开始显示数据。然而，到目前为止该界面还不必要放到Watch上去！因为重要的是使事情达到一个合理的状态：你可能不希望进行昂贵的操作，如进行网络调用。
将以下内容添加到awakeWithContext 结尾处：
updatePrice(tracker.cachedPrice())
这将使用先前缓存值（如果存在的话）更新价格标签。因为这个值是由被Tracker 所缓存的，它是本地数据，获取起来代价很小。
以下内容添加到willActivate() 的尾部
update()
willActivate就像iOS 中的viewWillAppear。并且意味着界面即将激活，并出现在Watch中。这是一个很好的刷新数据的信号，因此在这里调用update() ，以开始网络请求，并且更新标签。
最后，将相同的代码行添加到refreshTapped ：
update()
当用户点击Refresh，你想要同样的事情发生：调用update() ，并显示一些新的数据。
测试您的应用程序
要测试你的Watch应用程序，你需要让Watch作为外部显示器。 如果你的iPhone模拟器有应用在运行，切换到它。 否则，构建和运行应用程序，在Xcode把它停掉，然后再切换回iOS模拟器。在菜单中，导航到HardwareExternal Displays，并选择一个Apple Watch选项。
Watch模拟器
返回到Xcode中，选择工具栏中的BitWatch Watch App 方案，并选择iPhone 6模拟器。
Watch方案
构建并运行，然后切换到模拟器。你应该在苹果Watch 看到Bitcoin的数据！
手表APP1
更多的界面
现在，您已经基本入门了，现在来看看你可以使用界面来做的更多的东西。
在本应用中，还有两个你想要在Watch 上实现的元素：
- 最后更新时间
- 向上/向下图像，以显示价格是否增加或减少
起始项目包括两个图像文件：Down@2x.png和Up@2x.png。从finder窗口，拖动这两个文件到图像集合列表中。
看asset
注意，图像唯一的@2x的变体也包括在内。在WatchKit 中你只需要@2x 的图像– 因为没有非Retina屏的Apple Watch！接下来，再次打开Interface.storyboard，返回到布局。
将另一个标签拽到界面上，并把它放到Reresh按钮上面。设置标签文本为Last Updated ,并且将字体设置为Custom, Avenir Next, Regular, 和尺寸
13。也改变文本对齐方式为Center。
对定位的设置，改变Horizontal位置属性设置为Center和Vertical位置属性设置为Bottom。
手表storyboard5
你可能会想：如果Refresh按钮、这个新标签的定位属性均设置为底部，Watch是知道如何，用什么样的顺序来放置他们？
在iOS上，在文档大纲中，视图顺序确定了z-order，或者确定了哪个视图“在顶部”或在别的视图“后面”。而针对Watch界面，界面元素不重叠，所以没有必要跟踪z-order。相反，在文档概要中的顺序反映了垂直的从顶部至底部的顺序（结合垂直对齐设置）。
Watch 外观
要明白我的意思，在大纲中交换Refresh和Last Updated控件的顺序- 你会看到它们在Interface Builder中直观地交换好了。当你完成时，再换回来
分组到目前为止，你的Watch 界面包括堆积在彼此顶部的界面对象。那么，我们如何一个个并排对象呢？
供您使用的另一个对象是组 。组就像容器，你可以把界面对象放在他们里面。 然而，它们也具有是否应该水平或垂直地布置它们所包含元素的设置。你可以通过在组中嵌套组，使用不同布局来获得各种不同的界面放置！
注：组可以是有背景颜色和图片的界面元素。在这个应用程序中，除了它们是如何对布局做贡献之外，对用户是不可见的（译者注：因为本应用中的组，没有背景颜色和图片，所以不可见）！
下面是看起来像在iPhone应用程序中的价格上升/下降的指示器：
Watch app剪头
所以，总体规划是在标签旁边放置一个图片。
将一个新组从对象库拖动到故事板中，并把它放在price标签和last updated标签之间。在Attributes inspector中，确保组的布局设置为Horizontal 。
手表storyboard6
接下来，将一个图片控件从对象库拖动到组控件里面。然后把一个新的标签拖动到组中，并将其放置在图像的右侧。
Watch storyboard7
这样就有两个对象并排在一起，但现在问题是，如何设置它们的位置和大小。
位置和大小选择标签并同时改变其Horizontal和Vertical 位置属性为Center 。对图片控件做相同的操作。
由于图像和标签是一个组内，它们在组中居中，而没有在外部故事板作为一个整体的对象中。这意味着，组四处移动，以及因为某种原因被调整尺寸，图像和标签都会停留在组的正中心。
默认情况下，大多数界面对象都可将其size属性设置为Size to Fit Content。这非常适用于标签，因为文本可能会改变。然而，箭头图片是在资源包中的，并且有一个已知大小，你可以在故事板中设置大小。这意味着Watch在后面将不需要计算尺寸。
选择图像，并且在Attributes inspector中找到Size部分。更改Width设置为Fixed Width 和高度设置为 Fixed Height。同时设置width和height值为32。
手表大小
集成界面
如果只是把标签放到故事板中，标签的文本不会改变。改变其文本为 1BTC，并且将其字符修改为：Custom, Avenir Next, Regular, 和尺寸 13。
此图像将根据先前比特币的价格而改变（译者注：以前价格比当前价格低还是高），因此你需要一个outlet。打开辅助编辑器，按下Ctrl键，从图像拖动到类定义中。命名为image outlet ，然后单击Connect 。
对于“Last Updated”标签,你需要另外一个 outlet 。按下Ctrl键，从标签拖动到类定义，并命名为lastUpdatedLabel，然后单击Connect 。
这就是它的所有界面– 在开始跟踪你的Bitcoin 资产前。如果从代码更新布局，需要更多一些的代码和一些技巧。
集成代码
打开InterfaceController.swift。 有两个新的事情要处理：“lastupdated”标签和图像。
添加下面的辅助方法到类中：
private func updateDate(date:NSDate){self.lastUpdatedLabel.setText("Last updated (Tracker.dateFormatter.stringFromDate(date))")}
此方法像 price标签更新一样，更新last updated 标签。同样，Tracker具有格式化器对象，在这种情况下，将格式化日期，以只显示时间。
增加一个辅助方法到类中：
privatefunc updateImage(originalPrice: NSNumber, newPrice: NSNumber) {
if originalPrice.isEqualToNumber(newPrice){
// 1
image.setHidden(true)
} else {
// 2
if newPrice.doubleValue >originalPrice.doubleValue {
image.setImageNamed("Up")
} else {
image.setImageNamed("Down")
}
image.setHidden(false)
}
}
此方法将比较原来的价格与新的价格。
1、如果这两个价格都是一样的，隐藏的箭头图像。
2、如果这两个价格不一样，根据价格的变化，设置图片为“向上”或者“向下”，同时取消隐藏图像，使其再次可见。
调用setHidden将导致布局重排。记得如何将图片和“1 BTC”标签都居中放在组里面么？当你隐藏图片，这将会使标签左侧空出额外的空间来。然而，该界面足够聪明，重新计算布局，并且移动标签，以让标签仍然是组内部的中心。
注意：您可以隐藏的东西，并通过使用setAlpha来设置界面对象的alpha属性为0，而仍然让他们“占用空间”。
现在，辅助方法到位，你需要调用它们。
下面的几行添加到awakeWithContext 的尾部：
image.setHidden(true)
updateDate(tracker.cachedDate())
因为你在启动时，没有任何以前的价格信息，在开始时您有一个隐藏的图像。价格从缓存中来，当然你也可以从缓存中去抓取日期。
接下来，找到update()并添加以下行到最里面if块里。就是有if error == nil {条件的那个块：
self.updateDate(NSDate())
self.updateImage(originalPrice, newPrice:price!)
这将更新 last updated标签来显示当前时间。在这里，也同时得到先前的价格和新价格，然后如果价格发生了变化可以使用updateImage显示向上或向下箭头的图像。
构建和运行监视应用程序看看模拟器。
源数据每分钟更新一次，这样你就可以等待一分钟，然后点击Refresh按钮，获得最新的比特币的价格。你能负担得起的纯金Apple Watch版本了吗？]
下面如何开始？
这里是上面WatchKit教程的最后一个示例项目。下载地址：
http://cdn1.raywenderlich.com/wp-content/uploads/2014/11/BitWatch-Final-1.2.zip
恭喜你 - 你现在知道制作WatchKit应用程序的基础知识了！
但是，还有很多东西要学 -包括额外的界面对象，导航和切换传递（指Hand Off）。并记住，这仅仅是学习了一种类型的应用程序WatchKit的制作 - 你也可以制作Glances（类似于Today扩展），或自定义可操作的推送通知等。
翻译：优才网
作者：Greg Heo
原文：
http://www.raywenderlich.com/89562/watchkit-tutorial-with-swift-getting-started
(长按上面二维码，即可关注优才网公众账号)
优才网也提供Swift 方向的iOS全栈工程师培训，想要了解更多内容，请阅读原文。
关注 优才网
微信扫一扫关注公众号
