iOS中storyboard故事板使用Segue跳轉界面、傳值

 

iOS中storyboard故事板使用Segue跳轉界面、傳值 

目錄(?)[+]

摘要：

在iOS的開發過程當中，不可避免的要設計界面，在android中有xml設置界面和直接使用java代碼設置界面控件兩種方式，在以前的ios開發中也是相似的有xib文件設置界面及用代碼直接設置控件兩種方法，但後來又出了一種方式，就是storyboard故事板子，其實storyboard和xib文件很像，最大的不一樣之處在於一個xib文件對應一個ViewController視圖控制器，而storyboard對應多個，基本一個應用只須要一個storyboard就能夠了，再也不須要爲每一個控制器建立一個xib文件，從這點上來講，仍是很方便的，在storyboard中查看各個界面的跳轉也很方便，但以前一直使用xib進行開發，對storyboard的使用不太熟悉，今天好好學習了一下其中的界面跳轉和傳值，用到了Segue這個東西，這裏藉着例子說明一下。

建立工程：

首先建立一個新的工程，這裏我建立的是Single View Application，就能夠自帶故事板了，以下圖：

建立好後能夠在左邊文件列表中看到Main.stroyboard，這個就是故事板文件了，由於這裏要實現界面跳轉，只有自帶的一個ViewController不夠，咱們再建立一個，command+N鍵建立一個Cocoa Touch Class。

如今文件都建立好了，目錄以下：

準備視圖和控件：

咱們選擇Main.storyboard，開始建立視圖和控件。

原始的storyboard中只有一個自帶的視圖，咱們從右下角在拖一個View Controller上來，如圖：

新版的Xcode建立的視圖會是一個大方型的，要改爲正常手機界面大小的haunted，選擇視圖上方的view controller按鈕，在右側第四個部分中把size設成想要的便可：

如今咱們來爲視圖添加控件，考慮到咱們的需求，要能辨認當下在哪一個界面，要能夠在兩個界面跳轉，要能夠設置和顯示要傳遞的值，那麼咱們須要一個標題欄，一個按鈕和一個用於編輯和顯示的編輯框，從右下方分別拖出Navigation Bar、Button、Text Field放在合適的位置，兩個視圖控制器都要放，如圖：

至此，準備工做，基本作完了，接下來就是使用Segue了。

使用Segue實現頁面跳轉：

要在故事板中使用Segue跳轉，很是的簡單和方便，把鼠標移到第一個視圖的按鈕上，按住鼠標右鍵不放，拖動鼠標到第二個視圖，鬆開，而後會出現一個選項框，這裏是要選擇Segue的模式，咱們選擇最下面的modal，會在兩個視圖中出現一個箭頭，表示能夠跳轉到第二個視圖了，就是這麼簡單，如今運行模擬器跑工程，點擊第一個視圖的按鈕已經能夠跳轉了，是否是很簡單！

剛纔說到選擇modal，Segue有幾種模式，在iPhone上能夠用到的有modal、push和custom，其餘還有幾種是iPad上用的，這裏簡單說明一下：

一、modal：模態地加載視圖控制器，最經常使用的方式，相似present和dismiss；

二、push：使用導航欄壓進新的視圖控制器，相似push和pop，要使用這個模式，跳轉的源視圖，也就是這裏的Page1必須是Navigation Controller，這裏咱們不是，因此選擇的話運行起來會報錯；

三、custom：用戶自定義。

如今咱們選擇兩個視圖控制器中間的箭頭線條，右邊查看第四個部分，能夠看到能夠選擇一些Segue的屬性：

一、Identifier：能夠定義Segue的標識，若是一個源視圖有不少跳轉到其餘視圖的Segue，就能夠靠這個標識來判斷究竟是哪一個Segue，後面代碼裏再說明，這裏咱們只有一個跳轉因此先不寫；

二、Segue：能夠選擇Segue的模式，好比剛纔的modal、push等等；

若是模式是modal，還有以下選項，其餘的模式選項不一樣：

三、Presentation：還沒搞清楚，求大神指教；

四、Transition：跳轉界面的方式（Cover Vertical：水平上移切換；Filp Horizontal：從右到左翻轉；Cross Dissolve：閃現；Partial Curl：從下往上翻頁），能夠都試一試。

要從Page2跳回到Page1，可不能像上面同樣再拉一個Segue回到Page1的視圖，這樣在跳轉的過程當中，跳一次添加一個新視圖，跳一次添加一個新視圖，原來的視圖都沒有消去，會一直累加的，並非回到Page1.

正確的作法是使用dismissViewControllerAnimated: completion:方法來跳回界面。在Page2的視圖控制器中，把按鈕關聯到Page2ViewController中去，而後編輯按鈕的響應方法：

[objc]  view plain copy

1. - (IBAction)toPage1:(id)sender {  
2.     [self dismissViewControllerAnimated:YES completion:^{}];  
3. }  

如今運行工程，就能夠點擊兩個按鈕歡快地跳來跳去了，能夠看到從Page2跳回Page1的時候，動畫的方向和從Page1跳到Page2時是相反的，這纔是跳回嘛。

