Segue.

Presentation on theme: "Segue."— Presentation transcript:

1 Segue

2 實驗三: Segue 實驗主題: 實驗目的: 環境需求: 建立一個APP程式利用Segue來傳遞資訊 通過實作讓人瞭解Segue的運作過程
了解如何在不同的Viewcontroller之間傳遞資料 環境需求: Xcode 本實驗會提交一個可以輸入身高及體重的APP，輸入時身高體重數值時會切換IOS內建的數字鍵盤，輸入完身高體重後利用IBAction來觸發函式，函式中會去抓取身高及體重的數值，並計算BMI值 1

3 Segue 範例 主頁面需要輸入姓名，才可以輸入意見， 若沒有輸入則會彈出警告視窗
此範例首先會有一個主頁面，有一行輸入名稱的欄位用來讓使用者輸入名字，且點擊輸入意見按鈕後會連結到副頁面讓使用者輸入意見，若點擊按鈕時沒有輸入名字，則會彈出警告視窗，告訴使用者要輸入名字

4 Segue 範例 點擊輸入意見按鈕後連到另一個頁面來輸入意 見，再按送出按鈕會返回主頁面
在主頁面輸入名字，例如Job，則在點擊輸入意見按鈕後，就會拿取到名字的資料，將Job取代副頁面上面的Label文字，接著輸入意見後再點擊送出按鈕，主頁面就會接收到使用者的意見，並將意見取代下方的Label

5 創建專案 選擇Create a new Xcode project 開啟Xcode，並選擇第二個選項: 創建新專案 4

6 空白專案建立Single View App 建立空白專案 點選Main_iPhone.storyboard
首先打開Xcode建立一個新專案，選擇模板為SingleView Application的單頁面APP應用程式。

7 Disable autolayout 為了方便說明及觀看, storyboard關掉autolayout 佈局
一開始點選Main.storyboard會看到IPAD大小的空白畫面，為了方便說明簡單的UI，全自動布局的Auto Layout這邊就沒有說明，先把原本右邊的Use Auto Layout及 Use Size Classes取消勾選，就會變成一般的手機畫面了。

8 UI Label Text Field Button Editable cancel Text View
頁面中右下角選取拖拉、移動Label、Text Field、Button、Text View等UI元件，並改右邊屬性欄的文字，最後如圖所示 Text Field Button Editable cancel Text View

9 Main_iPhone.storyboard
接著可以再拉一個ViewController，將原本的頁面的按鈕按住Ctrl鍵或是滑鼠右鍵拖拉到新的ViewController，並選擇彈出選項的model，使原本的頁面只要一按下去按鈕就會連到另一個頁面，如影片所示。 按住Ctrl鍵或是滑鼠右鍵從按鈕連到下一個頁面

10 連好以後會出現一個中間有方塊的箭頭，代表有連到，接著點選此Segue箭頭，可以在右側屬性欄改變identifier屬性為comment。
設定連結名稱

11 增加一個Cocoa類別檔案 Class  IHCommentViewController
Subclass UIViewController 為了能具體操作另一個頁面，我們需要新建一個ViewController Class來連結，選擇新建File->source->Cocoa Class，彈出視窗，命名此Class名稱為IHCommentViewController並選擇類別為UIViewController。

12 設定頁面對應的Ｃlass 將新增的頁面拉好一個Label、一個Text Field、兩個按鈕(取消、送出)，並在右上方許選擇此頁面所屬的UIViewController Class，也就是我們剛剛建立的Class

13 XXXViewController.h #import <UIKit/UIKit.h>
@interface IHViewController : UIViewController @property (weak, nonatomic) IBOutlet UITextField *nameField; @property (weak, nonatomic) IBOutlet UILabel *ShowComment; @property(nonatomic,strong)NSString *comment; @end ViewController Class會分為.h、.m檔案，相當於C++語言的.h及.cpp檔案，我們先在將頁面的TextField、Label拖拉進ViewController *comment 變數屬性。

14 XXXViewController.m -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{ if([segue.identifier IHCommentViewController *dst=segue.destinationViewController; dst.name=self.nameField.text; } -(BOOL)shouldPerformSegueWithIdentifier:(NSString *)identifier sender:(id)sender{ if ([identifier { if ([self.nameField.text [[[UIAlertView message:nil delegate:nil cancelButtonTitle:nil nil]show]; return NO; return YES; -(IBAction)Cancel:(UIStoryboardSegue *)segue { } -(IBAction)Submit:(UIStoryboardSegue *)segue{ self.ShowComment.text=self.comment; 接著在ViewController .m檔案中撰寫程式，先撰寫連接頁面會用到的函式prepareForSegue及shouldPerformSegueWithIdentifier。 在準備切換頁面prepareForSegue函式中，將目標Controller存入變數dst中，並存取dst的name變數屬性為此頁面的Text Field文字:nameField。 在shouldPerformSegueWithIdentifier函式中，取identifier為comment的Segue，並判斷是否本身的nameField文字內容為空，若為空，則彈出警告視窗，來提示使用者還沒輸入Name。 接著寫兩個IBAction事件函式，分別為Cancel、Submit，在Submit函式中撰寫self.ShowComment.text=self.comment; 將當前的Label改為此comment字串變數的文字。

15 IHCommentViewController.h
#import <UIKit/UIKit.h> @interface IHCommentViewController : UIViewController @property (weak, nonatomic) IBOutlet UILabel *ShowName; @property (weak, nonatomic) IBOutlet UITextField *commentField; @property(nonatomic,strong)NSString *name; @end 改好了ViewController .h、ViewController .m後，接著改我們剛剛新建立好的Class程式碼，在IHCommentViewController.h中拉入UI元件，Label、Text *name 變數屬性。

16 接著將IHCommentViewController所控制的頁面的兩個按鈕，取消及送出，連到來源Scene頁面，也就是ViewController所控制的頁面內部的IBAction函式，分別為Cancel及Submit。

17 設定Segue identifier 連好以後此事件就會產生兩個名稱為 Unwind segue from 取消 to Exit 及 Unwind segue from 送出 to Exit 的Segue，也就是按此按鈕，產生上一頁動作時，會呼叫此事件來離開此頁面，並將Submit的Segue的右側identifier屬性改為Submit。

18 IHCommentViewController.m
-(void)ViewDidLoad { self.ShowName.text=self.name; } -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { if([segue.identifier IHViewController *dst=segue.destinationViewController; dst.comment=self.commentField.text; } 接著我們在IHCommentViewController.m中撰寫ViewDidLoad 初始化函式，將原本空的ShowName字串改為當前name字串的內容。 並在切換頁面的函式prepareForSegue中撰寫程式，判斷來源Segue的identifier是否為Submit，若是，則存取來源的ViewController為dst，並將本身的文字字串內容改為dst的comment字串內容。

19 Finally 範例檔案:Segue 以上就是此範例的全部實作過程，具體流程就是先在第一個頁面輸入使用者的姓名: Bob，並點”輸入意見”按鈕來連到第二個頁面，第二個頁面會讀取並顯示第一個頁面的名字Bob，接著可以讓使用者輸入意見，使用者輸入完以後按下送出，返回到第一個頁面，會讀取並顯示第二個頁面所填入的意見內容。