Storyboard使用技巧：分割Storyboard與AutoLayout (Split Storyboard and AutoLayout with Ratio)

這篇網誌可能是目前為止打的code最少的網誌，因為這次想分享的是storyboard使用的小技巧。之前在使用它的時候總覺得不好用，現在發現其實是我自己不會用。如標題所寫，這篇網誌有兩大主題：

1. 分割Storyboard：在大一點的專案，有時需要多人開發，或是自己開發的時候專案越長越大，這時候就需要使用這樣的技巧，把Storyboard分開管理。
2. 按照比例來AutoLayout：之前學習AutoLayout時沒有很用心，我只會用pin來設定間距，頂多用到對齊。現在才發現原來AutoLayout可以設定View和SuperView之間的比例關係。

在開始前各位可以先下載我準備的sample project，用模擬器打開來跑看看。

分割Storyboard

首先請先打開Main.storyboard，你應該會看到像下圖的畫面。

假設今天你的專案分成三大功能區塊（我用顏色來代表不同的功能區塊），分別用TabBar來切換，這三個功能區塊又分別使用三個NavigationController來管理。為了避免storyboard日後越長越肥大，又或者為了將程式分派給三個不同的工程師開發，這時候就需要分出三個storyboard。

專案視窗的左手邊可以看到我另外還有Blue、Red、Green三個storyboard，基本上跳轉的方式都一樣，我就用GreenVC來舉例，請看到GreenVC.m檔裡面的IBAction。

- (IBAction)change:(id)sender {
    //在main bundle中找到檔名為Green的storyboard並實體化
    UIStoryboard * green = [UIStoryboard storyboardWithName:@"Green" bundle:nil];
    //在剛剛實體化的storyboard中找到storyboardID為"green1"的ViewController並實體化
    UIViewController * vc = [green instantiateViewControllerWithIdentifier:@"green1"];
    //利用自己所屬的NavigationController進行push的動作
    [self.navigationController pushViewController:vc animated:YES];
}

這段程式碼做的工作就如我的註解一樣，值得一提的是我另外分出來的storyboard沒有NavigationController，而Run App的時後會發現NavigationController還能跨storyboard幫忙管理這些ViewController（真開心！）

依照比例AutoLayout

我用Green.storyboard的最右手邊的ViewController來舉例。在App執行時手機轉向它的畫面會像下圖

白色View的原點X座標為SuperView寬度的1/10，原點Y座標為NavigationBar寬度的兩倍。如果用我以前熟悉的pin來訂距離只能設定常數，無法依照比例作出調整。作法如下面的步驟：

在storyboard左手邊的Menu裡面點選白色的View，按住右鍵（或是control+左鍵）把藍線連到它的SuperView上。

放手後選擇Leading Space to Container Margin。

接著在storyboard左側的Menu可以看到我們剛剛新增的限制條件，請點選它。

在視窗右側的工具列可以看到一些欄位，這些欄位可以幫助我們設定比例條件。先解釋一下名詞：

First Item欄位裡面的View.Leading表示我們要設定的View的最左側X座標。

Relation欄位裡面的Equal表示等於，當然你可以選大於或小於，在這個sample裡面我們選等於。

Second Item欄位裡面的SuperView.Tailing Margin表示SuperView最右邊的X座標。

下面還有三個欄位，整個條件可以用這六個欄位表達：

First Item =(這是我們剛剛選的relation) Second Item x multiplie + constant。

換言之：
白色View的原點X座標 ＝ SuperView的寬度 x 1/10 + 0

而Priority表示這個條件的優先順位，在本篇中不會操作到。

接著我們設定Y座標：

同樣的拉線方式，這次選擇Top Space to Top Layout Guide。

看出來我設的條件是什麼嗎？

白色View原點Y座標 = SuperView上方列(此時是NavigationBar)的下緣Y座標 x 2 + 0

因為我的App有使用NavigationController所以這時候Top Layout Guid就是NavigationBar，否則它會是大家熟悉的電量與手機訊號顯示工具列。

最後再補上一個條件，這次拉線的目標是自己（白色的View拉給白色的View）

條件選擇Aspect Ratio就大功告成囉！

如果想要練習的話，我建議自己開一個Single View的project來從頭到尾自己做一次。這些小技巧不難，但是可以省下很多寫code的時間喔！