WatchKit Storyboard攻略(二)

上一篇主要写到了WatchKit里对于Main入口界面设置Storyboard的一些要点和技巧,没想到被转载让那么多小伙伴们看到,因此我也会继续讲解这一部分的后续内容。本篇主要针对第二类视图界面也就是Glance(瞥览)进行示例介绍,编写之际恰逢WatchKit beta2的更新,因此也将顺便介绍有关更新内容。

Glance的用途大家应该比较熟悉了,它是专门用来快速浏览信息的视图界面,所有信息在一屏内显示,而且界面元素无法交互,用户点击任意位置都会可开启Watch的主应用。Glance视图的激活方式是从边缘上划。

我们现在打算构造一个显示用户当前位置的Glance。视图上应包括当前时间、当前位置描述与位置地图。因此我们会需要WKInterfaceDate、WKIntefaceLabel和WKInterfaceMap三个组件,考虑将他们垂直瀑布式排列。步骤如下:

1.建立项目工程和设置启动方式。

我们用Xcode6beta2建立一个TestWatchStoryboard的项目并增加target,添加WatchKit App扩展,这一步时记得勾上Glance场景的选项。

Xcode提示你激活Watch程序的scheme,确认激活,但用这个是无法启动Glance的。我们可以用Duplicate scheme复制一份,并将新scheme更名为Glance of TestWatchStoryboard2 WatchKit App。

然后修改启动界面为Glance,即可通过新scheme启动我们的Glance。

2.配置Glance视图。

打开WatchKitApp的Interface.storyboard,点击Glance的ViewController,可以看到右边出现Glance模板配置界面。

右方只有模板选择的功能。目前模板都是分为上(Upper)和下(Lower)两部分。虽然选择很丰富但个人认为强制切割成2块而不能整体性的全屏是它的主要局限。前面说了我们有三个元素,因此把Upper上方部分模板改为Group-Body1(模板里的Body其实代表的是一个标签WKInterfaceLabel)。

接着拖拽1个Date组件到Upper的Group中代表当前时间,再拖拽1个Map控件到Lower的Group代表当前地图位置,界面和结构如下:

这时我们也可以发现Xcode6.2beta2与beta1的区别:点击各项属性的+号能分别为42mm和38mm设备指定不同的属性值,结合上一篇里我们提到的特性,界面布局的灵活性得到大大提升!

比如我们运行在38mm表盘上时发现日期时间在一行内显示不下,可以为38mm表盘设置缩小一半的Scale,将Min Scale值中38mm设备的对应值设置为0.5,并同理设置Label元素:

3.利用代码更新内容

再简单介绍一下本示例的代码实现思路。

首先建立所述三个Storyboard控件与控制器代码中对象的IBOutlet关联。名称分别为txtDate、txtLocation与map:

@IBOutletweakvar txtDate: WKInterfaceDate!

@IBOutletweakvar txtLocation: WKInterfaceLabel!

@IBOutletweakvar map: WKInterfaceMap!

然后增加各控件初始化时的设置代码,这里我们发现了beta2版的又一个差异,WKInterfaceController的初始化函数以前是init(context: AnyObject?),现在变更为awakeWithContext(context: AnyObject?) ,这个变动的原因是你其实无法在WatchKit Extension里进行视图控制器构造函数的调用,所以init是名不副实的,还是以awakeFromNib类似的名称命名更好理解。我们为了简化,静态的设置地图位置与地址标签为武汉大学:

已经完成!选择Glance的Scheme并运行,38mm设备上效果如下:

Glance部分内容不算多,本系列下一篇我们会研究Notification。

后话:作者非常开心的看到Xcode6.2beta2所带WatchKit的功能得到进一步丰富,这证明Apple确实在不断完善SDK,相信等到AppleWatch发售时WatchKit正式版的功能将更加完整。这也给了作者更新WatchKit有关文章的动力,若未关注本人新浪微博(@WatchKit开发),也希望转载前先联系作者,以确保正确的内容出现于公众媒体,感谢大家!

收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部