[[142029]]

如果你曾經(jīng)使用 interface builder 創(chuàng)建過(guò)一個(gè)復(fù)雜、界面非常多的應(yīng)用，你就會(huì)明白***那些Storyboards 文件變的有多大。他會(huì)迅速變的無(wú)法管理，阻礙你的進(jìn)度。自從引入 Storyboard 以來(lái)，其實(shí)是可以把你的應(yīng)用的不同模塊切開(kāi)到不同的 Storyboard 中的。在過(guò)去，這要手動(dòng)創(chuàng)建多個(gè) Storyboard 文件，并且要寫(xiě)大量的代碼。

為了解決這個(gè)問(wèn)題，在 iOS 9 中蘋(píng)果介紹了 Storyboard References 這個(gè)概念。Storyboard References 允許你從 segue 中引用其他 storyboard 中的 viewController。這意味中你可以保持不同功能模塊化，同時(shí) Storyboard 的體積變小并易與管理。不僅容易理解了，和團(tuán)隊(duì)一起工作時(shí)，合并（工作成果）也變的簡(jiǎn)單了。

簡(jiǎn)化 Storyboard

為了演示Storyboard References是如何工作的，讓我們拿一個(gè)創(chuàng)建好的應(yīng)用，并試著簡(jiǎn)化一下他的結(jié)構(gòu)。這個(gè)有問(wèn)題的應(yīng)用已經(jīng)上傳到了 Github 上，如果你希望跟著做，并且看到***的結(jié)果。以 OldMain.Storyboard 命名的文件是我們的最初文件。在這個(gè)項(xiàng)目中僅僅是被引用進(jìn)來(lái)，我們并沒(méi)有用它。如果你想從頭開(kāi)始跟著做，刪除所有其他的 storyboard，然后把 OldMain.Storyboard 文件改為 Main.Storyboard.

下面的截圖，是原來(lái)的 Storyboard 的樣子。

正如你們看到的，我們使用了 TabBarController 作為初始的 viewController.這個(gè) TabBarController 擁有三個(gè) navigationController,每個(gè)對(duì)應(yīng)一個(gè)不同的根 viewController。***個(gè)是個(gè) tableViewController,有一個(gè)聯(lián)系人列表，第二個(gè)也是一個(gè) tableViewController，是收藏的聯(lián)系人列表。這兩個(gè)都鏈接到一個(gè)詳細(xì)頁(yè)的 viewController 上。第三個(gè) navigationController,包括了更多的信息，一個(gè)賬戶(hù)詳細(xì)頁(yè)，一個(gè)反饋?lái)?yè)和一個(gè)關(guān)于頁(yè)。

盡管應(yīng)用還遠(yuǎn)稱(chēng)不上復(fù)雜，但是這個(gè) Storyboard 已經(jīng)非常大了。我們至少看到10個(gè)以上的 viewController，我們明白，很快就會(huì)變的難以管理。現(xiàn)在我們可以拆開(kāi)他們了，那么從哪里開(kāi)始呢？這個(gè)例子中，我們有三個(gè)不同的模塊。我們可以清楚地在 tabBarController 上辨別出他們來(lái)。

我們從最簡(jiǎn)單的開(kāi)始，在 Main.storyboard 的右手邊，你可以看到這個(gè)給應(yīng)用提供更多信息的 viewController,他是單獨(dú)的，不和其他的 viewController 有鏈接。

我們要做的是，通過(guò)拖動(dòng)選中他們（高亮顯示），然后點(diǎn)擊 Xcode 的菜單欄，選擇"Editor->Refactor to Storyboard"。

給這個(gè) storyboard  起個(gè)名字叫 More.storyboard 然后點(diǎn)擊保存。More.storyboard 就會(huì)自動(dòng)添加到應(yīng)用中，并且處于打開(kāi)狀態(tài)。

你可以看到 storyboard 已經(jīng)創(chuàng)建成功了。這個(gè)時(shí)候，如果你返回到 Main.storyboard 你可以看到tabBarController 其中的一個(gè) viewController 已經(jīng)變了，變成了一個(gè)指向 storyboard 的引用。

太棒了。我們把整個(gè)一部分的 UI 劃分到了另外一個(gè) storyboard 中。不僅分割開(kāi)了模塊，并且能夠在其他地方復(fù)用。雖然在我們這個(gè)例子中用不著，但他是非常有用，有價(jià)值的新特性。

#p#

現(xiàn)在我們要把其他的模塊也分拆開(kāi)，這要比前面一步復(fù)雜一點(diǎn)兒，因?yàn)槭聦?shí)上這兩部分鏈接了同一個(gè)viewController。兩個(gè) TableView 都通過(guò)一個(gè) segue 展示聯(lián)系人詳細(xì)信息頁(yè)。你可以選擇怎么做？

