AppleWatch___学习笔记（二）UI布局和UI控件

1.UI布局

　　直接开发，你会发现Apple Watch并不支持AutoLayout，WatchKit里有个类叫做WKInterfaceGroup，乍一看像是UIView，但是这货其实是用来布局的。从 Storyboard中拉一个WKInterfaceGroup出来，在属性检查器（Attributes Inspector）中有个Layout属性，通过设置成Horizontal或Vertical，就可以让这个group下所有的子视图水平排列或竖直排列。再结合AutoLayout的知识，就可以轻松满足要求啦。

　　首先，watch的屏幕不大，目前只有38mm和42mm两个尺寸，我们不可能在 这个有限的空间里做非常复杂的界面效果，因此，在界面开发中，应该遵循便于使用和一目了然的原则。watch上的布局方式采用的是一种平面堆放的方式，不再有frame，也不再有约束，控件的布局方式只是一个挨着一个的平面堆放，也不可重叠。但在watch中，提供了group这样一种布局方式，可以让我 们在布局中体现自由与个性的方面。具体如何使用呢？

　　（1）首先简单布局介绍

       就是我们在不使用group的时候，watch的布局采用的是最基础的堆放方式，从上到下依次排开，例如，我们添加四个label，效果如下：

通过改变label的添加顺序，可以改变其上下位置：

这种方式的布局高度并没有限制，我们可以一直往下排列，在watch上，会出现滑动的效果：

    

　　（2）使用Group进行复杂的界面布局

        通过上面的布局方式，我们只能进行纵向的排列布局，这并不能达到我们的需求，WatchKit中提供那一套布局的模型：Group。

        可以这样理解，group就是将屏幕分成了几各分区，我们可以设置各个分区的排列方式，例如水平或者垂直，通过这样的思路，完成复杂的watch界面布局，例如下面的效果：

这样效果的一个界面，就是将在屏幕中添加了三个Group，最上面的Gorup设置为水平排列模式，在其中添加了两个按钮和一个分割线，中间一个Group是垂直排列模式，放入了一个选择器和一个按钮，最下面一个Group也是水平排列模式，放入了一个按钮和一个时间栏。　　　　Group在界面布局上，不仅可以起到分区屏幕的作用，其还可以设置一些属性来使布局更加漂亮。在storyBoard右侧的设置菜单中，我们可以对这些属性进行操作：

Layout：设置布局模式，分为水平布局和垂直布局两种

insert：可以设置内容区域偏移量，通过这个属性，我们可以使其中填充的控件四周留白

Spacing：其中填充的控件的间距

BackGround：设置Group的背景图案

Mode：设置背景图案的填充方式

Animate：出现时带动画

color：设置Group的背景颜色

Radius：设置Group的圆角度

（3）布局中控件的位置和尺寸设置

        在iphone中，我们使用frame或者约束来控制控件的位置和尺寸，在watch中则简单很多，尺寸和位置都是固定的模式，我们只需要做一些设置即可。

　　　1、控件尺寸的控制

        对于控件的尺寸，有三种模式，控件的width和Height都是通过这三个模式设置的：

Relative to Container：自身的尺寸是按照容器的尺寸比例设置的。例如设置为0.5的话，当前控件的尺寸就是容纳其Group的一半。

Size To Fit Content:自身的尺寸与自身内容相关，例如，label中字数的多少决定了label的尺寸。

Fixed：手动设置一个固定的值。

　　　2、控件位置的控制

        因为watch的界面十分简洁，对于控件的位置设置，是通过水平和垂直两个维度来设置的，通过设置每个维度的属性来控制其在容纳它的Group中的位置：

Horizontal：left（左），center（中心），right（右）

Vertical：top（上），center（中心），bottom（下）

 

注意:

        关于图片素材，你可以发现，在Extension和App文件夹中各有一个Assets.xcasssets组，只有将素材放入APP文件夹下的这个组watch才能使用。

 

 2.UI控件

　　（1）Table

　　　WatchKit中的 WKInterfaceTable不同于UITableView，没有dataSource和delegate，只能通过主动方式填充并展现数据。对应每 一种不同类型的cell，都需要为它构造一个rowController（继承自NSObject），这个rowController负责往这种类型的 row中填充需要展现的内容。

方法如下：

-(id)rowControllerAtIndex:(NSInteger)index;

通过调用这个方法得到指定行的rowController，再调用这个rowController的自定义方法来进行渲染。例如：

- (void)configureRowWithDataModel:(id)dataModel;

另外，如果要插入行和删除行，则要在上述操作之前先调用：

-(void)insertRowsAtIndexes:(NSIndexSet *)rows withRowType:(NSString *)rowType;
-(void)deleteRowsAtIndexes:(NSIndexSet *)rows;

　　注意：在iOS开发中如果要刷新UITableView，只要更新数据源后再调用reloadData方法就可以。但是就像之前说 的，WKInterfaceTable并没有主动刷新数据的方法，只能通过调用 [table setRowTypes:nil] 方法先清除所有数据，再用新数据源重新填充一遍。仅仅是这样就算了，假设你现在视图控制器A中，然后被push到了视图控制 器B，那么如果你在B中刷新A中的WKInterfaceTable是没有用的。但是不是完全没用，经过多次测试，我发现，数据源确实是被更新了，但是界 面上的内容并没有刷新。也就是说，数据源和界面没有保持一致。暂时的解决方法是，在需要刷新的时候记录一个标记位，然后在willActivate的时候根据这个标记位进行延时刷新。一个很明显的副作用就是刷新时会产生跳动，相信之后的版本Apple应该会修复这个问题。

        WatchOS中的TableView和iOS中的TableView还是有很大的区别，在开发之前，首先我们应该明白WatchOS中的Table有哪些局限性和特点。下面几点是我总结WatchOS中Table的特殊之处：

　　1、Table只有行的概念，没有分区的概念，没有头尾视图的概念。

　　2、可以通过创建多个Table，来实现分区的效果。

　　3、因为Watch上是通过Gruop进行布局适应的，所以没有行高等设置。

　　4、Table没有代理，所有行的数据都是采用静态配置的方式。

　　5、点击Table中的行触发的方法，是通过重写Interface中的方法来实现的。

　　（2）创建一个Table

        在storyBoard中拖入你的Table（想要纯代码就不行了），如下：

        

在Table上拉两个label：

每一个Table中包含一个TableRowController，实际上我们Table上的控件都是通过这个TableRowController进行管理的，因此如果我们需要在代码中控制TableRow上的内容，我们需要创建一个文件作为Table的TableRowController：

将storyBoard中TableRowController的类修改为我们创建的类并指定一个identifier：

                 

然后，我们将两个label关联到TableRowController中：

1 2 3 4 5 6

import WatchKit class TableRowController: NSObject {       @IBOutlet var numberLabel: WKInterfaceLabel!     @IBOutlet var titleLabel: WKInterfaceLabel! }

将Table关联到interfaceController中：

1 2 3 4 5

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

下面，我们开始在interface中对Table做相关配置，首先我们可以先观察一下WKInterfaceTable中有哪些方法和属性：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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配置非常简单易用，例如我们如下配置：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

@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中实现如下方法：

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

        另一种方式，我们可以重写实现InterfaceController中的如下方法，来处理Table的点击事件：

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

        无论哪种方式，我们都可以通过参数table和rowIndex来确认点击的具体是那个table和哪一行，进行传值和处理我们的逻辑。