转载

WatchKit Storyboard攻略（二）

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

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

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

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

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

WatchKit Storyboard攻略（二）

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

WatchKit Storyboard攻略（二）

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

WatchKit Storyboard攻略（二）

2.配置Glance视图

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

WatchKit Storyboard攻略（二）

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

WatchKit Storyboard攻略（二）

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

WatchKit Storyboard攻略（二）

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

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

WatchKit Storyboard攻略（二）

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类似的名称命名更好理解。我们为了简化，静态的设置地图位置与地址标签为武汉大学：

overridefunc awakeWithContext(context: AnyObject?) { super.awakeWithContext(context) txtLocation.setText("@:/WuhanUniversty") map.setRegion(MKCoordinateRegion(center: CLLocationCoordinate2DMake(30.541093, 114.360734), span: MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0))) }

已经完成！选择Glance的Scheme并运行，38mm设备上效果如下：

WatchKit Storyboard攻略（二）