Storyboard是蘋果一直推薦使用的界面開發(fā)方式。在近幾年的 Xcode 更新中可以看出，蘋果對(duì) Storyboard 的開發(fā)力度也不斷增強(qiáng)，添加了更多功能和特性，大大方便了界面的開發(fā)、適配以及提升代碼性能。

Storyboard 最大的好處就是把界面和代碼分離，如同 Web 開發(fā)中 CSS 描述界面，HTML 描述內(nèi)容，JavaScript 描述行為一樣，能讓代碼變得更清晰易讀，界面的行為以及相互的邏輯也變得更直觀。這對(duì)團(tuán)隊(duì)開發(fā)來說是大大的好事。

在我們準(zhǔn)備著手開發(fā) Catfan App 的時(shí)候，由于剛好 iOS 9 發(fā)布不久，而且 Swift 語(yǔ)言也逐漸穩(wěn)定成熟，所以決定拋棄以往純手寫或 xib 來構(gòu)建界面的歷時(shí)包袱，完全使用純 Storyboard 來進(jìn)行開發(fā)。

在團(tuán)隊(duì)開發(fā)中，由于每個(gè)成員對(duì) Storyboard 都有不一樣的理解，這往往會(huì)導(dǎo)致在使用的時(shí)候出現(xiàn)各種沖突。這時(shí)候就需要要引入一套 Storyboard 的使用規(guī)范來避免。

目前使用純 Storyboard 開發(fā)的大型開源項(xiàng)目不多，我們主要參考了 WordPress、Wikipedia 以及 IBAnimateable 官方項(xiàng)目的用法，并且在實(shí)踐中不斷研究探索來進(jìn)行調(diào)整。

Storyboard 分離規(guī)范

除非是單頁(yè)面應(yīng)用，在大多數(shù)情況下，使用單一 Storyboard 往往是不可行的，因?yàn)槊總€(gè) App 通常由各種不一樣的復(fù)雜模塊構(gòu)成，每當(dāng)里面的一個(gè)元素的屬性或位置產(chǎn)生變化，都會(huì)導(dǎo)致整個(gè) Storyboard 文件產(chǎn)生多處代碼的變動(dòng)。尤其在 Git 代碼版本的控制下，處理分支合并產(chǎn)生的沖突會(huì)變得非常麻煩。

所以，把 Storyboard 分離有一個(gè) 1 – 5 原則：把每一個(gè) Storyboard 盡量分離成一個(gè)人處理范圍，每一個(gè) Storyboard 盡量控制少于 5 個(gè) View。例如，設(shè)置頁(yè)面、注冊(cè)頁(yè)面、信息詳情頁(yè)、發(fā)布頁(yè)面等，基本上只需要一人就能負(fù)責(zé)，而且頁(yè)面大多數(shù)情況下都會(huì)少于 5 個(gè) View （如果超過 5 個(gè)的時(shí)候，就可以考慮是不是在里面可以考慮把它們?cè)俜蛛x）。把該模塊的所有 View 都放在同一個(gè)的 Storyboard 文件里進(jìn)行管理。這樣就能大大減少相互沖突的情況，并且 Storyboard 的讀取和渲染性能也比單獨(dú)打開一個(gè)大型 Storyboard 的要快不少。

Storyboard 命名規(guī)范

一套優(yōu)秀的代碼項(xiàng)目，變量的命名，代碼的語(yǔ)言風(fēng)格都會(huì)有一套對(duì)應(yīng)的規(guī)范，以便于成員之間進(jìn)行溝通和開發(fā)。在 Storyboard 里面，各種的元素標(biāo)識(shí)同樣地也需要一套命名的規(guī)范，以便于開發(fā)之間的溝通。

盡管我們可以通過元素的 Identity Inspector 頁(yè)面中的 Label 屬性對(duì)元素進(jìn)行強(qiáng)制命名標(biāo)識(shí)。但 Xcode 有一個(gè)特性，當(dāng)元素拖拉到代碼處進(jìn)行 IBOutlet 的變量綁定時(shí)候，該元素的標(biāo)識(shí)會(huì)自動(dòng)根據(jù)變量的名字進(jìn)行自動(dòng)命名，無需在 Label 屬性中進(jìn)行指定。其命名規(guī)則是把駝峰寫法的變量的每個(gè)單詞添加空格分隔，并且每個(gè)單詞的首字母大寫。例如：albumCollectionViewController -> Album Collection View Controller，passwordLabel -> Password Label。簡(jiǎn)單來說，元素標(biāo)識(shí)的命名等同于在代碼中的變量名稱。

所以，根據(jù)這個(gè)特性，我們只需要在代碼的元素變量命名中應(yīng)用一套規(guī)范，就能同時(shí)規(guī)范在 Storyboard 中的命名了。

通常情況下，IBOutlet 變量使用【控件作用的名稱 Xcode 控件默認(rèn)名】來命名會(huì)有不少的好處。

例如：

album CollectionView

username Label

avatar ImageView

content TextView

• 規(guī)則簡(jiǎn)單，可讀性強(qiáng)。

• 自動(dòng)轉(zhuǎn)化成 Storyboard 的名稱，如 Album Collection View、 Username Label、 Avatar Image View 等等，都符合 Xcode 默認(rèn)的命名規(guī)范，顯得一致。

