iOS開發9：使用Tab Bar切換視圖

上一篇文章提到了多視圖程序中各個視圖之間的切換，用的Tool Bar，說白了仍是根據觸發事件使用代碼改變Root View Controller中的Content View。此次，咱們仍是講一講切換視圖，不過此次使用的是Tab Bar。

此次要寫的程序運行起來的效果是這樣的：底部有幾個圖標，每一個圖標對應一個視圖。每點擊一個圖標，對應的視圖就會打開。以下圖，就是咱們作好的程序效果：

 

每一個Tab Bar有一個對應顏色的視圖。

爲了搞清使用Tab Bar切換視圖的原理，咱們仍是從Empty Application開始建立咱們的程序。

一、運行Xcode 4.2，新建一個Empty Application，名稱爲Tab Bar Application，其餘設置以下圖：

二、爲工程添加圖標文件：

這裏要添加的圖標文件是用來定製各Tab Bar的。首先新建一個Group，選擇File — New — New Group，建立好後給新的Group重命名爲Icons。而後，將準備好的四個圖標文件拖到Group中，在彈出的窗口選擇Copy items……(if needed)，以下圖：

四、建立四個View Controller：

選中Tab Bar Application這個Group，而後選擇File — New — New File，在彈出的窗口，左邊選擇Cocoa Touch，右邊選擇UIViewController subclass，以後選Next，在彈出的窗口中，輸入名稱BlueViewController，並選中With xib，以下圖：

而後選擇Next，選好位置，點擊Create，這樣就建立了一個ViewController。以一樣的方式再建立三個，名稱分別是GreenViewController，RedViewController，YellowViewController。

五、建立TabBarController.xib：

選中Tab Bar Application這個Group，而後選擇File — New — New File，在彈出的窗口，左邊選擇User Interface，右邊選擇Empty：

而後點Next，在彈出的窗口輸入名稱TabBarController，選好位置後點擊Create。

以後，在Group中點擊TabBarController.xib，你會發現跟BlueViewController.xib不同，裏邊沒有一個像View同樣的窗口，不要着急，咱們拖一個Tab Bar Controller到裏邊：

六、在上圖中選擇File’s Owner，打開Identity Inspector，在Class一欄選擇AppDelegate：

這樣，咱們就能夠從TabBarController.xib向AppDelegate建立OutLet映射了。

七、打開Assistant Editor，保證Assistant Editor中打開的是AppDelegate.h，在左邊選中Tab Bar Controller，按住Control，往AppDelegate.h中建立映射：

而後在彈出的窗口輸入rootController，點擊Connect：

打開AppDelegate.m，在didFinishLaunchingWithOptions方法中添加代碼：

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

八、單擊TabBarController.xib，拖兩個Tab Bar Item到Tab Bar上：

九、選中第一個View Controller，在右邊打開Identity Inspector，在Class中選擇BlueViewController：

而後，打開Attribute，在NIB Name選擇BlueViewController：

對其餘的View Controller進行一樣的操做，依次設成GreenViewController、RedViewController、YellowViewController。

十、設置Tab Bar圖標和文字：

展開Blue View Controller，選中其中的Tab Bar Item，打開Attribute，以下圖：

Badge屬性：設置的文字將以紅色圖標形式顯示出來，好比，這個Tab顯示的是Mail視圖，你能夠用Badge顯示有多少封未讀郵件。

Identifier屬性：這個屬性對應的下拉菜單中，若是你選擇的是否是Custom，好比是Favorite，那麼這個Tab Bar的名稱和圖標就都設置好了。咱們這裏選擇Custom。

在Title輸入Blue，在Image選擇Blue.png。

對其餘Tab Bar Item進行相似操做，這樣以後，整個Tab Bar以下圖所示：

十一、如今單擊.xib，選中View，打開Attribute Inspector，將其背景顏色改爲藍色。而後，在Simulated Metrics中設置Bottom Bar爲Tab Bar：

對GreenViewController、RedViewController和YellowViewController進行一樣設置，不過背景顏色要設成與其名稱相對應的。

十二、大功告成了，運行一下，看看效果吧：