[原創範例] 簡單的View切換教學 navigationController, view, pushViewController

babyfish0226

說明：示範使用NavigationController來實現View的切換

操作：

2009-2-28 00:25

畫面上您會看到NavigationBar 以及一個按鈕

2009-2-28 00:25

按下後將以動畫的方式切換到第二個View，操作上雖然簡單但相當實用

教學：
1.建立一個 Windows-Based Application 的專案並命名為 ViewTransitioning
2.ViewTransitioningAppDelegate.h 加入程式碼：

1. #import <UIKit/UIKit.h>
   
2. 
   
3. @interface ViewTransitioningAppDelegate : NSObject <UIApplicationDelegate> {
   
4. UIWindow *window;
   
5. UINavigationController *nc1;
   
6. }
   
7. 
   
8. @property (nonatomic, retain) IBOutlet UIWindow *window;
   
9. @property (nonatomic,retain) IBOutlet UINavigationController *nc1;
   
10. 
    
11. @end

複製代碼

ViewTransitioningAppDelegate.m 加入程式碼：

1. @synthesize window,nc1;
   
2. 
   
3. - (void)applicationDidFinishLaunching:(UIApplication *)application {   
   
4. 
   
5.     // Override point for customization after application launch
   
6.         [window addSubview:nc1.view];
   
7.     [window makeKeyAndVisible];
   
8. }

複製代碼

3.[File/New File...] 新增一個 UIViewController subclass 並命名為 Nc1 (分別會儲存為Nc1.h,Nc1.m)
4. Nc1.h 加入程式碼：

1. #import <UIKit/UIKit.h>
   
2. #import "Nc2.h"
   
3. 
   
4. @interface Nc1 : UIViewController {
   
5.         Nc2 *nc2;
   
6. }
   
7. @property (nonatomic,retain) Nc2 *nc2;
   
8. 
   
9. -(IBAction)LoadSecondView:(id)sender;
   
10. 
    
11. @end

複製代碼

5.Nc1.m 加入程式碼：

1. #import "Nc1.h"
   
2. 
   
3. @implementation Nc1
   
4. 
   
5. @synthesize nc2;
   
6. 
   
7. -(IBAction)LoadSecondView:(id)sender{
   
8.         if (self.nc2==nil){
   
9.                 Nc2 *view2=[[Nc2 alloc] initWithNibName:@"Nc2" bundle:[NSBundle mainBundle]];
   
10.                 self.nc2=view2;
    
11.                 [view2 release];       
    
12.         }
    
13.         [self.navigationController pushViewController:self.nc2 animated:YES];
    
14. }
    
15. 
    
16. - (void)viewDidLoad {
    
17.     [super viewDidLoad];
    
18. self.title=@"主畫面";
    
19. }

複製代碼

6.[File/New File...] 新增一個 UIViewController subclass 並命名為 Nc2 (分別會儲存為Nc.h,Nc2.m)
7. Nc2.m 加入程式碼：

1. - (void)viewDidLoad {
   
2.     [super viewDidLoad];
   
3.         self.title=@"第二個畫面";
   
4. }

複製代碼

8.雙擊 MainWindow.xib 開啟 Interface Builder 後，從Library 拖曳 Navigation Controller 至 MainWindows.xib 的視窗

2009-2-28 08:52

9.點開 Navigation Controller 並選取 View Controller (Navigation Item) 後按下 [Tools/Identify Inspector]

2009-2-28 09:09

10.從 Class 的下拉清單中選擇 Nc1

2009-2-28 09:09

11.雙擊 MainWindow.xib 視窗中的 Navigation Controller 帶出介面設計視窗後，從 Library 拖曳一組 View 及
  一個按鈕到畫面中的View區塊，同時安排按鈕位置並設定顯示的字串

2009-2-28 08:52