• 在代碼中調(diào)用方法時(shí)，很容易就能識(shí)別出該變量在界面中是什么類型的元素，包含什么屬性和方法。（當(dāng)輸入 avatarImageView. 的時(shí)候，你就能知道它會(huì)有 image 這個(gè)屬性了）

(點(diǎn)擊放大圖像)

Storyboard 界面規(guī)范

Storyboard 除了作為 UI 界面的構(gòu)建語(yǔ)言之外，還擔(dān)當(dāng)著界面預(yù)覽的角色。界面規(guī)范有一個(gè)原則，就是當(dāng)把 Storyboard 展示給其他人的時(shí)候，盡量做到能讓別人一看就知道這個(gè) Storyboard 是干什么的，界面之間的邏輯是怎樣的，界面大致的效果是如何的。

布局規(guī)范

Xcode 本身就有就有布局輔助線提示的功能，當(dāng)進(jìn)行拖動(dòng)的時(shí)候，可以根據(jù)提示的輔助線來進(jìn)行 View 或控件之間的對(duì)齊，合理利用此特性能方便我們調(diào)整出整齊的布局。

View 和 View 之間的擺放，可以遵循從左往右，從上到下的原則，進(jìn)行邏輯排列。因?yàn)樵?Storyboard 里 View 之間的連線算法都是從 View 的右邊緣出發(fā)，到另外一個(gè) View 的左邊緣結(jié)束，如果調(diào)轉(zhuǎn)了，就會(huì)出現(xiàn)很多交叉的連線，讓界面看起來很亂。

其次，View 之間最好也留有足夠的間隔，不要太擠，也不需要太遠(yuǎn)。大概在大于四分之一，小于四分之三 View Contrller 的寬度（默認(rèn)是 600 * 600）較佳。

在 Xcode 7 里，新增加了 Storyboard Reference 控件（雖然是在 iOS 9 新增加的，但 iOS 8 也可用）。合理使用此控件，能讓 Storyboard 描述出 View 與其它 Storyboard 的跳轉(zhuǎn)邏輯。并且可以通過 Segue 來進(jìn)行 View 之間的數(shù)據(jù)傳遞，統(tǒng)一規(guī)范 View 之間跳轉(zhuǎn)的代碼，讓邏輯更清晰。

但總的來說，布局的位置基本上因人而異，沒有完全正確的布局方式。只要在擺放的時(shí)候，花點(diǎn)時(shí)間思考如何讓人看起來舒服，有邏輯性，那基本上就能達(dá)到目的了。

(點(diǎn)擊放大圖像)

設(shè)置規(guī)范

為了達(dá)到在 Storyboard 里，能呈現(xiàn)出 View 在運(yùn)行時(shí)大致的界面，在設(shè)置 View 與各種控件的時(shí)候，同樣需要制定一些規(guī)范，以達(dá)到統(tǒng)一的展示效果。

例如在設(shè)置 Label、Text View 等作為內(nèi)容 Placeholder 的時(shí)候，text 屬性所填寫的最好是實(shí)際運(yùn)行時(shí)所呈現(xiàn)內(nèi)容的例子。如展示用戶名的 Lable 就填寫 Username，展示時(shí)間的 Label 就填寫 2010-01-01，展示內(nèi)容的 Text View 就填寫一些 Lorem ipsum dolor sit … 等默認(rèn)內(nèi)容之類的。如果不這樣區(qū)分，界面中一大堆默認(rèn)的 Label 會(huì)是怎樣的一種感覺？

對(duì)于展示固定內(nèi)容的 text 屬性，那最好都統(tǒng)一基于 Based Language 來設(shè)置，否則如果在后期需要對(duì)程序進(jìn)行多國(guó)語(yǔ)言化的時(shí)候，會(huì)非常麻煩。

在新版的 Xcode 里，還新增加了 IBDesignable 和 IBInspectable 兩個(gè)特性，只需要添加一些代碼，就能讓 Storyboard 里的控件呈現(xiàn)出更加接近運(yùn)行時(shí)所呈現(xiàn)的效果。有興趣的，可以參考相關(guān)的文章介紹。

全局開發(fā)規(guī)范

除了上述的規(guī)范外，還有更多細(xì)節(jié)的地方是會(huì)可能涉及到整個(gè)項(xiàng)目所有 Storyboard 的設(shè)置的。例如：

• 文字字體，字體大小，各元素的顏色

• 語(yǔ)言定義

• Autolayout 設(shè)置方式

• 界面自適應(yīng)設(shè)置

• UITest 相關(guān)設(shè)置

• 更多

這些都需要在統(tǒng)一開發(fā)之前，預(yù)先進(jìn)行團(tuán)隊(duì)協(xié)商和定義。最好能把它寫成一個(gè)團(tuán)隊(duì)文檔，讓所有成員都遵循這個(gè)方式進(jìn)行設(shè)定，這樣就能減少開發(fā)中可能產(chǎn)生的沖突，透過 Storyboard 的方式，讓 iOS 開發(fā)變得更加便捷。

總結(jié)

盡管使用規(guī)范會(huì)因團(tuán)隊(duì)、項(xiàng)目、技術(shù)等的不同要素而有所差異。但總的來說，在開發(fā)時(shí)訂立一套團(tuán)隊(duì)Storyboard的使用規(guī)范，將會(huì)大大提升項(xiàng)目整體開發(fā)的質(zhì)量以及速度。