Storyboard多View的切換 [xcode 4.4.1]

 

概述

    Storyboard，我直接翻譯為故事畫板，是Xcode4.2新增的又一個特性，它將原有工程中的所有xib文件集成在一起，用拖曳的方式建立ViewController相關之間的跳轉關系，使得整個程序的UI跳轉邏輯清楚明了。Storyboard可以幫助你解決寫很多重復的跳轉方法的麻煩，節省很多時間，以便你能夠完全的專注於核心功能的實現上。

 

    簡單地說，Storyboard引入了2個概念：

1. scene：一個場景，由一個viewController和相關的xib表示。
2. segue：在這是用於連接scenes，其有多種類型，包括：Push，Modal，Popover and more。當然segue也負責傳遞數據和返回數據。

    整個程序的界面轉換就是在各個scene之間切換。界面跳轉關系，比如按哪個鍵跳到哪個界面，是由segue來描述。segue也可以帶數據，以便做數據傳遞。

 

學習目標

1.  使用NIB文件View跳轉
2.  Storyboard 內View連接關系
3.  使用編程方式跳轉View

 

使用NIB文件View跳轉

    在開始講Storyboard之前，我們來使用以前NIB方式來建立一個程序，從最基礎的方式來感受一下，XIB與Stroyboard之間的區別，明白之間的機制。

 1. 創建一個空的項目，使用Empty Application 模板創建項目。如下圖所示：

 

這個模板創建出來的項目只包含一個Appdelegate.h與Appdelegate.m文件。

 

 2. 我們創建一個View，做為第一個View，或者稱為Root View。

 

 

3. 打開RootViewController.xib，添加Label與Button兩個控件，如下圖：

 

 4. 修改AppDelegate.h 文件

 
           1  
          #import <UIKit/UIKit.h> 
          
 
           2  
          #import  
          " 
          RootViewController.h 
          " 
          
 
           3  
          
 
           4  
          @interface AppDelegate : UIResponder <UIApplicationDelegate> 
          
 
           5  
          
 
           6 @property (strong, nonatomic) UIWindow *window; 
          
 
           7  
          
 
           8  
          // 
           視圖 
          
  
           9  
          @property (strong,nonatomic) RootViewController *viewController; 
          
 
          10  
          
 
          11  
          @end 
         

 5. 修改AppDelegate.m 文件

 
           1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
          
 
           2 { 
          
 
           3     self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; 
          
 
           4      
          // 
           Override point for customization after application launch. 
          
  
           5  
              self.window.backgroundColor = [UIColor whiteColor]; 
          
 
           6      
          
 
           7      
          // 
           實例化視圖 
          
  
           8  
              self.viewController = [[RootViewController alloc] initWithNibName: 
          @" 
          RootViewController 
          " bundle:nil]; 
          
 
           9      
          
 
          10      
          // 
           添加把視圖添加到Window中 
          
  
          11  
              self.window.rootViewController = self.viewController; 
          
 
          12      
          
 
          13     [self.window makeKeyAndVisible]; 
          
 
          14      
          return YES; 
          
 
          15 } 
         

 6. 到這一步，運行后，就可以顯示出視圖了，我們要做的是視圖跳轉，所以需要添加一個跳轉后視圖，假設我們的新視圖名為： TwoViewController，並且在新的視圖中，添加一個Label。

 

 7.給RootViewController 的Button按鈕添加一個事件

 
          1  
          #import <UIKit/UIKit.h> 
          
 
          2  
          #import  
          " 
          TwoViewController.h 
          " 
          
 
          3  
          
 
          4  
          @interface RootViewController : UIViewController 
          
 
          5 - (IBAction)btnClick:( 
          id)sender; 
          
 
          6  
          
 
          7  
          @end 
         

 

 
          1 - (IBAction)btnClick:( 
          id)sender { 
          
 
          2      
          
 
          3      
          // 
           實例化視圖 
          
  
          4  
              TwoViewController *controller = [[TwoViewController alloc] initWithNibName: 
          @" 
          TwoViewController 
          " bundle:nil]; 
          
 
          5      
          
 
          6      
          // 
           跳轉視圖 
          
  
          7  
              [self presentModalViewController:controller animated:YES]; 
          
 
          8 } 
         

 8. 完成，是不是很簡單，大家可以試一下，在這段，就不提供源代碼下載了。

 

Storyboard 內View連接關系

  在Storyboard中，segue有幾種不同的類型，在iphone和ipad的開發中，segue的類型是不同的。
  1. 在iphone中，有：push，modal，和custom三種不同的類型，這些類型的區別在與新頁面出現的方式。
  2. 而在ipad中，有：push，modal，popover，replace和custom五種不同的類型。

  詳細說明如下：

1) modal
    最常用的場景，新的場景完全蓋住了舊的場景。用戶無法再與上一個場景交互，除非他們先關閉這個場景。是在viewController中的標准切換的方式，包括淡出什么的，可以選切換動畫。

2) push
    Push類型一般是需要頭一個界面是個Navigation Controller的。注：是在navigation View Controller中下一級時使用的那種從右側划入的方式。
 
3) popover(iPad only)
    就是采用浮動窗的形式把新頁面展示出來，只有ipad下才有用。
 
4) replace (iPad only)
    替換當前scene，只有ipad下才有用。
 
