返回列表 回覆 發文
說明:示範使用NavigationController來實現View的切換

操作:
ViewTranstioning1.jpg
2009-2-28 00:25

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

ViewTranstioning2.jpg
2009-2-28 00:25

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

教學:
1.建立一個 Windows-Based Application 的專案並命名為 ViewTransitioning
2.ViewTransitioningAppDelegate.h 加入程式碼:
  1. #import <UIKit/UIKit.h>

  2. @interface ViewTransitioningAppDelegate : NSObject <UIApplicationDelegate> {
  3. UIWindow *window;
  4. UINavigationController *nc1;
  5. }

  6. @property (nonatomic, retain) IBOutlet UIWindow *window;
  7. @property (nonatomic,retain) IBOutlet UINavigationController *nc1;

  8. @end
複製代碼
ViewTransitioningAppDelegate.m 加入程式碼:
  1. @synthesize window,nc1;

  2. - (void)applicationDidFinishLaunching:(UIApplication *)application {   

  3.     // Override point for customization after application launch
  4.         [window addSubview:nc1.view];
  5.     [window makeKeyAndVisible];
  6. }
複製代碼
3.[File/New File...] 新增一個 UIViewController subclass 並命名為 Nc1 (分別會儲存為Nc1.h,Nc1.m)
4. Nc1.h 加入程式碼:
  1. #import <UIKit/UIKit.h>
  2. #import "Nc2.h"

  3. @interface Nc1 : UIViewController {
  4.         Nc2 *nc2;
  5. }
  6. @property (nonatomic,retain) Nc2 *nc2;

  7. -(IBAction)LoadSecondView:(id)sender;

  8. @end
複製代碼
5.Nc1.m 加入程式碼:
  1. #import "Nc1.h"

  2. @implementation Nc1

  3. @synthesize nc2;

  4. -(IBAction)LoadSecondView:(id)sender{
  5.         if (self.nc2==nil){
  6.                 Nc2 *view2=[[Nc2 alloc] initWithNibName:@"Nc2" bundle:[NSBundle mainBundle]];
  7.                 self.nc2=view2;
  8.                 [view2 release];       
  9.         }
  10.         [self.navigationController pushViewController:self.nc2 animated:YES];
  11. }

  12. - (void)viewDidLoad {
  13.     [super viewDidLoad];
  14. self.title=@"主畫面";
  15. }
複製代碼
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 的視窗
vt01.gif
2009-2-28 08:52


9.點開 Navigation Controller 並選取 View Controller (Navigation Item) 後按下 [Tools/Identify Inspector]
vt03.gif
2009-2-28 09:09


10.從 Class 的下拉清單中選擇 Nc1
vt04.gif
2009-2-28 09:09


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


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


14.點選 MainWindow.xib 中的 View Transitioning App Delegate
15.將Inspector視窗中 Outlets下方的nc1與MainWindow.xib視窗中的 Navigation Controller 建立連結
vt06.gif
2009-2-28 09:35


16.最後在Interface Builder的視窗中選擇[File/New...] 並選擇 View 後按 Choose
vt07.gif
2009-2-28 09:35


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

18.出現是否將此檔加入至ViewTransitioning的提示視窗,請打勾並按下 [Add]
vt08.gif
2009-2-28 09:42


19.點選 View 介面設計視窗並從 [Library] 中拖曳一個 Label 到畫面上,同時修改顯示文字
vt09.gif
2009-2-28 09:42


20.點選 Nc2 視窗中的 [File's Owner] 並按下 [Tools/Identify Inspector]
vt10.gif
2009-2-28 09:59


21.在Class的下拉清單中選擇 Nc2
vt11.gif
2009-2-28 09:59


22.按下[Tools/Connections Inspector] 並將 Outlets 下方的 view 與 Nc2 視窗中的 View進行連結
vt12.gif
2009-2-28 09:59


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

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

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

ViewTransitioning.zip (21.92 KB)

售價: K 幣 1 金  [記錄]  [購買]


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

非常實用喔!!
呵呵!!我這個呆子...原來只是檔名不一樣而已...
[會心一笑]:
請教大家,
我想做出這樣類似的呈現方式,
但是不用 NavigationController,
用 ViewController 來控制就好,
而想在這個例子的 Nc2 中加入一個 UIButton,
按下 Nc2 裡的 Button 就可以把 Nc1 Load 進來.

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

先感謝大家的閱讀跟協助了~
請教一下!!我目前想以這個範例修改成NavigationControlle,而不用button到下一頁...
想請問一下該怎麼弄,謝謝!!一直想不透!!
這個不就是使用NavigationController來切換畫面嗎??
[會心一笑]:
用Button來切換View可以利用
[Nc1.view removeFromSuperView]及[self addSubview:Nc2.view]
這兩個方法,加油!!
辛苦了 ^_^ 小弟實在獲益良多 ^_^
[會心一笑]:
很詳細的範例,謝謝分享。
[會心一笑]:
大大你好,因為我是初心者,所以正好藉由這篇文章來練習,謝啦
[會心一笑]:
本文最後由 SMC 於 2009-10-3 08:09 編輯

請問版大,如何加入版面( Cover Page ) 呢?  謝謝。。。
[會心一笑]:
感謝
..正在學習中..
[會心一笑]:
看到九宫格的雏形了,感谢版主分享,获益良多。
[會心一笑]:
不错,谢谢
[會心一笑]:
返回列表