第一章：Hello，Apple Watch！

Apple Watch：来自于库比蒂诺最酷的产品？我相信有很多的人都会回答，“Yes！”。所以，我以尽可能快的速度第一时间拿到了这款Watch，然后为我的iPhone从4S升级到6找了一个非常合适的理由:]

如果你完全是因为为了开发Watch应用，而正在非常兴奋的阅读本书的话，这一章将会带着你，用一种非常爽的体验去创建一款基本的Watch应用，并且会在模拟器中运行，这里将是你一切开始的地方。

在开始的时候，我们将会运行一个空的Watch应用模板。然后，将会添加一个标签（label）并显示“Hello，World！”文本。最后，我们将会改变label为下面这样：

001.png

最后，我们会让你的Watch应用更有趣些，随机显示一组表情符号：

002.png

我可以非常荣幸的向大家保证：这将是一章有趣的、成功的、有用的、刺激的和非常酷的内容，让我们开始吧！

开始

打开HelloAppleWatch开始项目，构建并运行：

003.png

这个简单的iPhone应用只是利用表情符号显示了Hello，Apple Watch！点击按钮会在底部视图看到新的东东，我们所创建的Apple Watch应用就要完成这些个事情。

注意：如果你现在没有苹果的开发者账号，又想在iPhone和Watch上面运行的话，需要看苹果的Launching Your App on Devices Using Free Provisioning，百度搜搜吧！

与开发iPhone应用使用故事板和通过视图控制器显示和控制UI的方法相同，一个Apple Watch应用也要使用故事板和一个Interface Controller。做到这点，你需要添加一个Watch应用到项目的Target之中。

注意：在将来，如果你开发的Watch应用不是基于现存的iPhone应用，则可以使用New Project的模板watchOS\Application\iOS App with WatchKit App。这样Target中就直接创建好Watch应用了。

从Xcode菜单中选择 File\New\Target...

004.png

在target模板窗口中选择watchOS\Application\WatchKit App,注意不是iOS\Apple Watch\WatchKit App。

005.png

点击Next按钮。在target选择窗口中，将Product Name设置为HelloAppleWatch WatchKit App，Organization Name设置为你自己的个人信息，取消Include Notification Scene的勾选，点击Finish按钮。

006.png

在弹出的窗口中点击Activate按钮，这时在Xcode的Scheme菜单中会创建一个可以运行Watch应用的选项。可以尝试做这样的事情：从Scheme菜单中选择HelloAppleWatch WatchKit App\iPhone 6 Plus + Apple Watch - 42mm。

007.png

构建并运行，可以看到两个模拟器：一个是iPhone 6 Plus，另一个是42mm的Apple Watch！第一次运行Watch应用，它可能会在模拟器出现的时候花费一些时间，苹果现在尽可能的让模拟器去反应真实设备的性能。

最终，Watch模拟器将会显示应用程序的默认启动画面，以及一个黑色屏幕，在屏幕的右上角则是时间显示。

008.png

Watch和iPhone模拟器都是一个独立的Mac应用，他们拥有自己的菜单。

此时，有两个全新的Group出现在项目导航中：

1. HelloAppleWatchWatchKitApp包含了Interface.storyboard，它用于应用的界面布局。
2. HelloAppleWatchWatchKitAppExtension包含了InterfaceController.swift，它与iOS上的UIViewController相同。

009.png

创建Watch应用的流程与iPhone的相似：在故事板中设置UI，然后将UI通过outlets和actions关联到控制器。

Hello，World！

让我们从传统的“Hello，World！”应用程序开始:]

一个简单的label，在Attributes Inspector中设置文本。就是如此简单的操作，可以让大家充分领略Apple Watch界面的功能和限制。我们将会在第三章“UI Controls”，学习创建Apple Watch界面的更多技能。

打开Interface.storyboard。在本章，不需要编辑区域左侧的大纲视图，点击左下角的方块儿按钮将其关闭。然后显示Utilities区域和Object Library。

010.png

在搜索过滤器中输入label，从对象库中拖拽一个label到唯一的这个Interface controller中。在Attributes Inspector中可以看到label的自定义选项。

011.png

