AppleWatch開發入門四——Table視圖的應用

AppleWatch開發入門四——Table視圖的應用

1、Watch上的Table

        WatchOS中的TableView和iOS中的TableView仍是有很大的區別，在開發以前，首先咱們應該明白WatchOS中的Table有哪些侷限性和特色。下面幾點是我總結WatchOS中Table的特殊之處：

一、Table只有行的概念，沒有分區的概念，沒有頭尾視圖的概念。

二、能夠經過建立多個Table，來實現分區的效果。

三、由於Watch上是經過Gruop進行佈局適應的，因此沒有行高等設置。

四、Table沒有代理，全部行的數據都是採用靜態配置的方式，後面會介紹。

五、點擊Table中的行觸發的方法，是經過重寫Interface中的方法來實現的。

2、建立一個Table

        在storyBoard中拖入你的Table，以下：

        

在Table上拉兩個label：

每個Table中包含一個TableRowController，實際上咱們Table上的控件都是經過這個TableRowController進行管理的，所以若是咱們須要在代碼中控制TableRow上的內容，咱們須要建立一個文件做爲Table的TableRowController：

將storyBoard中TableRowController的類修改成咱們建立的類並指定一個identifier：

 

                 

而後，咱們將兩個label關聯到TableRowController中：

import WatchKit
class TableRowController: NSObject {

    @IBOutlet var numberLabel: WKInterfaceLabel!
    @IBOutlet var titleLabel: WKInterfaceLabel!
}

 

將Table關聯到interfaceController中：

class InterfaceControllerMain: WKInterfaceController {
    
    @IBOutlet var Table: WKInterfaceTable!

}

 

下面，咱們開始在interface中對Table作相關配置，首先咱們能夠先觀察一下WKInterfaceTable中有哪些方法和屬性：

public class WKInterfaceTable : WKInterfaceObject {
    //設置行的類型，數組中對應存放行的類型，數組元素的個數，就是行數
    /*
    經過這個方法，咱們能夠建立每一行樣式都不一樣的table，行的類型
    實際上就是咱們剛纔用到的TableRowController，咱們能夠進行自定義
    */
    public func setRowTypes(rowTypes: [String]) 
    //設置行數和類型 用於建立單一行類型的table
    public func setNumberOfRows(numberOfRows: Int, withRowType rowType: String) // repeating row name
    //這個get方法獲取行數，用於咱們遍歷table中的行，進行內容設置
    public var numberOfRows: Int { get }
    //這個方法會返回某一行，咱們能夠獲取到後進行內容設置
    public func rowControllerAtIndex(index: Int) -> AnyObject?
    //插入一行
    public func insertRowsAtIndexes(rows: NSIndexSet, withRowType rowType: String)
    //刪除一行
    public func removeRowsAtIndexes(rows: NSIndexSet)
    //滑動到某一行
    public func scrollToRowAtIndex(index: Int)
}

 

瞭解了上面的方法，能夠看出，WatchOS的Table配置很是簡單易用，例如咱們以下配置：

@IBOutlet var Table: WKInterfaceTable!

    override func awakeWithContext(context: AnyObject?) {
        super.awakeWithContext(context)
        let dic:Dictionary<String,String> = ["中國建設銀行":"￥1000","中國農業銀行":"￥5000","中國銀行":"20000","招商銀行":"￥401","中國郵政儲蓄":"1100"]
        //設置行數與類型
        Table.setNumberOfRows(dic.count, withRowType: "TableRowController")
        //遍歷進行設置
        let titleArray:Array<String> = Array(dic.keys)
        for var i=0 ; i < dic.count ; i++ {
            let row:TableRowController = Table.rowControllerAtIndex(i) as! TableRowController
            row.titleLabel.setText(titleArray[i])
            row.numberLabel.setText(dic[titleArray[i]])
            row.numberLabel.setTextColor(UIColor.grayColor())
        }
        // Configure interface objects here.
    }

 

這樣一個展現銀行卡餘額的界面咱們就建立完成了，效果以下：

3、關於Table的點擊事件

        上面咱們提到，Table沒有所謂代理方法，點擊row的時候，咱們也是經過兩種方式進行邏輯跳轉的，一種是在storyBoard中，咱們經過拉線跳轉，這時如需傳值，咱們需在interface中實現以下方法：

 public func contextForSegueWithIdentifier(segueIdentifier: String, inTable table: WKInterfaceTable, rowIndex: Int) -> AnyObject?

        另外一種方式，咱們能夠重寫實現InterfaceController中的以下方法，來處理Table的點擊事件：

public func table(table: WKInterfaceTable, didSelectRowAtIndex rowIndex: Int)

        不管哪一種方式，咱們均可以經過參數table和rowIndex來確認點擊的具體是那個table和哪一行，進行傳值和處理咱們的邏輯。             

 

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：203317592