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 來構建界面的歷時包袱，完全使用純 Storyboard 來進行開發(fā)。

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

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

Storyboard 分離規(guī)范

除非是單頁面應用，在大多數(shù)情況下，使用單一 Storyboard 往往是不可行的，因為每個 App 通常由各種不一樣的復雜模塊構成，每當里面的一個元素的屬性或位置產(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 界面的構建語言之外，還擔當著界面預覽的角色。界面規(guī)范有一個原則，就是當把 Storyboard 展示給其他人的時候，盡量做到能讓別人一看就知道這個 Storyboard 是干什么的，界面之間的邏輯是怎樣的，界面大致的效果是如何的。

布局規(guī)范

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

View 和 View 之間的擺放，可以遵循從左往右，從上到下的原則，進行邏輯排列。因為在 Storyboard 里 View 之間的連線算法都是從 View 的右邊緣出發(fā)，到另外一個 View 的左邊緣結束，如果調(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)的效果。有興趣的，可以參考相關的文章介紹。

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

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

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

• 語言定義

• Autolayout 設置方式

• 界面自適應設置

• UITest 相關設置

• 更多

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

總結

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