天天看點

Objective-C彈出模态學習之Storyboard References

       如果你曾經使用 interface builder 建立過一個複雜、界面非常多的應用,你就會明白最後那些Storyboards 檔案變的有多大。他會迅速變的無法管理,阻礙你的進度。自從引入 Storyboard 以來,其實是可以把你的應用的不同子產品切開到不同的 Storyboard 中的。在過去,這要手動建立多個 Storyboard 檔案,并且要寫大量的代碼。為了解決這個問題,在 iOS 9 中蘋果介紹了 Storyboard References 這個概念。Storyboard References 允許你從 segue 中引用其他 storyboard 中的 viewController。這意味中你可以保持不同功能子產品化,同時 Storyboard 的體積變小并易與管理。不僅容易了解了,和團隊一起工作時,合并(工作成果)也變的簡單了。

簡化 Storyboard

       為了示範Storyboard References是如何工作的,讓我們拿一個建立好的應用,并試着簡化一下他的結構。這個有問題的應用已經上傳到了 Github 上,如果你希望跟着做,并且看到最後的結果。以 OldMain.Storyboard 命名的檔案是我們的最初檔案。在這個項目中僅僅是被引用進來,我們并沒有用它。如果你想從頭開始跟着做,删除所有其他的 storyboard,然後把 OldMain.Storyboard 檔案改為 Main.Storyboard.

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

Objective-C彈出模态學習之Storyboard References

       正如你們看到的,我們使用了 TabBarController 作為初始的 viewController.這個 TabBarController 擁有三個 navigationController,每個對應一個不同的根 viewController。第一個是個 tableViewController,有一個聯系人清單,第二個也是一個 tableViewController,是收藏的聯系人清單。這兩個都連結到一個詳細頁的 viewController 上。第三個 navigationController,包括了更多的資訊,一個賬戶詳細頁,一個回報頁和一個關于頁。

       盡管應用還遠稱不上複雜,但是這個 Storyboard 已經非常大了。我們至少看到10個以上的 viewController,我們明白,很快就會變的難以管理。現在我們可以拆開他們了,那麼從哪裡開始呢?這個例子中,我們有三個不同的子產品。我們可以清楚地在 tabBarController 上辨識出他們來。

       我們從最簡單的開始,在 Main.storyboard 的右手邊,你可以看到這個給應用提供更多資訊的 viewController,他是單獨的,不和其他的 viewController 有連結。

       我們要做的是,通過拖動選中他們(高亮顯示),然後點選 Xcode 的菜單欄,選擇”Editor->Refactor to Storyboard”。

Objective-C彈出模态學習之Storyboard References

       給這個 storyboard 起個名字叫 More.storyboard 然後點選儲存。More.storyboard 就會自動添加到應用中,并且處于打開狀态。

Objective-C彈出模态學習之Storyboard References

       你可以看到 storyboard 已經建立成功了。這個時候,如果你傳回到 Main.storyboard 你可以看到tabBarController 其中的一個 viewController 已經變了,變成了一個指向 storyboard 的引用。

Objective-C彈出模态學習之Storyboard References

       太棒了。我們把整個一部分的 UI 劃分到了另外一個 storyboard 中。不僅分割開了子產品,并且能夠在其他地方複用。雖然在我們這個例子中用不着,但他是非常有用,有價值的新特性。現在我們要把其他的子產品也分拆開,這要比前面一步複雜一點兒,因為事實上這兩部分連結了同一個viewController。兩個 TableView 都通過一個 segue 展示聯系人詳細資訊頁。你可以選擇怎麼做?

  1. 保持 viewController 在 Main.storyboard
  2. 重構 viewController到自己的 storyboard

       兩種選擇都可以,我個人傾向于把他們分開。是以選中詳細頁 viewController 然後點選 Xcode 的菜單“Editor->Refactor to Storyboard”. 給新的 storyboard 取個名字,并儲存。這會建立并打開一個新的 storyboard。他會連結到聯系人頁和收藏的聯系人頁的 tableViewController 中。現在回到 Main.storyboard 去,選中 navigation 和聯系人的 tableViewController,把他們建立為新的 storyboard 引用。同樣的方法把收藏的 viewController 也操作一遍。下面是操作後的結果。

Objective-C彈出模态學習之Storyboard References

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

  1. Main.storyboard 包含一個 tabBarController 和三個連結到其他 storyboard 的

    controller

  2. Contacts.storyboard 包含 一個導航欄和一個tableViewController,當點選一行時,連結到ContactDetails.storyboard
  3. Favorites.storyboard 包含一個導航欄和一個tableViewController,當點選一行時,連結到ContactDetails.storyboard
  4. ContactDetail.storyboard 單獨的viewController展示聯系人的詳細資訊,并且可以連結到

    Contact 和 favorite 的 storyboard 中

  5. More.storyboard 包括一個viewController,展示關于 app 的更多資訊。

       這個重構讓我們的 storyboard 變的更加的子產品化、元件化。可以幫助我們後面更好的開發這個應用。

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

       到現在為止,我們隻是分享了怎麼從 storyboard 的 segue 中建立和展示 storyboard reference,還沒有展示不用重構工具的情況下,如何手動添加 storyboard。

       假設,我們要在聯系人頁的右上角添加一個“account”按鈕,點選這個按鈕可以快速的到達賬戶頁檢視更多資訊,而無需去到設定頁面裡點選。

       打開 Contacts.Storyboard, 拖拽一個 UIBarButtonItem 到 tableViewController 的導航欄上,把 title 設定為 “Account”。然後,找到“Storyboard Reference”控件,拖拽一個到 Contacts Storyboard上來。并且打開 attributes inspector 面闆。

       把 Storyboard 屬性選為“more”,把 Referenced ID 屬性設定為“accountViewController”。這允許我們引用賬号資訊頁的 viewController,而不是連結到 more storyboard 的初始 view controller上。

Objective-C彈出模态學習之Storyboard References

       選中“account”的按鈕,按住 Control 健和滑鼠左鍵,拖拽到 storyboard reference上,這樣就建立了一個 segue。

Objective-C彈出模态學習之Storyboard References

       最後一步是,設定 accountViewController 的 identifier。打開 More.storyboard 選中 accountViewController,打開 identity inspector 設定 Storyboard ID 為 “accountViewController”。這樣,當你點選 account 按鈕時,就會轉到賬号的詳細頁面去。

       如果所見,添加 Storyboard Reference,無論是通過重構工具還是手動添加都非常簡單、直接、有效。他允許你建立更加元件化、可複用化、子產品化的應用。最後,這個指南的最終結果可以在Github 上檢視。

轉自:http://www.jianshu.com/p/106c37105453