WatchKit App 使用的布局模型不同于 iOS App。在 Scene 里面布局 WatchKit App 界面的時(shí)候，并沒有因?yàn)榭丶奶砑佣鴦?chuàng)建多層次的視圖層。Xcode 會(huì)決定你所添加到 Scene 中的控件元素所在的位置，把他們豎直堆疊在不同的行。運(yùn)行時(shí)，Apple Watch 會(huì)取出相應(yīng)的控件把它們布局在合適的區(qū)域并顯示出來。

盡管 Xcode 幾乎處理了所有的界面布局工作，Watchkit 也提供了一些讓你在 Scene 里面精確控制控件元素的方式。大多數(shù)控件的大小和位置可以通過屬性面板來設(shè)置?？丶奈恢每梢酝ㄟ^設(shè)置控件的水平、豎直方向上的對(duì)齊屬性來設(shè)置。

另外一種控制控件元素位置的方式是組合對(duì)象。組合對(duì)象可以讓你在水平方向和在豎直方向上一樣布局控件。組合對(duì)象還可以實(shí)現(xiàn)在組合范圍內(nèi)保持控件之間間距。組合對(duì)象沒有默認(rèn)的視覺效果，但如果需要的話你也可以配置背景色或是背景圖片。

圖 5-1 展示了如何在 Storyboard 里面放置不同的控件。前三個(gè)控件是標(biāo)簽，每個(gè)標(biāo)簽都占滿了其所在行的橫向區(qū)域。對(duì)于每個(gè)標(biāo)簽，它們的對(duì)齊屬性決定相對(duì)于視圖控制器的邊界左對(duì)齊、右對(duì)齊還是居中。標(biāo)簽的下面是由水平方向上排練的兩張圖片組成的組合對(duì)象。在組合對(duì)象的下面還有豎直放置的一條分割線和一個(gè)按鈕。

圖 5-1 Xcode 里的界面對(duì)象

http://wiki.jikexueyuan.com/project/apple-watch-programming-guide/images/storyboard_layout_2x.png" alt="" />

在 Xcode 中創(chuàng)建界面的時(shí)候，盡可能讓控件自適應(yīng)大小。App 的界面需要被展示在所有尺寸的 Apple Watch 上。讓系統(tǒng)去適配界面，盡量減少為不同設(shè)備而寫的適配代碼。

適配不同的顯示尺寸

Xcode 支持為不同大小的 Apple Watch 定義不同的界面。在 Storyboard 里面的改動(dòng)默認(rèn)會(huì)應(yīng)用到所有不同大小的 Apple Watch，你也可以根據(jù)需要為不同的設(shè)備定義不同的 Scene。比如，你可能需要為不同的設(shè)備調(diào)整控件之間的間距和布局以及設(shè)置不同的圖片。

為不同大小的設(shè)備自定義控件需要用到屬性面板上的加號(hào)按鈕來改變默認(rèn)的設(shè)備信息。點(diǎn)擊加號(hào)按鈕為相應(yīng)的屬性增加對(duì)應(yīng)的設(shè)備。改變這個(gè)值只會(huì)影響當(dāng)前選中的設(shè)備。圖 5-2 說明了如何為 42mm 的 Apple Watch 設(shè)置特殊的字體大小。

圖 5-2 為不同的設(shè)備自定義控件屬性

http://wiki.jikexueyuan.com/project/apple-watch-programming-guide/images/scalable_text_2x.png" alt="" />

不應(yīng)該讓用戶發(fā)現(xiàn)你的 App 在不同大小的 Apple Watch 上有不同的界面，因此建議盡可能不要為不同的設(shè)備定義不同的界面。盡量限制因間距、邊距等改變視圖布局的做法。不推薦因?yàn)椴煌牟季侄瞥?dāng)前界面上所有控件的做法。你應(yīng)該盡可能為所有的 Apple Watch 使用相似的界面。

如果要預(yù)覽不同大小設(shè)備上的界面效果，用 Storyboard 編輯區(qū)域的控制按鈕在不同大小設(shè)備間切換。Storyboard 編輯區(qū)默認(rèn)顯示任意大小的設(shè)備。改變?nèi)我獯笮∧Ｊ角袚Q到其它所有尺寸的 Apple Watch。如果你講顯示模式切換到了某一個(gè)具體的大小，此時(shí)你所做的改動(dòng)只會(huì)影響該大小對(duì)應(yīng)的設(shè)備。

運(yùn)行時(shí)更新界面

運(yùn)行時(shí)，視圖控制器可以修改 Scene 中相關(guān)對(duì)象的以下以下屬性：

設(shè)置或更新數(shù)據(jù)值。
改變控件支持的視覺效果。
改變控件的大小。
改變控件的透明度。
顯示、隱藏控件。

不能添加新的控件或是改變已有控件的順序。盡管你不能移除控件，但是你可以隱藏他們，這樣會(huì)臨時(shí)將控件從布局中移除。當(dāng)所有的控件都隱藏時(shí)，其它對(duì)象會(huì)充滿原先這些控件所在的地方。如果要隱藏某個(gè)控件而不讓其它對(duì)象充滿該控件所在的位置，你可以把該控件的 alpha 值設(shè)置為0。更多關(guān)于隱藏控件的內(nèi)容請(qǐng)參考Hiding Interface Objects。

設(shè)置 App 的主色

每個(gè) WatchKit App 會(huì)有一個(gè)相關(guān)的主色，這個(gè)顏色會(huì)在以下 UI 控件上體現(xiàn)出來：

狀態(tài)欄上的標(biāo)題。
通知界面上的 App 名稱。

主色存儲(chǔ)在 App Storeyboard 里面的一個(gè)全局顏色變量里面。要訪問這個(gè)變量，選中 Storeyboard，并且選擇文件面板。從彈出菜單上選擇一個(gè)預(yù)定義好的顏色，或者用顏色選擇器選擇一種自定義的顏色。

界面國際化

和 WatchKit App 關(guān)聯(lián)的 Storyboard 默認(rèn)就有基本的國際化。會(huì)將 Storeyboard 種所有的字符串自動(dòng)添加到工程的 Localizable.string 文件中。你只需在該文件中將字符串翻譯成需要的語言，然后就可以在 App 中使用了。當(dāng)運(yùn)行時(shí)創(chuàng)建了一個(gè) Scene，Xcode 會(huì)將字符串關(guān)聯(lián)上相應(yīng)的本地化語言。

合理布局界面，以便標(biāo)簽等控件有合適的控件來顯示它們的文字。不要把按鈕都放在同一行，而是應(yīng)該把它們豎直放置，以便都有合適的空間顯示按鈕標(biāo)題。

至于那些你編碼中用到的文本和圖片，用類似 iOS 和 OS X App 上國際化的方式：

用 NSLocalizedString 宏從資源文件中加載字符串。
用 NSNumberFormatter 對(duì)象格式化數(shù)值。
用 NSDateFormatter 格式化日期

在 WatchKit 擴(kuò)展里面，NSLocale 對(duì)象返回配置在 Apple Watch 里面的本地化信息。用這個(gè)類獲取當(dāng)前用戶的首選語言及其它語言還有其它本地化相關(guān)信息。

更多關(guān)于 App 國際化的內(nèi)容請(qǐng)參考Internationalization and Localization Guide。

上一篇：使用 iOS 技術(shù)下一篇：配置 Xcode 項(xiàng)目