IOS之Storyboard導航大揭秘（1）

本文使用的軟體版本：

IOS：6.1

XCode：4.6

     Storyboard（故事板）是XCode4.2才開始支援的，為了使設計View更容易。儘管用以前的nib（xib）拖拖拽拽也沒問題，不過卻需要 在各種檔案之間來回切換，對於初學者很容易崩潰。Storyboard在這方面改進了不少，基本上只要在storyboard介面就可以完成一切，尤其是 View導航，可以不編寫一行代碼就可以搞定。儘管storyboard在實現View導航方面要比xib更容易使用，不過對於初學者來說仍然有一些難度.

     本文會介紹一種最簡單的導航方式，也就是單擊當前View的一個Button，會跳到另外一個View上，並且向這個View傳遞資料。

     首先在XCode中建立一個“SingleView Application”類型工程，主要要選擇“Use Storyboard”和“Use Automatic Reference Counting”，這樣就可以使用ARC了，也會自動建立一個storyboard。工程名是StoryboardDemo1。

     接下來再建立一個Objective-CClass，類名為MyViewController，注意Superclass為 UIViewController，並且下面兩個複選框都不要選中，因為這裡不需要XIB檔案。如果按著這些步驟做，最後StoryboardDemo1 工程的目錄結構1所示。

圖1

      接下來要做的是開啟MainStoryboard.storyboard檔案，會看到介面上有一個預設的View。這是根視圖，也就是說程式運行會首先要 顯示該視圖。由於本文的目的是實現導航，而IOS規定所有參與導航的視圖必須由UINavigationController控制。所以還需要在 storyboard上加一個UINavigationController，並且程式的入口由View變成了 UINavigationController。完成這項工作的方法很多，先來看一個超級無敵簡單的方法，就是選中storyboard預設的View， 然後點擊“Editor”>“Embed In”>“Navigation Controller”功能表項目，XCode就會自動在storyboard上產生一個UINavigationController，並更改啟動入口。最 終storyboard的效果2所示。

圖2

      除了這種簡單的方法，還可以直接從控制項面板上拖一個UINavigationController控制項，不過預設這個控制項還帶了一個 UITableViewController。這個東西並不需要，所以可以刪除UITableViewController。然後選中 storyboard中的UINavigationController，並按住ctrl鍵，然後拖動滑鼠到預設視圖上，這時會彈出一個菜單，選擇最下面 的“root view controller”，最後的效果與圖2完全一樣。當然，為了顯示自己有極客範，也可以在storyboard上放一個 UINavigationController控制項後，進入storyboard的原始碼檔案（xml格式的檔案），找到預設視圖的聲明代碼，其實也很好 找，只要設定了預設視圖導航條的標題，就會在這段代碼的頂端出現一行注釋，3所示。我們要找的就是<viewController>標籤 的id屬性值。該屬性值唯一標識了預設視圖，在當前storyboard設定檔中不會重複。

圖3

接下來尋找導航條(UINavigationControlle)的聲明代碼，也可以根據自動產生的注釋，4所示。

圖4

     我們只關心<navigationController>標籤中的<connections>標籤的 destination屬性值，<connections>標籤標示當前的導航控制器直接與哪個視圖串連，也就是導航控制器中的第一個視圖。 只要將該屬性值改成預設視圖的id屬性值即可。當然，該屬性值預設是指向UITableViewController的id屬性值的。

      接下來雙擊預設視圖上面的導航條，輸入標題文本“首頁”，並在預設視圖上放置一個Button，Title為“顯示新視圖”。

     下面在storyboard上再放一個ViewController，並且在View上放置一個UITextField控制項（可以放任何控制項，這裡只是為了示範方便），

     儘管多個View會放到一個storyboard中，但不同的View會使用不同的原始碼檔案，在前面已經建了一個MyViewController類， 所以這個新的View會使用MyViewController類。然後需要將這個View與MyViewController類關聯。選擇 ViewController，在右側面板中選擇第3個按鈕，設定MyViewController，5所示。

圖5

     接下來為UITextField在MyViewController.h檔案中設定Outlet（名為textField，用於引用該控制項）。

     現在選擇預設視圖上的button，然後按住ctrl鍵，拖動滑鼠到新放置的視圖（上面有UITextField控制項的視圖），會彈出一個菜單，選中“push”，其他的選項不能用於這種導航方式。

     到現在為止，storyboard上共有一個導航控制器和兩個視圖控制器，串連關係6所示。

圖6

       現在就可以運行程式了，然後點擊“顯示新視圖”按鈕，就可以切換到新視圖，並且在新視圖左上方會顯示一個導覽按鈕，點擊會返回“首頁”視圖。

      還有一個問題，如何在兩個視圖直接傳遞資料呢？當然可以用全域變數或靜態變數，不過這些方式有些不妥（全域和靜態變數用多了不是什麼好事）。

      這裡介紹一種通過prepareForSegue:方法傳遞資料的方法，由於預設視圖對應的原始碼檔案是ViewController.m，所以在該檔案中實現prepareForSegue:方法，代碼如下：

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender  {      //  判斷啟動的目標View是否為MyViewController     if([[segue destinationViewController] class] == [MyViewController class])      {          MyViewController *myView = [segue destinationViewController];          [myView setText:@"李寧"];      }  } 

      當導航到MyViewController之前（已經建立了MyViewController對象，但還沒調用 MyViewController.viewDidLoad方法）系統會調用prepareForSegue:方法。並且可以通過 [seguedestinationViewController]方法擷取目標視圖的對象，並調用視圖對象中的方法設定任何的參數值。這裡在 MyViewController.m中實現了setText方法，用於設定mText變數，然後在 MyViewController.viewDidLoad方法中通過mText變數值設定UITextField控制項的顯示文本。

      除了可以通過[seguedestinationViewController]方法判斷目標視圖外，還可以使用下面的代碼。

    -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender      {          if([segue.identifier isEqualToString:@"myview"])          {              MyViewController *myView = [segue destinationViewController];              [myView setText:@"李寧"];          }      }  

     其中segue.identifier表示瀏覽連線的標識，也就是單擊圖6中新視圖和預設視圖直接連線中間的圓圈後，在右側的Identifier文字框的值，7所示。

圖7

現在運行程式，當導航到新視圖後UITextField控制項中的文本就會變成“李寧”了。

原始碼下載