默认时候，label位于界面的左上角。与iOS界面设计不同，我们不可以随意的去通过拖拽的方式移动label——如果你坚持这样的话，它会再次回到界面的左上角位置。但是，通过Attributes Inspector可以让我们进行简单的位置控制——设置label的文本和屏幕居中：

1. 设置Text为Hello，World！
2. 设置Alignment\Horizontal为Center
3. 设置Alignment\Vertical为Center

012.png

注意：当我们在Attributes Inspector中修改Text属性的时候，内容的改变是不会马上反应到界面中去的，知道我们按下回车键。我们也可以双击label本身去改变Text的内容。

注意到Size\Width和Size\Height都是Size to Fit Content，这代表了label的大小与文本内容自适应。

013.png

构建并运行Watch应用，你会看到下面的情况：

014.png

祝贺你创建了自己的第一个Watch应用。

使用代码设置label的text属性

我们想让这款Watch应用能够有些动态的东东，至少可以在控制器中通过代码设置label的text。这样我们需要在InterfaceController.swift文件中创建outlets。

打开assistant editor（助手编辑器）并且设置Automatic，这样就会自动显示InterfaceController.swift文件。

015.png

选择label，然后按住Control键并拖拽鼠标从label到InterfaceController.swift中，类声明代码下方的空白区域处。Xcode会提醒我们Insert Outlet。释放鼠标以后会弹出一个面板，如下图所示。检查类型是WKInterfaceLabel，设置Name为label后点击Connect。

016.png

@IBOutlet var label: WKInterfaceLabel!

代码是对Watch界面中label的引用，因此我们就可以使用它来设置text了。

添加下面的代码到willActivate()的super.willActivate()的下方:

label.setText("Hello, Apple Watch!")

构建并运行App：

017.png

完美！你现在已经添加了一个label到Watch界面中，并且通过代码设置了它的text。你已经在做一件另自己印象深刻的事情————编写代码并运行在自己的Watch应用上。

Apple的颜色表情字体

文本在小小的Watch表盘上挤得要命。如果文本的字体再大些或者文字再多些，可能就需要将label的Lines属性值从1改为0，这将会告知label——你可以显示多行文本信息。

但是，在当前的这个应用中是不需要这样做的，因为我们将会使用Apple‘s color emoji字体替代文本，它会节省更多的空间并且还很有趣！

首先，选择故事板中的label，然后点击Attributes Inspector中Font属性中的T icon，在弹出的字体设置面板中，改变Font为System，以及将Size改为24，点击Done。

018.png

接下来，编辑InterfaceController.swift中的Hello，Apple Watch！字符串。

1. 选择Hello然后按Control-Command-Space键，在弹出的表情视图中找到搜索框。
2. 在搜索框中输入waving，鼓掌的表情会出现，点击它替换之前的Hello。

019.png

重复这一步骤替换Apple、Watch和惊叹号为表情符号。删除字符串之间的逗号和空格，最后成为这样：

020.png

构建并运行App：

021.png

一个超级Cool的应用！

铸造表情符号的应用

在iPhone和Watch App上共享EmojiData.swift

打开EmojiData.swift文件：它包含一个Int的extension，里面只有一个简单的random()函数和五个表情数组：people、nature、objects、places和symbols。我们可以使用这些表情做出很有意思的事情。我们也可以随意的向数组中增加更多的表情符号。

let people = ["😄", "😙", "😔", "😣", "😕", "👯", "💁"]
let nature = ["🐣", "🍀", "🌺", "🌴", "⛅️", "🐋", "🐺"]
let objects = ["🎁", "⏳", "🍎", "🎵", "💰", "⌚️"]
let places = ["✈️", "♨️", "🎭", "🚲", "🎢"]
let symbols = ["🔁", "🔀", "⏩", "⏪", "🆒"]

在iPhone和Apple Watch设备中共享文件最简单的方法是在项目导航中右击EmojiData.swift文件，然后选择New Group from Selection。设置group的名称为Shared，然后将该group移出HelloAppleWatch文件夹，这样就可以让它同时在HelloAppleWatch和HelloAppleWatch WatchKit App使用了。

打开Shared组，选择EmojiData.swift并且在File Inspector中的Target Membership部分，勾选HelloAppleWatch WatchKit App Extension。这样，InterfaceController.swift就可以使用EmojiData.swift了。