使用Segue在界面間傳值：

咱們在兩個視圖中都添加了TextField編輯輸入框，這樣咱們能夠在Page1的頁面中輸入數據來傳遞到Page2顯示，一樣的能夠在Page2中輸入數據回到Page1顯示。首先要作的，仍是把兩個輸入框關聯到各自的視圖控制器中去。

咱們傳值有兩種方式，正好在兩個傳輸過程當中使用，先看第一個方法，實現從Page1傳值到Page2：

咱們先在Page2中定義一個變量用來接收所傳遞的值：

[objc]  view plain copy

1. // Page2的.h文件中  
2.   
3. @property (weak, nonatomic) NSString *string;  

而後在Page2的.m文件中設定加載界面時，刷新輸入框內的值爲變量的值：

[objc]  view plain copy

1. - (void)viewDidLoad {  
2.     [super viewDidLoad];  
3.     // Do any additional setup after loading the view.  
4.       
5.     // 設置輸入框的值爲變量string的值  
6.     self.textField.text = self.string;  
7. }  

而後去到Page1的.m文件，只要加一個方法就能夠實現了：

[objc]  view plain copy

1. - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {  
2.     // 將page2變量設爲segue所跳轉的界面控制器  
3.     id page2 = segue.destinationViewController;  
4.     // 對page2中的變量設置值  
5.     [page2 setValue:self.textField.text forKey:@"string"];  
6. }  

這個方法會在使用Segue時自動調用。

PS：上面曾經說到過Segue的屬性裏有一個Identifier，就是在這個方法中用來判斷是哪一個Segue在起做用，如：

[objc]  view plain copy

1. if ([[segue identifier] isEqualToString:@"Page2ViewController"]) {// string值爲在Segue屬性Identifier處設置的值  
2.     // 相應處理  
3. }  

如今，運行工程，在第一個界面輸入值後，點擊跳轉到第二個界面，就能夠看到Page2的輸入框內已經有剛纔輸入的值啦，傳遞成功。

如今講第二種方法，從Page2傳回Page1，用協議delegate，關於協議的具體用法能夠查找相關資料，這裏直接講怎麼使用，簡單的直接實現：

首先在Page2的.h文件中，聲明協議和協議方法，以及採用協議的物件：

[objc]  view plain copy

1. #import <UIKit/UIKit.h>  
2. // 聲明一個協議  
3. @protocol  Page2Delegate  
4. // 協議中的方法  
5. - (void)passValue:(NSString *)value;  
6.   
7. @end   
8.   
9. @interface Page2ViewController : UIViewController  
10. @property (weak, nonatomic) NSString *string;  
11. @property (weak, nonatomic) IBOutlet UITextField *textField;  
12.   
13. - (IBAction)toPage1:(id)sender;  
14.   
15. // 採用上面協議的物件  
16. @property (weak) id delegate;  
17. @end  

而後在Page2的.m文件的按鈕響應方法中，添加代碼：

[objc]  view plain copy

1. - (IBAction)toPage1:(id)sender {  
2.     [self dismissViewControllerAnimated:YES completion:^{}];  
3.       
4.     // 呼叫協議中的方法並帶入編輯框中的值  
5.     [self.delegate passValue:self.textField.text];  
6. }  

這樣Page2的部分就完成了，回到Page1的代碼，編輯Page1的.h文件，引用Page2並採用協議：

[objc]  view plain copy

1. #import <UIKit/UIKit.h>  
2.   
3. #import "Page2ViewController.h" // 引用Page2  
4.   
5. @interface ViewController : UIViewController <Page2Delegate>// 採用Page2的協議  
6. @property (weak, nonatomic) IBOutlet UITextField *textField;  
7.   
8. @end  

而後在Page1的.m文件中，在剛纔的Segue響應方法中添加委託爲self：

[objc]  view plain copy

1. - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {  
2.     // 將page2變量設爲segue所跳轉的界面控制器  
3.     id page2 = segue.destinationViewController;  
4.     // 對page2中的變量設置值  
5.     [page2 setValue:self.textField.text forKey:@"string"];  
6.       
7.     // 設定委託爲self  
8.     [page2 setValue:self forKey:@"delegate"];  
9. }  

實現協議的方法，設定修改輸入框內容爲傳回來的值：

[objc]  view plain copy

1. - (void)passValue:(NSString *)value {  
2.     // 設定編輯框內容爲協議傳過來的值  
3.     self.textField.text = value;  
4. }  

這樣就能夠實現Page2往Page1的傳值了，運行看看吧~

這裏有個人工程源碼：https://github.com/Cloudox/SegueTest

轉載請註明出處，謝謝

參考資料：

segue分析小結：http://mikixiyou.iteye.com/blog/1745995

使用Storyboard Segue 實做 UIViewController的切換：http://blog.csdn.net/mazhen1986/article/details/7791430

Storyboard裏面的幾種Segue區別： http://blog.sina.com.cn/s/blog_700be1c0010156x8.html