本文翻譯自Chris Grant的《iOS9 Day-by-Day :: Day 3 :: Storyboard References》(https://www.shinobicontrols.com/blog/ios9-day-by-day-day3-storyboard-references)。感謝Chris Grant的辛苦工作!
用Storyboard實現過復雜應用就會知道,當頁面很多的情況下,它會變得非常大。這會使程序變得很慢并且無法管理。我們可以將界面分散在多個Storyboard中,但是這樣需要編寫不少代碼將它們粘合在一起。
為了解決這個問題,蘋果在iOS 9中引入了Storyboard References的概念。它允許不同Storyboard文件之間的頁面通過Segue進行連接。這樣就可以將程序進行模塊化,讓單個Storyboard更小更容易維護。這樣更加便于理解,同時在團隊開發的情況下,很并起來更加輕松。
簡化Storyboard
我們通過簡化一個現有應用的結構來演示Storyboard References如何工作。原始項目可以在GitHub上下載到。其中我們從OldMain.Storyboard開始。但這個文件實際上并沒有被程序所使用,僅供參考。如果想要跟隨下面的內容,我們可以將其它Storyboard文件刪除,并將OldMain.Storyboard改為Main.Storyboard。
原始Storyboard截圖如下:

該項目使用UITabBarController
作為初始頁面。它包含3個導航控制器,并且每個導航控制器都有自己的根視圖控制器。第一個是一個表視圖控制器(UITableViewController
)實現的聯系人列表;第二個為表視圖控制器實現的常用聯系人列表。這兩個都會跳轉到同一個顯示聯系人詳情的頁面。第三個導航控制器包含更多關于應用程序的信息,比如帳號詳情、反饋以及關于。
這個應用程序雖然還不是很復雜,但Storyboard以及很大了。我見過比這大十倍的Storyboard。下面我們來進行分解。從哪里著手呢?很顯然,整個程序被標簽控制器分為三個部分。
我們從最簡單的開始。在Main.Storyboard的右邊,我們可以看到它為大家提供了更多關于程序的信息。這些視圖控制器都是自包含的,并且沒有與應用程序中的其它頁面鏈接到相同的地方。

拖動選中這些視圖控制器,使之高亮,然后選擇“Editor”菜單->“Refactor to Storyboard”。

為新的Storyboard命名為“More.storyboard”,并且保存。Xcode會自動將“More.storyboard”添加到項目,并打開。

這時再返回“Main.storyboard”,就可以看到標簽控制器的第三個頁面以及變成了一個Storyboard Reference。

就這樣,我們不只是將整個界面的一部分獨立到一個Storyboard中,并且允許以后重用。雖然在這個例子里看不出什么特別的用處,但在實際應用中非常方便。
接下來我們將其它區域也分離到單獨的Storyboard中。這一步可能會比剛才要復雜一些,因為其中有兩個頁面鏈接到同一個位置。我們有兩種選擇:
- 將公共視圖控制器保留在Main.storyboard。
- 將公共視圖控制器重構到一個單獨的Storyboard文件。
這兩中選擇都可以正常工作。但是我個人習慣將它們分離開來。同樣,選擇聯系人詳情頁面,然后使用Editor菜單對它進行重構(“Refactor to Storyboard”)。
回到Main.storyboard,并且選擇聯系人列表的導航控制器和表視圖控制器,同樣重構到一個單獨的Storyboard。繼續對常用聯系人列表做同樣的事情。結果如下:

現在我們成功將Main.storyboard分為5個獨立的實體。
- Main.storyboard只包含一個標簽控制器。
- Contacts.storyboard由一個導航控制器和表視圖控制器組成,并且進一步鏈接到ContactDetail.storyboard。
- Favorites.storyboard同樣包含一個導航控制器和表視圖控制器,并且鏈接到ContactDetail.storyboard。
- ContactDetail.storyboard顯示單個視圖控制器,并且能夠被聯系人列表和常用聯系人列表所訪問。
- More.storyboard包含一個視圖控制器對象來顯示程序的信息。
這樣重構以后,整個程序就被劃分為多個模塊,能夠簡化我們以后的開發。
從Storyboard Reference打開指定的視圖控制器
上面已經演示了如何從一個已有的Storyboard對Segue展示的內容重構為單獨的Storyboard。但是還沒有將如何手動創建Storyboard Reference。
假設我們想在聯系人列表的右上角增加一個UIBarButtonItem
來顯示更多關于帳號的信息,而不需要返回設置頁面。
打開Contacts.Storyboard并且將一個UIBarButtonItem
拖到導航條上,并且將標題改為“Account”。然后從控件欄中拖一個“Storyboard Reference”對象到Storyboard上,并打開屬性檢查查看。
在屬性欄選擇“More” Storyboard,然后在“ReferencedID”中輸入“accountViewController”。這樣就成功引用了帳號詳情頁面。

按住“Control + 單擊“,從聯系人列表上拖動連線到新創建的Storyboard Reference上。

整個項目的結果在GitHub上下載。
更多信息
更多關于Xcode 7中Storyboard的用法,建議觀看WWDC session 215:”What's New in Storyboards”。剛開始的20分鐘將的就是Storyboard Reference。
戴維營教育
戴維營教育(Dive In Education),潛心做IT職業教育!緊跟時代潮流,不弄虛作假!不忘初心!