開(kāi)始實(shí)現(xiàn) App 的第一步是定義 Storyboard 中的 Scene。每個(gè) Scene 定義了整個(gè) App 用戶(hù)界面的一部分。你可以為不同大小的 Apple Watch 定義不同的 Scene,也可以為同一個(gè)界面配置不同的展示效果。
WatchKit App 使用的布局模型不同于 iOS App。在 Scene 里面布局 WatchKit App 界面的時(shí)候,并沒(méi)有因?yàn)榭丶奶砑佣鴦?chuàng)建多層次的視圖層。Xcode 會(huì)決定你所添加到 Scene 中的控件元素所在的位置,把他們豎直堆疊在不同的行。運(yùn)行時(shí),Apple Watch 會(huì)取出相應(yīng)的控件把它們布局在合適的區(qū)域并顯示出來(lái)。
盡管 Xcode 幾乎處理了所有的界面布局工作,Watchkit 也提供了一些讓你在 Scene 里面精確控制控件元素的方式。大多數(shù)控件的大小和位置可以通過(guò)屬性面板來(lái)設(shè)置??丶奈恢每梢酝ㄟ^(guò)設(shè)置控件的水平、豎直方向上的對(duì)齊屬性來(lái)設(shè)置。
另外一種控制控件元素位置的方式是組合對(duì)象。組合對(duì)象可以讓你在水平方向和在豎直方向上一樣布局控件。組合對(duì)象還可以實(shí)現(xiàn)在組合范圍內(nèi)保持控件之間間距。組合對(duì)象沒(méi)有默認(rèn)的視覺(jué)效果,但如果需要的話(huà)你也可以配置背景色或是背景圖片。
圖 5-1 展示了如何在 Storyboard 里面放置不同的控件。前三個(gè)控件是標(biāo)簽,每個(gè)標(biāo)簽都占滿(mǎn)了其所在行的橫向區(qū)域。對(duì)于每個(gè)標(biāo)簽,它們的對(duì)齊屬性決定相對(duì)于視圖控制器的邊界左對(duì)齊、右對(duì)齊還是居中。標(biāo)簽的下面是由水平方向上排練的兩張圖片組成的組合對(duì)象。在組合對(duì)象的下面還有豎直放置的一條分割線(xiàn)和一個(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è)備而寫(xiě)的適配代碼。
Xcode 支持為不同大小的 Apple Watch 定義不同的界面。在 Storyboard 里面的改動(dòng)默認(rèn)會(huì)應(yīng)用到所有不同大小的 Apple Watch,你也可以根據(jù)需要為不同的設(shè)備定義不同的 Scene。比如,你可能需要為不同的設(shè)備調(diào)整控件之間的間距和布局以及設(shè)置不同的圖片。
為不同大小的設(shè)備自定義控件需要用到屬性面板上的加號(hào)按鈕來(lái)改變默認(rèn)的設(shè)備信息。點(diǎn)擊加號(hào)按鈕為相應(yīng)的屬性增加對(duì)應(yīng)的設(shè)備。改變這個(gè)值只會(huì)影響當(dāng)前選中的設(shè)備。圖 5-2 說(shuō)明了如何為 42mm 的 Apple Watch 設(shè)置特殊的字體大小。
圖 5-2 為不同的設(shè)備自定義控件屬性
http://wiki.jikexueyuan.com/project/apple-watch-programming-guide/images/scalable_text_2x.png" alt="" />
不應(yīng)該讓用戶(hù)發(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)我獯笮∧J角袚Q到其它所有尺寸的 Apple Watch。如果你講顯示模式切換到了某一個(gè)具體的大小,此時(shí)你所做的改動(dòng)只會(huì)影響該大小對(duì)應(yīng)的設(shè)備。
運(yùn)行時(shí),視圖控制器可以修改 Scene 中相關(guān)對(duì)象的以下以下屬性:
不能添加新的控件或是改變已有控件的順序。盡管你不能移除控件,但是你可以隱藏他們,這樣會(huì)臨時(shí)將控件從布局中移除。當(dāng)所有的控件都隱藏時(shí),其它對(duì)象會(huì)充滿(mǎn)原先這些控件所在的地方。如果要隱藏某個(gè)控件而不讓其它對(duì)象充滿(mǎn)該控件所在的位置,你可以把該控件的 alpha 值設(shè)置為0。更多關(guān)于隱藏控件的內(nèi)容請(qǐng)參考Hiding Interface Objects。
每個(gè) WatchKit App 會(huì)有一個(gè)相關(guān)的主色,這個(gè)顏色會(huì)在以下 UI 控件上體現(xiàn)出來(lái):
主色存儲(chǔ)在 App Storeyboard 里面的一個(gè)全局顏色變量里面。要訪(fǎng)問(wèn)這個(gè)變量,選中 Storeyboard,并且選擇文件面板。從彈出菜單上選擇一個(gè)預(yù)定義好的顏色,或者用顏色選擇器選擇一種自定義的顏色。
和 WatchKit App 關(guān)聯(lián)的 Storyboard 默認(rèn)就有基本的國(guó)際化。會(huì)將 Storeyboard 種所有的字符串自動(dòng)添加到工程的 Localizable.string
文件中。你只需在該文件中將字符串翻譯成需要的語(yǔ)言,然后就可以在 App 中使用了。當(dāng)運(yùn)行時(shí)創(chuàng)建了一個(gè) Scene,Xcode 會(huì)將字符串關(guān)聯(lián)上相應(yīng)的本地化語(yǔ)言。
合理布局界面,以便標(biāo)簽等控件有合適的控件來(lái)顯示它們的文字。不要把按鈕都放在同一行,而是應(yīng)該把它們豎直放置,以便都有合適的空間顯示按鈕標(biāo)題。
至于那些你編碼中用到的文本和圖片,用類(lèi)似 iOS 和 OS X App 上國(guó)際化的方式:
NSLocalizedString
宏從資源文件中加載字符串。NSNumberFormatter
對(duì)象格式化數(shù)值。NSDateFormatter
格式化日期在 WatchKit 擴(kuò)展里面,NSLocale
對(duì)象返回配置在 Apple Watch 里面的本地化信息。用這個(gè)類(lèi)獲取當(dāng)前用戶(hù)的首選語(yǔ)言及其它語(yǔ)言還有其它本地化相關(guān)信息。
更多關(guān)于 App 國(guó)際化的內(nèi)容請(qǐng)參考Internationalization and Localization Guide。