Pages

Wednesday, December 15, 2010

Setting up the Tab Bar Framework

Xcode 提供了 tab bar applications template,我們還是可以自己來建置,不會很費力,而且可以做個很好的練習。所以從 Window-based Application template 開始。

我們從一個 Tab bar controller 做起頭,裡面要包含 5 個 View Controller 。這樣這個完成後可以作為後面額外學習 UIPicker 概念用。

xxxAppDelegate.h
先在 Xcode 建立 root view controller,它是 UITabBarController 的 instance。配製在我們的 xxxAppDelegate.h 裡面,宣告為
UITabBarController *rootController; 當然別忘了加 @property (nonatomic, retain) IBoutlet UITabBarController *rootController 。

xxxAppDelegate.m
另外在 xxxAppDelegate.m 加入 @syntesize rootController; 並且在
- (void)applicationDidFinishLaunching:(UIApplication *)application
配載 [windowaddSubview:rootController.view]; 達到畫面載入知道要加入這個子畫面進來。

xxxViewController
另外建立 5 個 xxxViewController,分別要建立 .h, .m, .xib 作為畫面切換各別所用,並且把要顯示的 icon 準備好,放到 Xcode 裡面 Resource 區域下面。

MainWindow.xib
打開 MainWindow.xib 啓動 Interface Builder。將 Tab Bar Controller 從 library 拖拉到 nib's main window。打開 inspector ,在 Attributes 分頁,可以配製加入我們的 ViewController,所以按下 "+" 符號開設 5 個,且 Title 命名好,依序點選 tab,將 nib name 配製對應到我們的 xib 檔案,切換到 identity 頁面將 class 指定到我們的 xxxViewController,接著點選 tab 上中間區域,到 item attributes 區域,我們可以命名且配製 image 挑選我們要的 icon。後面四個就依序照此步驟操作。過程要檢驗是否有配製正確的話,從看畫面是否顯示 View Load From xxxViewController,切換 tab 可以看到不同準備載入的畫面。

以上完成後,存檔。回到 Xcode 啓動,即可看到 Tab Bar Framework 建置完成,切換各個 Tab 看到畫面還是空白。不過這邊沒關係,後面再將各頁面,分別啓動 xib 檔案,再從 Interface Builder 配製,即可做出差異性了。此為後面 UIPicker 學習用,先製作出來的殼,同時也可以學到如何自己規劃 Tab Bar Framework。


以上可以參考書本 Beginning iPhone 3 Development 章節 Tab Bars and Pickers,或者 Github:edwardinubuntu/Picker

No comments:

Post a Comment