[[142029]]

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

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

簡化 Storyboard

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

下面的截圖，是原來的 Storyboard 的樣子。

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

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

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

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

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

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

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

#p#

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

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

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

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

我們在項目中把 Main.storyboard 拆分為了5個 storyboard。

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

這個重構(gòu)讓我們的 storyboard 變的更加的模塊化、組件化?？梢詭椭覀兒竺娓玫拈_發(fā)這個應(yīng)用。

從 Storyboard Reference 中打開一個特定的 viewController

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

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

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

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

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

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

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

延伸閱讀

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

這是一個系列文章，查看更多請移步目錄頁