ios開發入門- TabBarController使用和多視圖切換

目標： ios TabbarController 組件的使用

程序效果 如圖 ：

TabBarController 是一個菜單組件

TabBarController 組件在ios 程序中常常看到 ，是一個比較經常使用的組件

TabBarController 幕中最多隻能夠放置5個，若是超過5個系統會自動生成一個More按鈕

 

下面各位童鞋一塊兒來作一遍

啓動Xcode 建立一個新的ios Application  模板選擇 Empty Application 點擊下一步

在項目信息中 項目名稱 填寫 」TabBarControllerDemo「 class Prefix 前綴名 填寫爲 "Tabbar"   由於咱們是開發 iphone程序 因此 Device Family 項選擇 iphone 下面複選所有不選中。    如圖：

 

 

點擊下一步 ，選擇保存位置，點擊建立 ，此時咱們的 項目沒有一個視圖文件的喔 。沒事 咱們建立一個xib文件   選中項目  右鍵  -》 new file -》 ios -》user interface -》empty 點擊next 保存文件名 爲 「TabBarViewController」 而後建立

打開此xib 文件到此時 改xib 裏面是沒有任何元素的， 咱們爲此xib 文件添加一個 Tab Bar Controller 組件 以下圖：

從上圖中咱們能夠看出 TabBarController 已經默認給咱們添加了 兩個菜單按鈕了，那咱們若是讓該 xib 顯示呢 ，咱們還須要作一下幾步

1： 爲該 xib 添加所屬class  在該xib 界面中 選擇 File‘s Owner 而後在實用工具欄中選擇身份檢查器，把 class 改成咱們的委託類 以下圖

 2： 創建鏈接 把 TabBarController 鏈接到 委託器中 ， 點擊助理編輯器， 若是編輯器右邊顯示的 是 委託器的 .m 文件 這在 標示的位置（這裏切換文件） 切換爲 .h 文件。

 

在上圖中 選中  Tab Bar Controller 組件 並按住 Ctrl 把改組件拖到 右側的 @end和 @interface 中的部分 ，此時鬆開 鼠標 會彈出一個對話框 ，讓你填寫鏈接類型connection屬性保持默認 爲 ： Outlet   輸出口的名稱，這裏填寫 tabBarViewContorller  填寫完成後 點擊 connect 按鈕。

上圖中是我已經 創建好鏈接的。 

創建好鏈接後 xcode 會爲咱們生成 一系列的代碼  。

在委託器的 .h 文件中會爲咱們生成一個 輸出口  代碼以下：

@property (retain, nonatomic) IBOutlet UITabBarController *tabBarViewController;

該輸出口的 惟一做用就是告訴程序  tabBarViewContrller 將鏈接到 xib 中的 組件對象。

@property 關鍵字 ：可讓咱們擺脫 建立get 和 set 方法的枯燥過程，但它須要和 .m 文件中的 @Synthesize 組合 這樣就能夠通知編譯程序的時候自動建立 get 和 set 方法了

IBOutlet 關鍵字：用該關鍵字 標示改屬性是一個輸出口類型

 

在委託器的 .m文件中會爲咱們生成一個 輸出口  代碼以下：

@synthesize tabBarViewController = _TabBarViewController; //生成的代碼

- (void)dealloc
{
    [_window release];
    [_tabBarViewController release]; // 生成的代碼
    [super dealloc];
}

銷燬改類實例時 同時銷燬對象tabBarViewController 由於咱們沒有使用自動內存計數器，因此咱們須要顯式的銷燬該對象。

 

3： 初始化視圖 xib 文件 並添加到 當前的 視圖中。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
    // Override point for customization after application launch.
    //加載視圖文件
    [[NSBundle mainBundle]loadNibNamed:@"TabBarViewController" owner:self options:nil];
    [self.window addSubview:self.TabBarViewController.view];
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

上面藍色部分的代碼 是咱們手工添加進去的。 

到此咱們就已經能夠查看視圖效果了 保存並運行 ，效果圖以下 ：

 

