WatchKit(二):WKInterfaceController生命周期、控制器、控件布局

单独的interface controller对象管理一个场景,interface controller 是一个WKInterfaceController实例,WKInterfaceController是Apple Watch应用独有的控制器,就好比iOS中的UIViewController, WKInterfaceController与UIViewController不同的是,WKInterfaceController继承自NSObject而UIViewController继承自UIResponder。因为WKInterfaceController不会管理Apple Watch应用界面,实际上Apple Watch应用的界面是被WatchKit管理的。

0.WKInterfaceController生命周期

WatchKit2_01.png

打开Apple Watch上面的应用,先加载Storyboard,再初始化界面、显示界面。
在初始化界面和显示界面上调用了几个WKInterfaceController方法,这个就是WKInterfaceController生命周期。

我们打开上节创建的iWatch项目,打开iWatch WatchKit Extension文件夹下的InterfaceController.m文件,看到如下几个方法:

- (void)awakeWithContext:(id)context;
- (void)willActivate;
- (void)didDeactivate;

当然还有个init方法。

init:用来初始化Interface Controller
awakeWithContext:类似UIViewcontroller中的viewDidLoad:方法,用来配置interface controller
willActivate:界面将要显示给用户时会被调用,类似UIViewcontroller中的viewWillAppear:方法。这个方法主要用来对视图进行一些小的调整,大规模的初始化还是要放在init和awakeWithContext:里
didDeactivate:用来清空界面,程序进入不活动状态。可以用它来终止Timers或者来停止动画。在这个方法里不能再对界面进行操作。

在测试期间,可以通过锁定或者解锁模拟器(选择模拟器->Hardware->Lock 或者选择模拟器使用Command + L命令来锁定)来验证willActivate:方法或者didDeactivate:方法是否调用。

1.控制器、控件及布局

先来说下控制器,WatchKit下现在有2种控制器:

0.WKInterfaceController:除了Apple Watch应用主界面使用WKInterfaceController外,Glances界面也使用WKInterfaceController。
1.WKUserNotificationInterfaceController:听名字就很明显,自定义通知使用的控制器。

再来说下控件:

WatchKit中的控件都继承自WKInterfaceObject,并且都以WKInterface开头。

举几个和iOS中类似的控件:

WKInterfaceLabel:标签
WKInterfaceButton:按钮
WKInterfaceImage:类似UIImageView用于显示图片
WKInterfaceTable:表格,类似UITableView
WKInterfaceSwitch:开关
WKInterfaceSlider:滑动条
WKInterfaceMap:用于显示地图

WatchKit独有的控件:

A timer counts up or down to a specified time. The displayed string can be customized with different units and formats.

WKInterfaceGroup:其他控件的容器,用来管理其他控件的布局。可以指定背景色或者图片。
WKInterfaceSeparator:分隔视图。是一条可见的线,用来分隔界面内容。
WKInterfaceDate:日期对象,用来展示当前日期和时间,可以使用WatchKit提前定义好的样式或者自定义样式。
WKInterfaceTimer:计时器控件,可以到指定的时间,可升可降,可以自定义不同的规格化。
WKInterfaceMenu:菜单,他的每个字条目加WKInterfaceMenuItem,要注意的是它不像其它控件,在WKInterfaceController我们不能直接书写他。当在WatchKit应用界面长按时它就会出现。每个WKInterfaceMenuItem有个selector事件。

最后说下布局:

WatchKit使用的是自己独有的布局,WatchKit应用不使用iOS上应用的布局方式。

Xcode会自动帮你安置控件的位置。在运行时,Apple Watch会根据合理的空间来安排相应的位置。

尽管Xcode给我们做好了一切,但是我们还是想自定义一些控件的位置,我们可以使用Attributes inspector来配置。我们可以设置他水平和垂直放置方式以及Size大小,是固定还是自动扩充。如下图,添加了一个按钮,设置按钮水平方向和垂直方向都居中,宽度自适应,高度写死为100:

WatchKit2_02.png

WKInterfaceGroup对象是一个重要工具来安排界面元素显示,WKInterfaceGroup是其他界面元素的容器,可以设置界面元素水平或者垂直方向显示方式,可以再嵌套WKInterfaceGroup,可以使用每个组的间距来改变元素的位置和大小。它没有默认的可视化显示,你可以给他自定义背景色或者自定义图片。

