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