023.png

创建随机表情

在InterfaceController.swift中

1. 在@IBOutlet语句的下面，awakeWithContext(_:)函数的上面，创建一个EmojiData对象：

  let emoji = EmojiData()

2. 在willActivate()中，使用下面的代码替换label.setText()。最后一行label.setText开头的代码，必须写在一行上，绝对不能用回车换行。

// 1
let peopleIndex = emoji.people.count.random()
let natureIndex = emoji.nature.count.random()
let objectsIndex = emoji.objects.count.random()
let placesIndex = emoji.places.count.random()
let symbolsIndex = emoji.symbols.count.random()
// 2
label.setText("\(emoji.people[peopleIndex])
  \(emoji.nature[natureIndex])\(emoji.objects[objectsIndex])
    \(emoji.places[placesIndex])\(emoji.symbols[symbolsIndex])")

random()产生一个随机数，上面的代码：

1. 为每个数组在0和数组中元素个数间产生一个随机数；
2. 使用五个随机数所获取的表情创建一个label的text。

构建并运行Watch应用，看看这次的运气如何呢？

开启下一个运气

在模拟器中运行后，我们可以看看运势如何，但是要获取下一个运势，必须要回到Home界面。我们需要一个按钮，这样在点击它以后会得到一个新的运势！实现起来并不难，并且还可以重构我们的代码。

替换label为button

打开Interface.storyboard并删除label——没错，是删除！拖拽一个button到Interface controller中：它将贴靠到顶部，但我们将会让它占据大部分的屏幕。这样，点击任何地方都会得到新的运势。

在Attributes Inspector中，设置按钮的Font为System 22.0，Alignment\Horizontal为Center，Alignment\Vertical为Bottom。设置按钮的Size \Height为Relative to Container值为0.9—这让按钮的高度为屏幕的90%。

024.png

当用户点击按钮，放在willActivate()中的代码就应该已经运行了。我们需要再写一遍，并且将它放在一个自定义的方法中，这样，不管是willActivate()还是用户点击按钮的话，都会调用它。

打开InterfaceController.swift，在willActivate()的下面添加一个新的方法：

func showFortune() {
}

拷贝之前添加到willActivate()中，super.willActivate()下面的所有代码，粘贴到showFortune()方法中，然后将willActivate()方法中的代码替换为调用showFortune()的代码，文件看起来像下面这样：

override func willActivate() {
  super.willActivate()
  showFortune()
}
func showFortune() {
  let peopleIndex = emoji.people.count.random()
  let natureIndex = emoji.nature.count.random()
  let objectsIndex = emoji.objects.count.random()
  let placesIndex = emoji.places.count.random()
  let symbolsIndex = emoji.symbols.count.random()
  // 2
  label.setText("\(emoji.people[peopleIndex])
    \(emoji.nature[natureIndex])\(emoji.objects[objectsIndex])
       \(emoji.places[placesIndex])
}
\(emoji.symbols[symbolsIndex])")

label.setText()？我们不是已经从Interface controller中删除了label吗？我们会尽快为button建立关联。打开Interface.storyboard。在assistant editor模式下，在label的IBOutlet代码上面建立button的关联。在弹出的菜单中，检查Type是WKInterfaceButton，Name为button。

OK，现在将showFortune()方法中的label.setText替换为button.setTitle，在Interface.storyboard中删除label的IBOutlet关联。

接下来，为button建立IBAction关联，从按钮Control-drag鼠标到showFortune()方法的下面。这次，在弹出的面板中确保Connection为Action，action的名字为newFortune，点击Connection。

025.png

我们会看到空的方法：

@IBAction func newFortune() {
}

在newFortune()方法中我们只需要做一件事情，调用showFortune()方法：

  showFortune()

完善我们的App

最后一件事情：添加一个背景图片。打开HelloAppleWatch WatchKit App\Assets.xcassets和Attributes Inspector。点击+按钮并选择New Image Set。修改Name为Cookie，勾选Devices\watchOS\Apple Watch并且拖拽38mm.png和42mm.png到对应的位置。

026.png

027.png

构建并运行，让Watch告诉你现在的运势吧！