UI 概要

开始实现 App 的第一步是定义 Storyboard 中的 Scene。每个 Scene 定义了整个 App 用户界面的一部分。你可以为不同大小的 Apple Watch 定义不同的 Scene，也可以为同一个界面配置不同的展示效果。

布局 Scenes

WatchKit App 使用的布局模型不同于 iOS App。在 Scene 里面布局 WatchKit App 界面的时候，并没有因为控件的添加而创建多层次的视图层。Xcode 会决定你所添加到 Scene 中的控件元素所在的位置，把他们竖直堆叠在不同的行。运行时，Apple Watch 会取出相应的控件把它们布局在合适的区域并显示出来。

尽管 Xcode 几乎处理了所有的界面布局工作，Watchkit 也提供了一些让你在 Scene 里面精确控制控件元素的方式。大多数控件的大小和位置可以通过属性面板来设置。控件的位置可以通过设置控件的水平、竖直方向上的对齐属性来设置。

另外一种控制控件元素位置的方式是组合对象。组合对象可以让你在水平方向和在竖直方向上一样布局控件。组合对象还可以实现在组合范围内保持控件之间间距。组合对象没有默认的视觉效果，但如果需要的话你也可以配置背景色或是背景图片。

图 5-1 展示了如何在 Storyboard 里面放置不同的控件。前三个控件是标签，每个标签都占满了其所在行的横向区域。对于每个标签，它们的对齐属性决定相对于视图控制器的边界左对齐、右对齐还是居中。标签的下面是由水平方向上排练的两张图片组成的组合对象。在组合对象的下面还有竖直放置的一条分割线和一个按钮。

图 5-1 Xcode 里的界面对象

在 Xcode 中创建界面的时候，尽可能让控件自适应大小。App 的界面需要被展示在所有尺寸的 Apple Watch 上。让系统去适配界面，尽量减少为不同设备而写的适配代码。

适配不同的显示尺寸

Xcode 支持为不同大小的 Apple Watch 定义不同的界面。在 Storyboard 里面的改动默认会应用到所有不同大小的 Apple Watch，你也可以根据需要为不同的设备定义不同的 Scene。比如，你可能需要为不同的设备调整控件之间的间距和布局以及设置不同的图片。

为不同大小的设备自定义控件需要用到属性面板上的加号按钮来改变默认的设备信息。点击加号按钮为相应的属性增加对应的设备。改变这个值只会影响当前选中的设备。图 5-2 说明了如何为 42mm 的 Apple Watch 设置特殊的字体大小。

图 5-2 为不同的设备自定义控件属性

不应该让用户发现你的 App 在不同大小的 Apple Watch 上有不同的界面，因此建议尽可能不要为不同的设备定义不同的界面。尽量限制因间距、边距等改变视图布局的做法。不推荐因为不同的布局而移除当前界面上所有控件的做法。你应该尽可能为所有的 Apple Watch 使用相似的界面。

如果要预览不同大小设备上的界面效果，用 Storyboard 编辑区域的控制按钮在不同大小设备间切换。Storyboard 编辑区默认显示任意大小的设备。改变任意大小模式切换到其它所有尺寸的 Apple Watch。如果你讲显示模式切换到了某一个具体的大小，此时你所做的改动只会影响该大小对应的设备。

运行时更新界面

运行时，视图控制器可以修改 Scene 中相关对象的以下以下属性：

• 设置或更新数据值。
• 改变控件支持的视觉效果。
• 改变控件的大小。
• 改变控件的透明度。
• 显示、隐藏控件。

不能添加新的控件或是改变已有控件的顺序。尽管你不能移除控件，但是你可以隐藏他们，这样会临时将控件从布局中移除。当所有的控件都隐藏时，其它对象会充满原先这些控件所在的地方。如果要隐藏某个控件而不让其它对象充满该控件所在的位置，你可以把该控件的 alpha 值设置为0。更多关于隐藏控件的内容请参考Hiding Interface Objects。

设置 App 的主色

每个 WatchKit App 会有一个相关的主色，这个颜色会在以下 UI 控件上体现出来：

• 状态栏上的标题。
• 通知界面上的 App 名称。

主色存储在 App Storeyboard 里面的一个全局颜色变量里面。要访问这个变量，选中 Storeyboard，并且选择文件面板。从弹出菜单上选择一个预定义好的颜色，或者用颜色选择器选择一种自定义的颜色。

界面国际化

和 WatchKit App 关联的 Storyboard 默认就有基本的国际化。会将 Storeyboard 种所有的字符串自动添加到工程的 Localizable.string 文件中。你只需在该文件中将字符串翻译成需要的语言，然后就可以在 App 中使用了。当运行时创建了一个 Scene，Xcode 会将字符串关联上相应的本地化语言。

合理布局界面，以便标签等控件有合适的控件来显示它们的文字。不要把按钮都放在同一行，而是应该把它们竖直放置，以便都有合适的空间显示按钮标题。

至于那些你编码中用到的文本和图片，用类似 iOS 和 OS X App 上国际化的方式：

• 用 NSLocalizedString 宏从资源文件中加载字符串。
• 用 NSNumberFormatter 对象格式化数值。
• 用 NSDateFormatter 格式化日期

在 WatchKit 扩展里面，NSLocale 对象返回配置在 Apple Watch 里面的本地化信息。用这个类获取当前用户的首选语言及其它语言还有其它本地化相关信息。

更多关于 App 国际化的内容请参考Internationalization and Localization Guide。