5) custom
    自定義跳轉方式，需要自定義繼承於UIStoryboardSegue的子類。

接下來，我們用幾個例子，來說明model,push,custom的區別。

1. 創建一個空項目， 使用Empty Application 模板創建項目，其實可以使用其他模板，在此是為了進一步了解機制，選擇最原始的方式來進行。

2. 創建一個MainStoryboard.storyboard文件，如下圖所示：

 

3. 打開MainStoryboard.storyboard 拖一個View Controller,如下圖所示：

 

 注：

（1.）Initial Scene：初始化Storyboard時顯示此視圖。 這個選擇框，如果只有一個視圖，將自動選擇。

（2.）Identifier: 識別碼，在編程中跳轉時需要，在此我們先設置成：First

 

 4. 設置項目使用主Storyboard，如圖所示：

 

 5. 修改AppDelegate.m

 
           1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
          
 
           2 { 
          
 
           3      
          /* 
           刪除以下的代碼，使用Storyboard后，不需要這此代碼，只需要 return YES;就可以了
  
           4  
              self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
  
           5  
              // Override point for customization after application launch.
  
           6  
              self.window.backgroundColor = [UIColor whiteColor];
  
           7  
              [self.window makeKeyAndVisible];
  
           8  
               
          */ 
          
 
           9       
          return YES; 
          
 
          10 } 
         

 

6. 到此，運行就可以看到效果，沒有騙你，是不是很簡單。

7. 我們要看是視圖跳轉，所以還需要添加一個視圖，最終效果如下：

 

操作也很簡單，選中第一個視圖中的按鈕，右鍵拉出一條線到第二個視圖上，放開就可以看：

 

 一定要選擇model,其它兩種，我們后面有例子。

 

     Modal Style:

 *Cover Vertical:  滑入效果。從下面滑入當前場景，這是默認效果同Default。

 *Filp Hovizontal: 翻轉效果。

 *Cross Dissolve: 淡出效果。

 *Partial Curl:  翻頁效果。

8.  在第二個視圖，添加按鈕事件，返回第一個視圖

 

代碼如下：

 
           
           1  
           #import <UIKit/UIKit.h> 
           
 
           2  
           
 
           3  
           @interface SecondViewController : UIViewController 
           
 
           4 - (IBAction)btnBackHome:( 
           id)sender; 
           
 
           5  
           
 
           6  
           @end 
           
         

 
           
           1 - (IBAction)btnBackHome:( 
           id)sender { 
           
 
           2     [self dismissModalViewControllerAnimated:YES]; 
           
 
           3 } 
           
         

 

 9. 到此，我們就完成頁面跳轉的效果，是不是很簡單？接下來，我們演示push的連接方式，從步驟7開始，重新做。

 拖一個Navigation Controller到Storyboard中,並設置Table View為靜態Cell，如下所示：

 

 然后，添加對應三個ViewController, “我的資料”、“我的訂單”和“發布活動”

 每個表格里，選擇連接到相應的View Controller,連接方式是Push,最終結果如下：

 

 10. 到此，我們又完成Push頁面跳轉的效果，是不是很簡單？接下來，我們演示Custom的連接方式，從步驟7開始，重新做。

 先添加一個控制類，如下：

 

重寫perform方法,詳細如下：

 
           
            1  
           @implementation CustomModal 
           
 
            2  
           
 
            3 -( 
           void)perform 
           
 
            4 { 
           
 
            5      
           // 
            原視圖 
           
  
            6  
               UIViewController *source = self.sourceViewController; 
           
 
            7      
           
 
            8      
           // 
            下個視圖 
           
  
            9  
               UIViewController *next = self.destinationViewController; 
           
 
           10      
           
 
           11      
           // 
            跳轉動作 
           
  
           12  
               [source presentModalViewController:next animated:YES]; 
           
 
           13 } 
           
 
           14  
           @end 
           
         

 

接下來回到Storyboard做些簡單的設置，如下圖所示：

 

 

我沒有騙人吧，真得很強大，很簡單。

 

使用編程方式跳轉View

 1.  Modal 方式跳轉

 
          1  
          // 
           獲取故事板 
          
  
          2  
          UIStoryboard *board = [UIStoryboard storyboardWithName: 
          @" 
          MainStoryboard 
          " bundle:nil]; 
          
 
          3  
          
 
          4  
          // 
           獲取故事板中某個View     
          
  
          5  
          UIViewController *next = [board instantiateViewControllerWithIdentifier: 
          @" 
          Second 
          "]; 
          
 
          6  
          
 
          7  
          // 
           跳轉     
          
  
          8  
          [self presentModalViewController:next animated:YES]; 
         

2.  以Modal 方式跳轉的返回方法

1 [self dismissModalViewControllerAnimated:YES];

3. 根據Segue Identifier 跳轉

 
          1  
          // 
           如果只有一個Segue 會出錯，有多個Segue時，沒有問題 
          
  
          2  
          [self performSegueWithIdentifier: 
          @" 
          GotoSecond 
          " sender:self]; 
         

 4. Push 方式跳轉

1 [self.navigationController pushViewController:next animated:YES];

 5. 彈出一個ViewController 相當於返回上一個界面

1 [self.navigationController popViewControllerAnimated:YES];