苹果官方给我们展示了一个布局例子,比较有代表性,如下图:

WatchKit2_03.png

2.一个Demo:使用Table显示数据

由于WatchKit中的Table和UIKit中的Tabel不一样,所以详细学习下:

0.拖一个WKInterfaceTabel到Storyboard上,如下图:

WatchKit2_04.png

1.选中TableRowController,添加WKInterfaceImage图片视图和WKInterfaceLabel标签。如下图:

WatchKit2_05.png

2.我们来进行布局,选中WKInterfaceImage,水平居左显示,垂直居中显示,大小固定,宽度高度都为40,WKInterfaceLabel,水平居左显示,垂直居上显示,宽度高度自适应。

WKInterfaceImage显示:

WatchKit2_06.png

WKInterfaceLabel显示:

WatchKit2_07.png

3.设置RowController的Identity:

WatchKit2_08.png

4.选中iWatch WatchKit Extension创建新文件ImageLabelRowController.h,ImageLabelRowController.m

WatchKit2_09.png

命名为ImageLabelRowController:

WatchKit2_10.png

5.选择Storyboard中的rowController,指定Class为ImageLabelRowController

WatchKit2_11.png

6.连接相应的控件到ImageLabelRowController.h,注意要引入#import <WatchKit/WatchKit.h>

WatchKit2_12.png

7.连接Table到InterfaceController.

WatchKit2_13.png

7.码代码

#import "InterfaceController.h"
#import "ImageLabelRowController.h"

@interface InterfaceController()

@property (weak, nonatomic) IBOutlet WKInterfaceTable *table;

@end


@implementation InterfaceController

- (void)awakeWithContext:(id)context {
    [super awakeWithContext:context];
    // Configure interface objects here.
    
    [self settingUI];//配置界面
}

- (void)willActivate {
    // This method is called when watch view controller is about to be visible to user
    [super willActivate];
}

- (void)didDeactivate {
    // This method is called when watch view controller is no longer visible
    [super didDeactivate];
}


/**
 *  @author iYiming, 15-05-17 13:14:00
 *
 *  配置界面
 */
- (void) settingUI
{
    [_table setNumberOfRows:4 withRowType:@"ImageLabelRowController"];//注意这里的rowType 就是刚才我们设置的Identity
    
    for (NSInteger i = 0; i < 4; i++) {
        ImageLabelRowController *rowController = (ImageLabelRowController *)[_table rowControllerAtIndex:i];
        
        //指示图片
        NSString *imageName = @"IndicatorImage";//写死好了 用了一个pdf文件
        [rowController.indicatorImage setImageNamed:imageName];
        
        //标题
        NSString *titleStr = [NSString stringWithFormat:@"标题%@",@(i)];
        [rowController.titleLabel setText:titleStr];
    }
}

需要注意的是:
0.WKInterfaceTable不存在 DataSource 和 Delegate。
1.WKInterfaceTable 通过-setNumberOfRows:withRowType: 进行设定行数。
2.使用 -rowControllerAtIndex: 来获取对应的行。

  1. IndicatorImage放在iWatch WatchKit App文件夹下的Images.xcassets里。

OK,大功告成,AppleWatch显示如下:

WatchKit2_14.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,372评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,368评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,415评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,157评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,171评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,125评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,028评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,887评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,310评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,411评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,004评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2 353

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,093评论 4 62
  • 不为上仙不下田 把酒随上醉用瑿 锦绣未央随衣袖 清风徐来画青衣 道自在随作于 2017 9 14 01:06
    李昌瑿阅读 148评论 0 0
  • iOS系统授权开发 iOS系统开发中,最常用的系统授权,莫过于系统通知,用户相册,位置服务了,这篇文章将简单讲解这...
    秋刀生鱼片阅读 2,704评论 7 28
  • 时间已经是10月6日的下午3点了,我坐在拥挤的公交车上,看着沿途的建筑和风景,以及数不清楚的人!刚好歌曲播放着那首...
    门前柳树阅读 402评论 1 0
  • 9月28日,是一个特别的日子,是我国伟大的思想家、教育家,儒家学派创始人,孔子诞辰2567周年的纪念日。 2567...
    陳小烦_阅读 427评论 6 2