今天來簡要介紹下Apple Watch中的Table組件屋休，以及構(gòu)建一個簡單的基于Table的Watch App臂寝。
簡介
WatchKit凳干，顧名思義彰阴，是由蘋果官方提供的用于開發(fā)Apple Watch App的框架锐帜。在WatchKit中田盈，Table組件對應于iOS中的Table View。但和Table View相比缴阎，Table有不少局限允瞧，主要體現(xiàn)在以下幾個方面：
- 由于Watch App通過藍牙連接來和匹配的iPhone進行交流，所以對于Table的更新應盡可能減少蛮拔，以免造成更新不及時的情況瓷式。
- Table對應的WKInterfaceTable類沒有使用iOS中UITableView相關(guān)的循環(huán)機制，所有的Row都會在Table展示前創(chuàng)建好语泽。因此贸典，基于性能考慮，Table的Row數(shù)量通常限制在20以內(nèi)踱卵。
- WatchKit中的UI組件必須在Storyboard中進行布局廊驼，且沒有AutoLayout功能，因此布局方式十分受限惋砂。
- Table中每一種類型的Row都必須有一個對應的Controller來進行管理妒挎，Table沒有DataSource和Delegate。
創(chuàng)建 Watch App
打開Xcode西饵，選擇Create a new Xcode project酝掩，選擇watchOS -> Application -> iOS App with WatchKit App。我將這個工程取名為WatchTable眷柔，且不勾選其它任何選項期虾，進行創(chuàng)建。創(chuàng)建后的工程結(jié)構(gòu)如下圖所示：
可以看到驯嘱，整個工程分為以下4塊：
- WatchTable文件夾對應于iOS的開發(fā)代碼镶苞。
- WatchTable WatchKit App文件夾包含watchOS的Storyboard。
- WatchTable WatchKit Extension文件夾包含watchOS的開發(fā)代碼鞠评。
- Products文件夾包含生成的App茂蚓。
選擇WatchKit App進行運行，既能夠在Watch Simulator中看到運行結(jié)果。
配置 Watch App
Interface.storyboard
打開watchOS的stroyboard聋涨，拖入一個Table組件晾浴，將其Row數(shù)量設為2，在一個Row中拖入一個Label牍白，在另一個Row中拖入一個Image怠肋，并在Attributes inspector中進行相應設置，如下圖所示：
Row Controller
在WatchTable WatchKit Extension文件夾下新建兩個文件淹朋，用于管理兩種不同類型的Row。選擇File -> New -> File -> watchOS -> Source -> WatchKit Class 進行創(chuàng)建钉答，選擇Subclass of為NSObject础芍，分別命名為LabelRowController和ImageRowController。
對先前在Storyboard中創(chuàng)建的兩個Row的Class分別進行設置数尿。結(jié)果如下：
將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中執(zhí)行主要邏輯右蹦。首先將Table組件Outlet到InterfaceController中：
@IBOutlet var table: WKInterfaceTable!
awakeWithContext相當于iOS中的ViewDidLoad函數(shù)诊杆，在這里對Table進行setRowTypes配置。因為WatchKit的Table中何陆，每種類型的Row都有一個Controller進行控制晨汹，所以需要在Table顯示前，對所有Row進行配置贷盲。各種Row的表示用Identifier來進行區(qū)分淘这。
回到Storyboard中，將兩種Row的Identifier分別設置為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就構(gòu)成了贤姆。運行后結(jié)果如下圖所示：
結(jié)語
最終Demo已經(jīng)上傳到這里朦佩，希望這篇文章對你有所幫助_。
