WatchKit Storyboard攻略

目前的WatchKit只有用戶(hù)界面的渲染是靠AppleWatch進(jìn)行，本文的目的主要在于探索WatchKit界面部分的功能開(kāi)發(fā)與小技巧，內(nèi)容層次上偏基礎(chǔ)。

我們現(xiàn)階段能用到的WatchKit是不完全體，能定制的界面元素都在唯一的Storyboard文件里，但是仔細(xì)一看我們就發(fā)現(xiàn)，XCode6.2里Watch的Storyboard和iPhone里的完全是兩碼事，且可動(dòng)態(tài)交互的內(nèi)容極少。

但是也不要?dú)怵H，至少在界面元素的排版方面，比起iPhone用的傳統(tǒng)Storyboard其實(shí)更加簡(jiǎn)便。

首先我們了解一下WatchApp的界面組成的基本概念。我們知道，WatchKit目前提供的三種Storyboard模板有WatchApp用的Main模板、瞥覽的Glance模板與靜態(tài)/動(dòng)態(tài)通知模板。這里重點(diǎn)先看一下Main模板，其實(shí)它分為兩個(gè)部分--標(biāo)題欄與內(nèi)容frame，對(duì)于42mm和38mm的Watch來(lái)說(shuō)，其尺寸是有區(qū)別的，見(jiàn)圖1與圖2：

圖1 42mmAppleWatch界面尺寸與分辨率

圖2 38mmAppleWatch界面尺寸與分辨率

紅色表示標(biāo)題欄，我們目前唯一能做的似乎就是設(shè)定標(biāo)題文本。

不過(guò)還好也可以通過(guò)在ViewController的代碼里通過(guò)setTitle來(lái)動(dòng)態(tài)改變標(biāo)題內(nèi)容，顏色也是可以通過(guò)Global Tint來(lái)改變的。

黃色部分是我們可以真正掌控的部分，在ViewController的代碼里可以通過(guò)contentFrame屬性進(jìn)行訪問(wèn)（小小的表盤(pán)被標(biāo)題占用了那么多空間- -!）。

XCode里針對(duì)Storyboard剩余能設(shè)置的屬性都是針對(duì)它的了！我們可以設(shè)置Background定義背景圖，指定圖的多種顯示模式（默認(rèn)都是ScaleToFill，好處后面說(shuō)），并通過(guò)設(shè)置Animate為true來(lái)實(shí)現(xiàn)在背景上自動(dòng)播放圖片幀動(dòng)畫(huà)。Insets設(shè)置為Custom后可以設(shè)置視圖上下左右留白的空間，默認(rèn)值都是0。

下面就是本文重點(diǎn)部分了，還是以一個(gè)實(shí)際的應(yīng)用場(chǎng)景講一下更多控件元素的具體使用和排版技巧：

比如說(shuō)我們要做一個(gè)手表程序的啟動(dòng)畫(huà)面和菜單，構(gòu)思如下圖（程序名Logo部分應(yīng)與頂部間距40px，與左右邊緣需要保持間距20px，水平位置居中；2個(gè)菜單項(xiàng)寬度180px，也是水平居中，垂直方向與底部間距24px）。為了精致我為程序名和菜單會(huì)制作一些圖片資源。但很快就意識(shí)到了麻煩，前面已經(jīng)發(fā)現(xiàn)2種大小的AppleWatch分辨率是不同的，這意味著如果做兩種設(shè)備的適配并保持此排版，圖片通常思路下是需要2種尺寸的。

其實(shí)完全沒(méi)有必要，使用WatchKit專(zhuān)用的Storyboard布局功能僅使用一套資源圖片就可以輕松的解決統(tǒng)一排版問(wèn)題，這也將減少圖片傳輸帶來(lái)的開(kāi)銷(xiāo)并節(jié)省Watch寶貴的存儲(chǔ)空間。

我們新建一個(gè)項(xiàng)目并加好WathApp的target，打開(kāi)Inteface.storyboard文件，在Main模板里設(shè)置InterfaceController的Insets為Custom并按如下設(shè)置邊距。

這里要注意的是AppleWatch使用的是2倍像素密度圖像資源，Top的值減去了標(biāo)題欄的38像素。

再拖一個(gè)Group控件上去，作為主要界面元素的容器。設(shè)定其Size的Width和Height均為Relative to Container，系數(shù)保持缺省值1，效果立現(xiàn)。

Relative to Container的作用是設(shè)定控件的Width屬性或Height屬性占父容器的比例（1代表100%）。

把Group的Layout設(shè)置為Vertical垂直排列，再加3個(gè)Image上去代表logo和2個(gè)按鈕。

先來(lái)看看logo，我們現(xiàn)在邊界已經(jīng)確定好，因此只要它寬度與Group保持一致就行，而不同的設(shè)備，用控件自帶的Scale功能就好！高度它可以自己計(jì)算！

運(yùn)行程序并分別選用42mm和38mm設(shè)備，發(fā)現(xiàn)logo圖確實(shí)是在保證邊距的情況下在38mm設(shè)備上縮小了。

本文的情景里對(duì)于菜單按鈕要求有點(diǎn)區(qū)別，為保證用戶(hù)能方便按到按鈕，按鈕大小是必須保證的。因此這里我們?cè)O(shè)置2個(gè)按鈕Image的size為fixed width與fixed height并填好圖片對(duì)應(yīng)寬高，并設(shè)置Position位置為向底端對(duì)齊。

預(yù)覽里已經(jīng)可以看到效果了，如果要修改2個(gè)按鈕之間的間隔，修改Group的spacing值就OK了。

運(yùn)行2種設(shè)備比較一下：

現(xiàn)在這套方案還是很簡(jiǎn)單的，按42mm的大尺寸設(shè)計(jì)，依據(jù)需求靈活對(duì)屬性進(jìn)行設(shè)置選擇縮放或者固定尺寸，并利用Group進(jìn)行各種對(duì)齊等等，跟Html排版很類(lèi)似。

先就說(shuō)這么多吧，也沒(méi)有太多體系化的東西。主要還是靠自己的應(yīng)用場(chǎng)景去設(shè)計(jì)并調(diào)整實(shí)踐才能有更好的心得體會(huì)。

(原文:臺(tái)偉的Lofter)