今天來簡要介紹下Apple Watch中的Table組件，以及構(gòu)建一個簡單的基于Table的Watch App。

簡介

WatchKit，顧名思義，是由蘋果官方提供的用于開發(fā)Apple Watch App的框架。在WatchKit中，Table組件對應(yīng)于iOS中的Table View。但和Table View相比，Table有不少局限，主要體現(xiàn)在以下幾個方面：

1. 由于Watch App通過藍(lán)牙連接來和匹配的iPhone進(jìn)行交流，所以對于Table的更新應(yīng)盡可能減少，以免造成更新不及時的情況。
2. Table對應(yīng)的WKInterfaceTable類沒有使用iOS中UITableView相關(guān)的循環(huán)機制，所有的Row都會在Table展示前創(chuàng)建好。因此，基于性能考慮，Table的Row數(shù)量通常限制在20以內(nèi)。
3. WatchKit中的UI組件必須在Storyboard中進(jìn)行布局，且沒有AutoLayout功能，因此布局方式十分受限。
4. Table中每一種類型的Row都必須有一個對應(yīng)的Controller來進(jìn)行管理，Table沒有DataSource和Delegate。

創(chuàng)建 Watch App

打開Xcode，選擇Create a new Xcode project，選擇watchOS -> Application -> iOS App with WatchKit App。我將這個工程取名為WatchTable，且不勾選其它任何選項，進(jìn)行創(chuàng)建。創(chuàng)建后的工程結(jié)構(gòu)如下圖所示：

工程結(jié)構(gòu)

可以看到，整個工程分為以下4塊：

1. WatchTable文件夾對應(yīng)于iOS的開發(fā)代碼。
2. WatchTable WatchKit App文件夾包含watchOS的Storyboard。
3. WatchTable WatchKit Extension文件夾包含watchOS的開發(fā)代碼。
4. Products文件夾包含生成的App。

選擇WatchKit App進(jìn)行運行，既能夠在Watch Simulator中看到運行結(jié)果。

運行選項

配置 Watch App

Interface.storyboard

打開watchOS的stroyboard，拖入一個Table組件，將其Row數(shù)量設(shè)為2，在一個Row中拖入一個Label，在另一個Row中拖入一個Image，并在Attributes inspector中進(jìn)行相應(yīng)設(shè)置，如下圖所示：

Watch 界面

Row Controller

在WatchTable WatchKit Extension文件夾下新建兩個文件，用于管理兩種不同類型的Row。選擇File -> New -> File -> watchOS -> Source -> WatchKit Class 進(jìn)行創(chuàng)建，選擇Subclass of為NSObject，分別命名為LabelRowController和ImageRowController。

對先前在Storyboard中創(chuàng)建的兩個Row的Class分別進(jìn)行設(shè)置。結(jié)果如下：

設(shè)置Row Class

將Label Row中的Outlets進(jìn)行連接，此時LabelRowController中的代碼如下：

import WatchKit

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

將Image Row中的Outlets進(jìn)行連接，此時ImageRowController中的代碼如下：

import WatchKit

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

InterfaceController

在InterfaceController中執(zhí)行主要邏輯。首先將Table組件Outlet到InterfaceController中：

@IBOutlet var table: WKInterfaceTable!

awakeWithContext相當(dāng)于iOS中的ViewDidLoad函數(shù)，在這里對Table進(jìn)行setRowTypes配置。因為WatchKit的Table中，每種類型的Row都有一個Controller進(jìn)行控制，所以需要在Table顯示前，對所有Row進(jìn)行配置。各種Row的表示用Identifier來進(jìn)行區(qū)分。

回到Storyboard中，將兩種Row的Identifier分別設(shè)置為LabelRow和ImageRow，如下所示：

LabelRow

ImageRow

接著，我打算設(shè)置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對應(yīng)的row，以進(jìn)行content配置。

運行

至此，一個非常簡單的基于Table的Watch App就構(gòu)成了。運行后結(jié)果如下圖所示：

運行結(jié)果

結(jié)語

最終Demo已經(jīng)上傳到這里，希望這篇文章對你有所幫助^_。