• 保持 viewController 在 Main.storyboard
• 重構(gòu) viewController到自己的 storyboard

兩種選擇都可以，我個(gè)人傾向于把他們分開(kāi)。所以選中詳細(xì)頁(yè) viewController 然后點(diǎn)擊 Xcode 的菜單“Editor->Refactor to Storyboard”. 給新的 storyboard 取個(gè)名字，并保存。這會(huì)創(chuàng)建并打開(kāi)一個(gè)新的 storyboard。他會(huì)鏈接到聯(lián)系人頁(yè)和收藏的聯(lián)系人頁(yè)的 tableViewController 中。

現(xiàn)在回到 Main.storyboard 去，選中 navigation 和聯(lián)系人的 tableViewController,把他們創(chuàng)建為新的 storyboard 引用。同樣的方法把收藏的 viewController 也操作一遍。下面是操作后的結(jié)果。

我們?cè)陧?xiàng)目中把 Main.storyboard 拆分為了5個(gè) storyboard。

• Main.storyboard 包含一個(gè) tabBarController 和三個(gè)鏈接到其他 storyboard 的 controller
• Contacts.storyboard 一個(gè)導(dǎo)航欄和一個(gè)tableViewController，當(dāng)點(diǎn)擊一行時(shí)，鏈接到ContactDetails.storyboard
• Favorites.storyboard 一個(gè)導(dǎo)航欄和一個(gè)tableViewController，當(dāng)點(diǎn)擊一行時(shí)，鏈接到ContactDetails.storyboard
• ContactDetail.storyboard  單獨(dú)的viewController展示聯(lián)系人的詳細(xì)信息，并且可以鏈接到 Contact 和 favorite 的 storyboard 中
• More.storyboard 包括一個(gè)viewController，展示關(guān)于 app 的更多信息。

這個(gè)重構(gòu)讓我們的 storyboard 變的更加的模塊化、組件化。可以幫助我們后面更好的開(kāi)發(fā)這個(gè)應(yīng)用。

從 Storyboard Reference 中打開(kāi)一個(gè)特定的 viewController

當(dāng)現(xiàn)在為止，我們只是分享了怎么從 storyboard 的 segue 中創(chuàng)建和展示 storyboard reference，還沒(méi)有展示不用重構(gòu)工具的情況下，如果手動(dòng)添加 storyboard。

假設(shè)，我們要在聯(lián)系人頁(yè)的右上角添加一個(gè)“account”按鈕，點(diǎn)擊這個(gè)按鈕可以快速的到達(dá)賬戶(hù)頁(yè)查看更多信息，而無(wú)需去到設(shè)置頁(yè)面里點(diǎn)擊。

打開(kāi) Contacts.Storyboard, 拖拽一個(gè) UIBarButtonItem 到 tableViewController 的導(dǎo)航欄上，把 title 設(shè)置為 “Account”。然后，找到“Storyboard Reference”控件，拖拽一個(gè)到 Contacts Storyboard上來(lái)。并且打開(kāi) attributes inspector 面板。

把 Storyboard 屬性選為“more”，把 Referenced ID 屬性設(shè)置為“accountViewController”。這允許我們引用賬號(hào)信息頁(yè)的 viewController,而不是鏈接到 more storyboard 的初始 view controller上。

選中“account”的按鈕，按住 Control 健和鼠標(biāo)左鍵，拖拽到 storyboard reference上，這樣就創(chuàng)建了一個(gè) segue。

***一步是，設(shè)置 accountViewController 的 identifier。打開(kāi) More.storyboard 選中 accountViewController，打開(kāi) identity inspector 設(shè)置 Storyboard ID 為 “accountViewController”。這樣，當(dāng)你點(diǎn)擊 account 按鈕時(shí)，就會(huì)轉(zhuǎn)到賬號(hào)的詳細(xì)頁(yè)面去。

如果所見(jiàn)，添加 Storyboard Reference，無(wú)論是通過(guò)重構(gòu)工具還是手動(dòng)添加都非常簡(jiǎn)單、直接、有效。他允許你創(chuàng)建更加組件化、可復(fù)用化、模塊化的應(yīng)用。***，這個(gè)指南的最終結(jié)果可以在Github 上查看。

延伸閱讀

查看更多關(guān)于 Xcode 7 的 Storyboard References 的內(nèi)容，可以觀(guān)看 WWDC 2015 的 session 215. What's New in Storyboards。前20分鐘講的正是 Storyboard References 的內(nèi)容。

這是一個(gè)系列文章，查看更多請(qǐng)移步目錄頁(yè)