在上圖中 咱們已經能夠看到又兩個 菜單了，這兩個菜單是 改組件 自動帶的。

 下面咱們來修改 菜單 的 風格樣式 ，並建立一個本身的 菜單 。

依次展開 Objects 窗口下面的 tab bar controller 組件 選中 第一個 tab bar ltem 組件，你也能夠 直接在 視圖中選取，但咱們一次點擊的是 tab bar ltem 組件外面的 view controller ，須要再點一次 才能夠選中 tab bar ltem 組件 ，這點要注意喔 ，選中後以下圖：

打開咱們的 屬性檢查器 。 在屬性檢查器 中的  Tab bar ltem 欄目中 有個 ldenfifier 屬性， 這個屬性是系統自帶的 風格，各位童鞋 能夠一個一個 去體驗 一下 。

這裏 咱們 就把 第一個 tab bar ltem 的 ldentifier 屬性選擇爲 contacts

第二個 tab bar ltem 的 ldentifier 屬性選擇爲 Most viewed

咱們在拖一個 tab bar ltem（在編輯器的右下角） 組件到 tab bar controller 組件中去 ，贊成選中（要肯定選擇 Tab bar ltem 組件喔）並打開 屬性檢查器 設置 其風格。

在這一步 咱們須要一個 24*24 項目的 小圖片 做爲 咱們的 菜單圖片 ，我這裏 隨便找了一張，並把他拖到工程中的Supporting Files 目錄下 ，xcode 會自動提示把這個圖片添加到工程的主束中（在 ios 項目中，每個文件都屬於 項目的主束），

選中剛剛添加的 tab bar ltem打開 屬性檢查器 設置 在 屬性檢查器 中的Bar ltem 欄目就是咱們須要設置的屬性，這裏咱們設置 title 和 p_w_picpath  title 爲菜單名稱，p_w_picpath 爲菜單的圖片 設置後 效果以下 ：

 

保存看看效果 吧  嘻嘻 。

在 tab Bar ltem 組件中 還有個很是方便的 屬性 ，能夠直接設置 該菜單下的條數  ，那就是  屬性檢查器中的 tab bar ltem 欄目中的餓badge 屬性 ，設置屬性後 ，效果以下 。

 

呵呵 方便吧 。

下面 咱們來 完成 如何讓每一個菜單 關聯一個 視圖，點擊某個菜單 就跳到 某個視圖去。

1： 首先建立幾個 帶 xib 的 控制器 。選擇xcode 中的項目目錄 右鍵 點擊 new file -》ios -》cocoa Touch  -》 Objective -C calss 如圖 ：

並點擊下一步 ，填寫 class 屬性 爲 」ContactsViewController「    Subclass of 選擇爲 UiViewController      並選中With xib for user interface 複選框  

而後選擇保存位置 完成建立  。

 以一樣的方法建立 MostViewController 和 HomeViewContrller控制器

 

爲了區分 每一個 view  咱們打開 這 3個 控制器的 xib 文件 爲每一個 xib 視圖 添加一個 lable 組件 併爲 每一個 lable 的text 屬性設置（選中lable組件打開屬性檢查器 在這裏面設置text值）  名稱 爲了 方便 咱們每個 lable 的text值設的和菜單的值 一致 。如圖：

 

 

3 個 視圖文件所有設置完成後 開始 設置 菜單的關聯視圖了 。

要設置 每一個 菜單的 關聯視圖 也很是簡單 。

選擇菜單的 View Controller 並打開 身份檢查器，把class 設置爲 咱們想打開的 視圖控制器就能夠了 如圖 ：

依次爲 3個 菜單 設置不一樣的視圖控制器（這裏的控制器就是咱們剛剛新建裏的控制器）。

Contacts 的 class 設置爲 ：ContactsViewController

most Viewed的 class 設置爲 ：MostViewController

home 的 class 設置爲 ： HomeViewContrller

而後保存運行 ，運行去看看效果吧 。如圖 ：

 

有問題的 地方 歡迎 各位童鞋提出 。  源代碼下載地址 ：

https://blog.51cto.com/ext/down_att.php?aid=36014&code=7333