天天看點

IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法

IOS StoryBoard視圖切換

一、視圖切換類型

在storyboard中,segue有幾種不同的類型,在iphone與ipad的開發中segue的類型是不同的,

在iphone中,segue有:push、modal、custom三種類型,差別主要在于新頁面出現的方法

在ipad中,segue有:push、modal、popover、replace、custom五種不同的類型

二、視圖切換類型說明

1、Push是樹形導航

push類型一般是需要頭一個界面是NavigationController的,是在NavigationController向下一級滑動的時候使用相當于[self.navigationController pushViewController:nil animated:YES];,在棧中壓入一個viewcontroller,傳回的時候相當于:[self.navigationController popViewControllerAnimated:YES];彈出一個viewcontroller

2、Model是模态導航模式

常用場景是新的場景蓋住舊的場景,使用者沒有辦法與上一個場景互動,除非關閉目前場景

是viewcontroller中的标準切換方式,可以包括淡出以及切換動畫

相當于代碼的[self presentModalViewController:nil animated:YES];(modal方式跳轉)

[self dismissModalViewControllerAnimated:YES];(modal方式傳回)

3、custom

自定義跳轉方式

4、popover(iPad only)

popover類型,就是采用浮動窗的形式把頁面展示出來

5、Replace(iPad only)

替換目前scene

三、視圖切換方法

接下來我們來說頁面切換

首先建立一個Project,命名StoryBoardSegueDemo,建立完成以後,打開storyboard,界面如圖,選中ViewController,點選頂部菜單欄Editor->Embed In->Tab Bar Controller,完成以後如下圖:

IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法
IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法

然後在向storyboard在添加一個ViewController,選中剛剛添加的ViewController,點選頂部菜單欄中的Editor->Embed In -> Navigation Controller,完成以後如下圖:

IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法

然後右鍵點選Tab Bar Controller,顯示如下:

IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法

點選view controllers後面的圓圈,指向Navigation Controller,完成以後如下圖:

IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法

然後分别上上面的viewcontroller拖放button,分别命名為First與second,然後在向storyboard拖放兩個viewcontroller,分别在放兩個Button,修改文本為First_Next,Second_Next

1、視圖切換(通過Button的Action)

滑鼠選中First按鈕,右鍵點選,如下圖:點選Triggered Segues->action後面的空心圓圈,指向viewcontroller上面按鈕為First_Next的viewcontroller,松手以後選擇“modal"(隻能選中modal,不能使用push,根controller不是Navigation Controller),同樣的方法選中Second按鈕,指向viewcontroller上面按鈕為second_Next的viewcontoller,然後松手,這次選擇"push"(由于根controller是Navigation Controller,當然了也可以選擇modal),全部完成以後如下圖:

IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法

2、視圖切換方式二(通過StoryBoard上面定義的ViewController的identify)

然後再次向storyboard上拖放一個viewcontroller,同時設定其identity->Storyboard ID為"firsttothree",然後拖放一個button,命名First_Three,如下圖:

IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法

在First_Next按鈕所在的viewcontroller上面,拖放一個button,修改text為Go To Three,建立一個類,命名FirstNextViewController,繼承自UIViewController,如下圖:

IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法

打開storyboard,選擇viewcontroller上面為First_Next按鈕的controller,修改”Custom Class" 為剛剛建立的類,打開FirstNextViewController的頭檔案

定義一個函數,然後在.m檔案中實作,截圖如下:

IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法
IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法

選擇"Go To Three"按鈕,右鍵點選,将"Touch up Inside"指向First Next View Contrlller,指向上面定義的點選函數,如下圖:

IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法

3、視圖切換(通過ViewController的Segues)

我們再次添加一個viewcontroller,在上面拖放一個按鈕,命名為First_Four,同時在viewcontroller上面有First_Three的controller上面再次拖放一個按鈕,修改text為Go To Four,建立一個類,命名為FirstThreeController,繼承自UIViewController,完成以後修改viewcontroller的"Custom Class"為FirstThreeViewController,在FirstThreeViewController.h頭檔案中定義一個點選函數,并且在.m檔案中實作,代碼如下圖:

IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法
IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法

讓"Go To Four"的點選事件指向上面定義的函數,選中該viewcontroller,右鍵點選,選擇Tigggered Segues->manual 後面的空心圓圈,指向下一個viewcontroller,選中這兩個viewcontroller的連線,設定identifier屬性為firsttofour,如下圖:

IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法
IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法

4、視圖切換傳回

接下來我們做傳回(modal方式的),在viewcontroller上面分别有First_Three與First_Four的controller分别添加兩個按鈕,修改text分别是"Back To up"與"Back To First",完成以後如下圖:

IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法

在FirstThreeViewController中定義傳回函數,讓Back To up的點選事件的指向該傳回函數,

IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法

這樣就可以傳回上一級了,然後我們說一下怎麼回到根目錄,在根viewcontroller的類檔案中定義一個函數(此例中我們的根viewcontroller指向的類是LTViewController),函數如下:

- (IBAction)unwindSegue:(UIStoryboardSegue *)sender{

    NSLog(@"unwindSegue %@", sender);

}

選中根viewcontroller的“Exit",按住Ctrl,拖動滑鼠指向執行傳回根viewcontroller的viewcontroller上面的按鈕,如下圖:

IOS StoryBoard視圖切換一、視圖切換類型二、視圖切換類型說明三、視圖切換方法

這樣就傳回到了根目錄

示例代碼下載下傳