我是UINavigationController,我可以幫你以下一頁、下一頁的方式導覽頁面,當然也可以依序退回上一頁。
第1步:建立一個名為"UINavigationController"的"Single View Application"專案。
第2步:刪除Main.storyboard上預設的ViewController,同時刪除ViewController.h與ViewController.m檔
第3步:加入UINavigationController
- 於Main.storyboard中加入UINavigationController,因目前的Main.storyboard中無任何Controller,因此會自動被預設為啟動的Controller
- 刪除UINavigationController預設的UITableController,選取Root View Controller後按delete鍵刪除
第4步:建立台北車站、善導寺與忠孝新生等ViewController
- 加入3個ViewController至Main.storyboard中
- 在台北車站TaipeiViewController中加入UILabel,設定文字為"台北車站",並加入下一站Button
- 在善導寺ShandaoViewController中加入UILabel,設定文字為"善導寺",並加入下一站與上一站的Button
- 在忠孝新生ZhongxiaoViewController中加入UILabel,設定文字為"忠教新生",並加入上一站的Button
- 並分別建立TaipeiViewController、ShandaoViewController與ZhangxiaoViewController類別,皆繼承自UIViewController
- 將TaipeiController類別與畫面上的ViewController對應起來
- 將ShandaoController類別與畫面上的ViewController對應起來,同時在Storyboard ID處設定其ID為"shandao",後續將以程式的方式透過此ID取得ShandaoViewController對應畫面,才能從台北車站轉移到善導寺頁面
- 將ZhongxiaoController類別與畫面上的ViewController對應起來,同時在Storyboard ID處設定其ID為"zhongxiao",後續將以程式的方式透過此ID取得ZhongxiaoViewController對應畫面,才能從善導寺轉移到忠孝新生頁面
第5步:設定台北車站ViewController為預設Controller
- 對UINavigationController按右鍵,托拉root view controller至此新的ViewController上,以成為預設的ViewController
- 對台北車站TaipeiViewController加入下一站至善導寺ShandaoViewController的功能。於TaipeiViewController畫面中對"下一站"按鈕的Touch Inside Up綁定IBAction,加入next:方法,於next:方法中透過pushController:訊息至下一站善導寺ShandaoViewController
TaipeiViewController.m
- (IBAction)next:(id)sender {
//透過目前controller所在的navigationController,
//其所在的storyboard找出Storyboard ID為shandao的Controller,
UIViewController * s = [self.navigationController.storyboard instantiateViewControllerWithIdentifier:@"shandao"];
//透過navigationController,
//傳送pushViewController:animated,
//至下一個善導寺站頁面,
//第1個ViewController參數即為下一個善導寺Shandao的Controller,
//其中的animated參數為YES,
//則會以動畫方式轉換頁面。
[self.navigationController pushViewController:s
animated:YES];
}
- 對善導寺ShandaoViewController加入下一站至忠孝新生ZhongxiaoViewController的功能。於ShandaoViewController畫面中對"下一站"按鈕的Touch Inside Up綁定IBAction,加入next:方法,於next:方法中透過pushController:訊息至下一站忠孝新生ZhangxiaoViewController
ShandaoViewController.m
- (IBAction)next:(id)sender {
//透過目前controller所在的navigationController,
//其所在的storyboard找出Storyboard ID為zhongxiao的Controller,
UIViewController * z = [self.navigationController.storyboard instantiateViewControllerWithIdentifier:@"zhongxiao"];
//透過navigationController,
//傳送pushViewController:animated,
//至下一個忠孝新生站頁面,
//第1個ViewController參數即為下一個忠孝新生Zhongxiao的Controller,
//其中的animated參數為YES,
//則會以動畫方式轉換頁面。
[self.navigationController pushViewController:z
animated:YES];
}
- 對善導寺ShandaoViewController加入回上一站的功能。於ShandaoViewController畫面中對"上一站"按鈕的Touch Inside Up綁定IBAction,加入pre:方法,於pre:方法中透過popViewControllerAnimated:訊息回至上一站
ShandaoViewController.m
- (IBAction)pre:(id)sender {
//透過目前controller所在的navigationController,
//傳遞popViewControllerAnimated訊息,
//以回到上一站的頁面,
//代入YES表示要以動畫方式轉換頁面。
[self.navigationController popViewControllerAnimated:YES];
}
- 對忠孝新生ZhangxiaoViewController加入回上一站的功能。於ZhangxiaoViewController畫面中對"上一站"按鈕的Touch Inside Up綁定IBAction,加入pre:方法,於pre:方法中透過
popViewControllerAnimated:訊息回至上一站
ZhongxiaoViewController.m
- (IBAction)pre:(id)sender {
//透過目前controller所在的navigationController,
//傳遞popViewControllerAnimated訊息,
//以回到上一站的頁面,
//代入YES表示要以動畫方式轉換頁面。
[self.navigationController popViewControllerAnimated:YES];
}
第7步:執行
- 這時您可以透過UINavigationController的功能,以導覽的方式至下一站的頁面,並透過返回上一站的方式回到上一站的頁面。當然,在使用UINavigationController時,上方的Bar會在左邊出現一個返回的"< Back"按鈕,此按鈕也可回到上一頁,若想進一步修改變更此按鈕的行為或呈現方式,也是可以透過程式的設定來達到你的目的,比如說換個圖片按鈕等等。
檔案連結:UINavigationController.zip
更多的UINavigationController資訊: