WatchKit Storyboard攻略

WatchKit Storyboard攻略（一）

目前的WatchKit只有用户界面的渲染是靠AppleWatch进行，本文的目的主要在于探索WatchKit界面部分的功能开发与小技巧，内容层次上偏基础。

我们现阶段能用到的WatchKit是不完全体，能定制的界面元素都在唯一的Storyboard文件里，但是仔细一看我们就发现，XCode6.2里Watch的Storyboard和iPhone里的完全是两码事，且可动态交互的内容极少。

但是也不要气馁，至少在界面元素的排版方面，比起iPhone用的传统Storyboard其实更加简便。

首先我们了解一下WatchApp的界面组成的基本概念。我们知道，WatchKit目前提供的三种Storyboard模板有WatchApp用的Main模板、瞥览的Glance模板与静态/动态通知模板。这里重点先看一下Main模板，其实它分为两个部分--标题栏与内容frame，对于42mm和38mm的Watch来说，其尺寸是有区别的，见图1与图2：

图1 42mmAppleWatch界面尺寸与分辨率

图2 38mmAppleWatch界面尺寸与分辨率

红色表示标题栏，我们目前唯一能做的似乎就是设定标题文本。

不过还好也可以通过在ViewController的代码里通过setTitle来动态改变标题内容，颜色也是可以通过Global Tint来改变的（见之前的翻译文章）。

黄色部分是我们可以真正掌控的部分，在ViewController的代码里可以通过contentFrame属性进行访问（小小的表盘被标题占用了那么多空间- -!）。

XCode里针对Storyboard剩余能设置的属性都是针对它的了！我们可以设置Background定义背景图，指定图的多种显示模式（默认都是ScaleToFill，好处后面说），并通过设置Animate为true来实现在背景上自动播放图片帧动画。Insets设置为Custom后可以设置视图上下左右留白的空间，默认值都是0。

下面就是本文重点部分了，还是以一个实际的应用场景讲一下更多控件元素的具体使用和排版技巧：

比如说我们要做一个手表程序的启动画面和菜单，构思如下图（程序名Logo部分应与顶部间距40px，与左右边缘需要保持间距20px，水平位置居中；2个菜单项宽度180px，也是水平居中，垂直方向与底部间距24px）。为了精致我为程序名和菜单会制作一些图片资源。但很快就意识到了麻烦，前面已经发现2种大小的AppleWatch分辨率是不同的，这意味着如果做两种设备的适配并保持此排版，图片通常思路下是需要2种尺寸的。

其实完全没有必要，使用WatchKit专用的Storyboard布局功能仅使用一套资源图片就可以轻松的解决统一排版问题，这也将减少图片传输带来的开销并节省Watch宝贵的存储空间。

我们新建一个项目并加好WathApp的target，打开Inteface.storyboard文件，在Main模板里设置InterfaceController的Insets为Custom并按如下设置边距。

这里要注意的是AppleWatch使用的是2倍像素密度图像资源，Top的值减去了标题栏的38像素。

再拖一个Group控件上去，作为主要界面元素的容器。设定其Size的Width和Height均为Relative to Container，系数保持缺省值1，效果立现。

Relative to Container的作用是设定控件的Width属性或Height属性占父容器的比例（1代表100%）。

把Group的Layout设置为Vertical垂直排列，再加3个Image上去代表logo和2个按钮。

先来看看logo，我们现在边界已经确定好，因此只要它宽度与Group保持一致就行，而不同的设备，用控件自带的Scale功能就好！高度它可以自己计算！

运行程序并分别选用42mm和38mm设备，发现logo图确实是在保证边距的情况下在38mm设备上缩小了。

本文的情景里对于菜单按钮要求有点区别，为保证用户能方便按到按钮，按钮大小是必须保证的。因此这里我们设置2个按钮Image的size为fixed width与fixed height并填好图片对应宽高，并设置Position位置为向底端对齐。

预览里已经可以看到效果了，如果要修改2个按钮之间的间隔，修改Group的spacing值就OK了。

运行2种设备比较一下：

现在这套方案还是很简单的，按42mm的大尺寸设计，依据需求灵活对属性进行设置选择缩放或者固定尺寸，并利用Group进行各种对齐等等，跟Html排版很类似。

先就说这么多吧，也没有太多体系化的东西。主要还是靠自己的应用场景去设计并调整实践才能有更好的心得体会。

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。