利用多個 storyboard 和 storyboard reference 製作 App 畫面
Xcode 的 Storyboard 可以讓我們快速製作 App 畫面，但是當頁面一多時，將如下圖所示，一個 storyboard 塞了滿滿的畫面，產生以下問題:
𝟙 速度變慢。
當 Storyboard 裡的東西愈多時，將影響我們開啟它和編輯的速度。尤其當你的 Mac 不夠快時，速度將慢到讓人想換一台新的 Macbook Pro 。
𝟚 不方便編輯。
畫面太多，不方便編輯和尋找畫面 。
𝟛 版本管理容易有衝突。
當多人合作開發 App 時，如果大家都編輯同一個 storyboard，git 在合併時沒那麼聰明，時常會發生衝突。
利用 Refactor to Storyboard 將多個 controller 拆到另一個 storyboard
不過現在這些問題都不再是問題了，因為 Xcode 可以讓我們在不同的 storyboard 設計畫面，然後再將這些畫面串接起來。接下來我們就以 Ivy 同學的小王子 App 為例，一步步說明如何利用多個 storyboard 製作 App。
原本 Main.storyboard 包含 App 所有的頁面，我們想將第一個 tab，角色介紹的相關頁面搬到另一個 storyboard。
拖曳選取第一個 tab 的相關 controller
點選 Refactor to Storyboard
將剛剛選取的 controller 和 segue 搬到新的 storyboard。
- 方法 1: 從 Quick Actions 點選 Refactor to Storyboard
- 方法 2: 從 Menu 點選 Editor > Refactor to Storyboard。
設定 storyboard 的名字
Cool ! 第一個 tab 的畫面都搬到新的 storyboard，FirstTab.storyboard。
讓我們再回到 Main.storyboard，看看它現在的模樣。
Main.storyboard 變得清爽許多，剛剛搬家的 controller 都不見了。如下圖所示，tab bar controller 現在變成連到一個小小的長方形。
此時執行 App 後，將看到 App 的畫面跟我們將 controller 搬到 FirstTab.storyboard 前一模一樣。App 的功能沒變，但它內部的 storyboard 已經變得乾淨許多，不再是一個 storyboard 塞了滿滿的 controller。
認識 storyboard reference
此長方形稱為 storyboard reference，它就像任意門一樣，讓我們自由穿梭不同的 storyboard，從 storyboard 的 A 畫面連線到另一個 storyboard 的 B 畫面。
因此，關鍵就藏在 storyboard reference，接下來我們就點選它，瞧瞧它的 Attributes inspector，看看它有哪些東西吧。
如上圖所示，Storyboard 欄位說明 storyboard reference 連到 FirstTab.storyboard。只要設定此欄位，即可調整 storyboard reference 連到的 storyboard。
決定連到哪個 controller 的 Referenced ID
然而 storyboard 裡可以有多個 controller， storyboard reference 會連到哪個 controller 呢 ?
我們可以指定 controller，透過下圖的 Referenced ID 欄位。剛剛的例子裡，Referenced ID 欄位是空的，提示文字寫著 Initial View Controller，因此它將認為我們的目標為 storyboard 的第一個 controller，也就是開頭箭頭指到的 Initial View Controller。
回頭看看 FirstTab.storyboard，Xcode 聰明地將 Initial View Controller 設為 navigation controller，所以它將成為剛剛 storyboard reference 連結的 controller。
值得注意的，如果你不小心將 FirstTab.storyboard 的 Initial View Controller 取消，Xcode 將馬上發現問題，出現紅色錯誤提醒我們。
錯誤訊息告訴我們，它找不到 FirstTab.storyboard 的 initial view controller。
Main.storyboard references the initial view controller of FirstTab.storyboard, but no designated entry point was found.我們也可以指定 storyboard reference 連到特定的 controller，比方我們希望 storyboard reference 連結到 FirstTab.storyboard 的小王子頁面。
首先我們必須幫小王子頁面的 controller 取個名字，之後才能指定。點選小王子頁面的 controller 後，在 Identity inspector 分頁的 Storyboard ID 設定名字，比方下圖的 littlePrince。
接著回到 Main storyboard 的 storyboard reference，在 Reference ID 輸入 controller 的名字，在此我們輸入剛剛在小王子頁面 Storyboard ID 設定的 littlePrince。
若是直接雙擊上圖畫布裡的 storyboard reference littlePrince，我們還能立即切換到目標頁面，也就是跳到 FirstTab.storyboard 的小王子頁面。
App 啟動後，第一個 tab 的頁面順利地變成小王子。
如果輸入 Referenced ID 時不小心打錯字，輸入的名字找不到對應的 controller，Xcode 也會好心地顯示紅色錯誤提醒我們。
錯誤訊息告訴我們，它找不到 abc。
Did not find view controller with identifier "abc" in FirstTab.storyboard, referenced from Main.storyboard也許有人注意到，此時第一個 tab 少了 icon。那是因為小王子頁面原本沒有 Tab Bar Item。
接下來讓我們可將 Tab Bar Item 拖曳到小王子頁面，然後設定它的圖片跟文字。
App 啟動後，第一個 tab 也有美美的 icon 了 !
剛剛我們學會了如何將 storyboard 裡的 controller 搬到一個新的 storyboard。利用此技巧，我們可將已經開發了三個月，塞滿 controller 的 storyboard 大瘦身，比方將 5 個 tab 的畫面分到 5 個 storyboard。
手動新增 storyboard & storyboard reference
不過也有另一種情境。可能我們一開始就規劃要有幾個 storyboard，每個 storyboard 要有哪些 controller，此時我們變成先新增多個空白的 storyboard，在 storyboard 裡加入 controller，然後在連接 segue 時再手動加入 storyboard reference，將不同 storyboard 的頁面串接起來。關於新增 storyboard 和加入 storyboard reference 的步驟，可參考以下說明。
新增 storyboard
- File > New > File
- 選擇 iOS 下 User Interface 的 Storyboard。
- 輸入 Storyboard 的名字。
剛生成的 storyboard 裡將有一個空白的 view controller，我們可以發揮創意修改它或加入更多的 controller。
為了方便 storyboard reference 連到 controller，我們也可以勾選它的 Is Initial View Controller，讓它成為 Second.storyboard 的第一個 controller。
加入和 segue 連結的 storyboard reference
- 從 Object library 找到 storyboard reference，將它加到 storyboard 的畫布上。
以下我們將它加到小王子專案的 Main.storyboard。
- 將 segue 連到 storyboard reference。
比方在下圖的 The End 右上角加一個 next 的 Bar Button Item，然後連 segue 到 storyboard reference。
- 設定 storyboard reference 的 Storyboard & Reference ID 欄位。
下圖的設定將讓 storyboard reference 跳到 Second.storyboard 的第一個 controller。
利用多個 storyboard 製作 Tab Bar App
多個 storyboard 的設計滿適合多人合作開發 Tab Bar App，相關說明可參考以下連結。
設定 iOS App 主畫面的 storyboard
當我們有多個 storyboard 時，App 一打開的顯示的畫面不見得要在 Main.storyboard，我們可以指定其它的 storyboard 當第一個畫面的 storyboard，相關說明可參考以下連結。
