Table in WatchKit

今天来简要介绍下Apple Watch中的Table组件，以及构建一个简单的基于Table的Watch App。

---

简介

WatchKit，顾名思义，是由苹果官方提供的用于开发Apple Watch App的框架。在WatchKit中，Table组件对应于iOS中的Table View。但和Table View相比，Table有不少局限，主要体现在以下几个方面：

1. 由于Watch App通过蓝牙连接来和匹配的iPhone进行交流，所以对于Table的更新应尽可能减少，以免造成更新不及时的情况。
2. Table对应的WKInterfaceTable类没有使用iOS中UITableView相关的循环机制，所有的Row都会在Table展示前创建好。因此，基于性能考虑，Table的Row数量通常限制在20以内。
3. WatchKit中的UI组件必须在Storyboard中进行布局，且没有AutoLayout功能，因此布局方式十分受限。
4. Table中每一种类型的Row都必须有一个对应的Controller来进行管理，Table没有DataSource和Delegate。

---

创建 Watch App

打开Xcode，选择Create a new Xcode project，选择watchOS -> Application -> iOS App with WatchKit App。我将这个工程取名为WatchTable，且不勾选其它任何选项，进行创建。创建后的工程结构如下图所示：

工程结构

可以看到，整个工程分为以下4块：

1. WatchTable文件夹对应于iOS的开发代码。
2. WatchTable WatchKit App文件夹包含watchOS的Storyboard。
3. WatchTable WatchKit Extension文件夹包含watchOS的开发代码。
4. Products文件夹包含生成的App。

选择WatchKit App进行运行，既能够在Watch Simulator中看到运行结果。

运行选项

---

配置 Watch App

Interface.storyboard

打开watchOS的stroyboard，拖入一个Table组件，将其Row数量设为2，在一个Row中拖入一个Label，在另一个Row中拖入一个Image，并在Attributes inspector中进行相应设置，如下图所示：

Watch 界面

Row Controller

在WatchTable WatchKit Extension文件夹下新建两个文件，用于管理两种不同类型的Row。选择File -> New -> File -> watchOS -> Source -> WatchKit Class 进行创建，选择Subclass of为NSObject，分别命名为LabelRowController和ImageRowController。

对先前在Storyboard中创建的两个Row的Class分别进行设置。结果如下：

设置Row Class

将Label Row中的Outlets进行连接，此时LabelRowController中的代码如下：

import WatchKit

class LabelRowController: NSObject {
    @IBOutlet var label: WKInterfaceLabel!
}

将Image Row中的Outlets进行连接，此时ImageRowController中的代码如下：

import WatchKit

class ImageRowController: NSObject {
    @IBOutlet var image: WKInterfaceImage!
}

InterfaceController

在InterfaceController中执行主要逻辑。首先将Table组件Outlet到InterfaceController中：

@IBOutlet var table: WKInterfaceTable!

awakeWithContext相当于iOS中的ViewDidLoad函数，在这里对Table进行setRowTypes配置。因为WatchKit的Table中，每种类型的Row都有一个Controller进行控制，所以需要在Table显示前，对所有Row进行配置。各种Row的表示用Identifier来进行区分。

回到Storyboard中，将两种Row的Identifier分别设置为LabelRow和ImageRow，如下所示：

LabelRow

ImageRow

接着，我打算设置2个LabelRow，1个ImageRow，故在awakeWithContext中添加如下代码：

let rowArray = ["LabelRow", "LabelRow", "ImageRow"]
self.table.setRowTypes(rowArray)

for i in 0 ..< 2 {
    let cell = self.table.rowControllerAtIndex(i) as! LabelRowController
    cell.label.setText("label \(i)")
}

let cell = self.table.rowControllerAtIndex(2) as! ImageRowController
cell.image.setImage(UIImage(named: "meow"))

其中，rowArray用于控制Table中各种不同Row的排列顺序。通过rowControllerAtIndex可以获取某个index对应的row，以进行content配置。

---

运行

至此，一个非常简单的基于Table的Watch App就构成了。运行后结果如下图所示：

运行结果

结语

最终Demo已经上传到这里，希望这篇文章对你有所帮助^_。