目前的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排版很类似。

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

(原文:台伟的Lofter)