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

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

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

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

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

Storyboard 分離規(guī)范

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

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

Storyboard 命名規(guī)范

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

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

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

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

例如：

album CollectionView

username Label

avatar ImageView

content TextView

• 規(guī)則簡單，可讀性強。

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

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

(點擊放大圖像)

Storyboard 界面規(guī)范

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

布局規(guī)范

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

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

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

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

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

(點擊放大圖像)

設置規(guī)范

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

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

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

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

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

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

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

• 語言定義

• Autolayout 設置方式

• 界面自適應設置

• UITest 相關(guān)設置

• 更多

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

總結(jié)

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