iOS之Storyboard導航大揭秘（1）

本文使用的軟件版本：

IOS：6.1

XCode：4.6

     Storyboard（故事板）是XCode4.2才開始支持的，為了使設計View更容易。盡管用以前的nib（xib）拖拖拽拽也沒問題，不過卻需要 在各種文件之間來回切換，對于初學者很容易崩潰。Storyboard在這方面改進了不少，基本上只要在storyboard界面就可以完成一切，尤其是 View導航，可以不編寫一行代碼就可以搞定。盡管storyboard在實現View導航方面要比xib更容易使用，不過對于初學者來說仍然有一些難 度，因此本文及后面幾篇文章會詳細介紹如何使用storyboard實現各種類型的導航。

     本文會介紹一種最簡單的導航方式，也就是單擊當前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控件中的文本就會變成“李寧”了。

源代碼下載