WatchKit相关的

1.WatchKit布局

WatchKit的布局不同于iOS Apps的布局方式,你必须在storyboard中布局好界面,并且不能动态的添加或删除某个控件。所有可能出现的控件,你都要事先放到storyboard中。你甚至不用在代码中获取某个控件的坐标、bounds、frames,也不用再使用约束之类的东西了,系统会自动进行调整。控件不能叠加在控件上。但是你可以在代码中控制隐藏或显示某个控件,当一个控件被隐藏后释放它所占的空间,它后面的控件会自动顶上来。你也可以在代码中设置一个控件的长、宽。还有一些其他可设置项,用的时候查一下文档即可。

在做Watch上的UI布局时,就像在进行一个一个脑筋急转弯,哈哈,其实很有意思。慢慢熟悉后,你会发现它真的是比iOS上的布局先进好多~。

2.WatchKit中的控件

这里只讲几个常用的控件,其他的控件我还没有用到,用到后如果有需要注意的地方再补充到这里~~

1) WKInterfaceGroup

Group在watch的布局上扮演着非常重要的角色,它就像一个盒子,它内部的控件可以指定是按照水平排布还是竖直排布。一个Group中还可以再放多个Group。当Group中控件隐藏或显示时,Group会自动调整它的宽高。超出Group的部分不会显示出来。其实拿过设计师给的设计图后,首先要干的事儿就是划分出主要的几个Group,比如下面这张图的分割:

每个颜色框是一个Group,下面介绍一下Group在IB中一些属性。

WatchKit group 特有的属性:

  • Layout:指定里面的控件是水平排布还是竖直排布,如果是水平的布局,那么控件会一个挨着一个在水平方向排布,当水平方向放不下时,也不会自动换到下一行,即使竖直方向的高度是够用的。
  • Insets:指定Group内部上、下、左、右留出的缝隙大小。
  • Spacing:指定里面控件与控件之间的缝隙大小。
  • Background:是的,你可以给一个Group设置背景图片。
  • Model:Image的该属性一样,指定背景图片的填充方式。
  • Animate:指定背景图片是否带动画,设置为YES时,可以设置动画执行时间,和是否在加载时开始动画。(尝试了一下,没有看到什么动画效果= =!)
  • Color:设置Group的背景颜色。
  • Radius:设置Group的圆角大小,四不四很酷!

关于Alignment、Size的设置,是适合所有控件的属性:

  • Horizontal / Vertical:指定内部元素在的对齐方式,对于Group就是你在里面放置的控件,对于Label就是上面的text。

  • Width / Height: 1. Size To Fit Content:宽高自动调整为正好放下内部的元素。 2. Relative to Container:相对于其父控件的比例,下面可以设置比例。Adjustment是指定在按照比例计算出一个值后,再做相应的调整。比如父控件的宽度是100,下面填了0.5和10,那该控件的宽度就是100*0.5+10。3. Fixed:指定一个固定的高或宽。

2) WKInterfaceTable

table不像UITableView那样需要设置dataSourcedelegate,而是在代码中直接设置行数:

1
[_table setNumberOfRows:count withRowType:@"CellIdentifier"];

然后用一个for循环来给每行设置:

1
2
3
4
for (int i = 0; i < count; i++) {
RowController *row = [_table rowControllerAtIndex:i];
[row setup:xxx];
}

RowController是自定义的对每一行cell的管理,可以在IB中给cell设置。

3.WKInterfaceController

WKInterfaceController起到了UIViewController的作用,每个WKInterfaceController都要在storyboard中设置IdentifierWKInterfaceController在代码中使用时不需要直接调用init方法进行初始化,可直接用下面这些方法展示页面:

1
2
3
4
5
6
7
8
9
10
11
12
- (void)pushControllerWithName:(NSString *)name
context:(id)context;

- (void)presentControllerWithName:(NSString *)name
context:(id)context;

- (void)presentControllerWithNames:(NSArray<NSString *> *)names
contexts:(NSArray *)contexts;

+ (void)reloadRootControllersWithNames:(NSArray<NSString *> *)names
contexts:(NSArray *)contexts;

其中name就是这个Identifier,还有一个context参数,它主要是带过去参数给下个页面。在WKInterfaceController的生命周期中有这样一个方法:

1
- (void)awakeWithContext:(id)context;

会在init执行后执行,可以来处理传过来的context

对于Page-Based App,要使用到+ (void)reloadRootControllersWithNames:contexts:来更新界面,WKInterfaceController并没有提供移除或添加一页的方法,所以每次有变动,都要调用一次这个reload方法。

有controller的地方,就会有生命周期,能Google出一大把文章,还有官方文档的介绍比较详细,还是要在开发中自己去感受呀,哈哈~

4.图片资源的放置

创建完Apple Watch项目,会发现在AppleWatch组中和在AppleWatch Extension组中都会有一个Assets.xcassets,这2个地方都可以放置图片,但是在用的时候要注意一下:

1
2
3
4
5
6
//加载AppleWatch组中的图片
[_wkInterfaceImage setImageNamed:@"imgName"];

//加载AppleWatch Extension组中的图片
UIImage *imageInExtension = [UIImage imageNamed:@"imgName"];
[_wkInterfaceImage setImage:imageInExtension];

5.实践

我将天气王Watch版本的主界面抽出来弄了个Demo,如果对这些控件的使用还不是很清晰,可以去一下~

参考文章

–End–

以上如果有说的不严谨的地方,希望在下面的留言中指出哦,如果对你有一些帮助,也希望能在下面的留言中给一些鼓励^_^