12.點選畫面上的按扭並按下 [Tools/Connections Inspector]
13.將 Events 下方的 Touch Up Inside 與 Nc1 (Navigation Item) 進行連結並選擇 LoadSecondView

2009-2-28 09:22

14.點選 MainWindow.xib 中的 View Transitioning App Delegate
15.將Inspector視窗中 Outlets下方的nc1與MainWindow.xib視窗中的 Navigation Controller 建立連結

2009-2-28 09:35

16.最後在Interface Builder的視窗中選擇[File/New...] 並選擇 View 後按 Choose

2009-2-28 09:35

17.選擇[File/Save as] 同時將檔案命名為 Nc2 並儲存至與此專案相同的資料夾內（將會產生Nc2.xib的介面檔） 

18.出現是否將此檔加入至ViewTransitioning的提示視窗，請打勾並按下 [Add]

2009-2-28 09:42

19.點選 View 介面設計視窗並從 [Library] 中拖曳一個 Label 到畫面上，同時修改顯示文字

2009-2-28 09:42

20.點選 Nc2 視窗中的 [File's Owner] 並按下 [Tools/Identify Inspector]

2009-2-28 09:59

21.在Class的下拉清單中選擇 Nc2

2009-2-28 09:59

22.按下[Tools/Connections Inspector] 並將 Outlets 下方的 view 與 Nc2 視窗中的 View進行連結

2009-2-28 09:59

23.回到 Xcode 並按下 Build and Go 進行測試
24.大功完成

此範例在程式碼的著墨上並不多，而大部分的動作都是在說明Interface Builder 上的操作，其實寫程式每個人的習慣不同，有人喜歡用程式碼去堆出介面，但對自己習慣RAD開發工具的來說，能少一行程式碼的我寧願用視覺化的方式來完成，這樣的方式，對初學者來說，比較簡單，也不會有太多未懂的程式碼出現，不過，這點在教學的撰寫上卻容易造成在動作說明上的煩瑣與困難，Anyway，邊做邊學，邊學邊調整，也歡迎各位不吝給予您的意見。

後記：原來寫教學比起寫程式還得花上好幾倍的時間。

m5322000

呆呆新手問一下...我照著字面操作可是我怎樣也找不到第14步驟的 View Transitioning App Delegate..真不好意思...謝謝解答囉!!

lcjh233222001

謝謝你

非常實用喔!!

m5322000

呵呵!!我這個呆子...原來只是檔名不一樣而已...

bowman

請教大家,
我想做出這樣類似的呈現方式,
但是不用 NavigationController,
用 ViewController 來控制就好,
而想在這個例子的 Nc2 中加入一個 UIButton,
按下 Nc2 裡的 Button 就可以把 Nc1 Load 進來.

簡單來說就是 Nc1 跟 Nc2 都有一個 Button,
然後可以靠 Button 互相換頁,
我看過另一篇有人提出類似的問題,
但是解決的方式我還是看不太懂,
不知道大家有沒有其他簡單的範例或相關的程式或是方法可以參考?

先感謝大家的閱讀跟協助了~

m5322000

請教一下!!我目前想以這個範例修改成NavigationControlle,而不用button到下一頁...
想請問一下該怎麼弄,謝謝!!一直想不透!!

ialien

這個不就是使用NavigationController來切換畫面嗎??

ialien

用Button來切換View可以利用
[Nc1.view removeFromSuperView]及[self addSubview:Nc2.view]
這兩個方法,加油!!

jasonleung8866

辛苦了 ^_^ 小弟實在獲益良多 ^_^

kenfa02

很詳細的範例，謝謝分享。

lilicoco119119

大大你好，因為我是初心者，所以正好藉由這篇文章來練習，謝啦

SMC

請問版大，如何加入版面（ Cover Page ) 呢?  謝謝。。。

cmt.77

感謝
..正在學習中..

zhz

看到九宫格的雏形了，感谢版主分享，获益良多。

hhhhhh1972

不错，谢谢