iOS開發8：使用Tool Bar切換視圖

以前討論的都是單視圖應用程序，而在實際應用中，咱們可能要多個視圖，並根據用戶的須要切換視圖。

iOS中幾種典型的多視圖程序：

（1）Tab Bar Application：程序的底部有一排按鈕，輕觸其中一個按鈕，相應的視圖被激活並顯示出來；

（2）Navigation-Based Application：其特色是使用navigation controller，而navigation controller使用navigation bar來控制多級視圖；

（3）Tool Bar Application：程序的底部有一個工具條，利用工具條中的按鈕來切換視圖，常常與Tab Bar Application混淆。

此次要作的例子就是使用了Tool Bar，只是簡單了實現了視圖切換功能，並添加一些視圖切換時的效果。在作例子以前，首先要了解一下視圖的切換原理。

通常來講，一個多視圖的程序要至少三個View Controller，其中一個做爲Root Controller。所謂Root Controller，是指用戶看到的第一個Controller，而且在程序加載時這個Controller就加載了。

Root Controller一般是UINavigationController或者UITabBarController的子類，也能夠是UIViewController的一個子類。

在多視圖程序中，Root Controller的工做得到兩個或者更多的其餘視圖，並根據用戶輸入顯示不用的視圖。

除Root Controller以外，其餘視圖就做爲Content Controller，能夠理解爲可能會顯示出來的各類視圖。

爲了更好地理解多視圖程序的結構，咱們從Empty Application開始建立咱們的程序。

一、建立工程：

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

二、建立3個View Controller：

依次選擇File — New — New File，打開以下窗口：

找到UIViewController subclass並單擊Next，打開下面的窗口：

輸入名稱RootViewController，而且保證Subclass of選擇UIViewController，下面的兩個選框都不選；按照一樣的步驟新建兩個View Controller，名稱分別是FirstViewController和SecondViewController。建好後，在Project Navigation中顯示文件以下：

三、爲三個View Controller建立.xib文件：

依次選擇File — New — New File，打開以下窗口：

在左邊選User Interface，右邊選View，單擊Next，在新窗口中的Device Family中選擇iPhone，單擊Next，打開以下窗口：

輸入名稱RootView，單擊Create，建立了一個.xib文件。用一樣的方法再建立兩個.xib，名稱分別是FirstView和SecondView。

四、修改App Delegate：

4.1 單擊AppDelegate.h，在其中添加代碼，在@interface以前添加@class RootViewController;在@end以前添加@property (strong, nonatomic) RootViewController *rootViewController;添加以後的代碼以下：

#import <UIKit/UIKit.h>
@class RootViewController;
@interface AppDelegate : UIResponder <UIApplicationDelegate>
@property (strong, nonatomic) UIWindow *window;
@property (strong, nonatomic) RootViewController *rootViewController;
@end

4.2 單擊AppDelegate.m，修改其代碼。在@implementation以前添加#import "RootViewController.h"，在@implementation以後添加@synthesize rootViewController;而後修改didFinishLaunchingWithOptions方法以下：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    self.rootViewController = [[RootViewController alloc] initWithNibName:@"RootView" bundle:nil]; 
    UIView *rootView = self.rootViewController.view; 
    CGRect rootViewFrame = rootView.frame; 
    rootViewFrame.origin.y += [UIApplication sharedApplication].statusBarFrame.size.height; 
    rootView.frame = rootViewFrame; 
    [self.window addSubview:rootView]; 
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

① self.rootViewController = [[RootViewController alloc] initWithNibName:@"RootView" bundle:nil];

這行代碼用於從RootView.xib文件中初始化rootViewController，注意initWithNibName:@"RootView"中不要後綴名.xib

② rootViewFrame.origin.y += [UIApplication sharedApplication].statusBarFrame.size.height;

使得RootViewController的視圖不會被狀態欄擋住

五、修改RootViewController.h：

單擊RootViewController.h，在其中添加兩個屬性和一個方法，以下：

#import <UIKit/UIKit.h>
@class FirstViewController;
@class SecondViewController;

@interface RootViewController : UIViewController

@property (strong, nonatomic) FirstViewController *firstViewController;
@property (strong, nonatomic) SecondViewController *secondViewController;
- (IBAction)switchViews:(id)sender;

@end

六、打開RootView.xib，在坐邊選擇File’s Owner，在右邊打開Identity Inspector，在Class下拉菜單選擇RootViewController：

這樣，咱們就能夠從RootView.xib文件向RootViewController建立Outlet和Action了。

七、爲RootView.xib添加工具欄：打開RootView.xib，拖一個Tool Bar到視圖上，雙擊Tool Bar上的按鈕，修改其名稱爲Switch Views：

八、添加Action映射：

選中Switch Views按鈕，按住Control，拖到File’s Owner，鬆開鼠標後選擇switchViews方法：

九、選擇File’s Owner，按住Control鍵，拖到View，鬆開鼠標，選擇view：

十、修改RootViewController.m：

打開RootViewController.m文件，在@implementation以前添加代碼：

#import "FirstViewController.h"
#import "SecondViewController.h"

在@implementation以後添加代碼：

@synthesize firstViewController;
@synthesize secondViewController;

接下來修改viewDidLoad方法，這個方法默認是被註釋掉的，先去掉其周圍的註釋符，而後修改其代碼以下：

- (void)viewDidLoad
{
    self.firstViewController = [[FirstViewController alloc] initWithNibName:@"FirstView" bundle:nil];
    [self.view insertSubview: firstViewController.view atIndex:0];
    [super viewDidLoad];
}

添加switchViews方法：

- (IBAction)switchViews:(id)sender {
    if (self.secondViewController.view.superview == nil) {
        if (self.secondViewController == nil) { 
            self.secondViewController = [[SecondViewController alloc] initWithNibName:@"SecondView" bundle:nil]; 
        } 
        [firstViewController.view removeFromSuperview]; 
        [self.view insertSubview:self.secondViewController.view atIndex:0]; 
    } else {
        if (self.firstViewController == nil) { 
            self.firstViewController = 
            [[FirstViewController alloc] initWithNibName:@"FirstView" bundle:nil]; 
        } 
        [secondViewController.view removeFromSuperview]; 
        [self.view insertSubview:self.firstViewController.view atIndex:0]; 
    } 
}

修改didReceiveMemoryWarning方法：

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    if (self.firstViewController.view.superview == nil) { 
        self.firstViewController = nil; 
    } else { 
        self.secondViewController = nil; 
    } 
}

十一、打開FirstView.xib文件，選擇左邊的File’s Owner，而後在Identity Inspector中選擇Class爲FirstViewController；而後按住Control鍵從File’s Owner圖標拖到View，在彈出的菜單選擇view。爲SecondView.xib進行一樣的操做，不過Class選擇爲SecondViewController。

十二、打開FirstView.xib文件，選擇View，打開Attribute Inspector，進行以下設置：

對SecondView.xib進行一樣設置，不過背景顏色設成紅色。

1三、此時運行程序，你會看見剛啓動的時候，程序顯示的綠色背景，輕觸Switch Views按鈕後，背景變成了紅色。不斷輕觸按鈕，背景不斷變換。

1四、添加切換背景的動畫效果：

打開RootViewController.m，修改其中的switchViews方法以下：

- (IBAction)switchViews:(id)sender { 
    [UIView beginAnimations:@"View Flip" context:nil]; 
    [UIView setAnimationDuration:1.25]; 
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    if (self.secondViewController.view.superview == nil) { 
        if (self.secondViewController == nil) { 
            self.secondViewController = [[SecondViewController alloc] initWithNibName:@"SecondView" bundle:nil]; 
        } 
        [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES]; 
        [self.firstViewController.view removeFromSuperview]; 
        [self.view insertSubview:self.secondViewController.view atIndex:0]; 
    } else { 
        if (self.firstViewController == nil) { 
            self.firstViewController = [[FirstViewController alloc] initWithNibName:@"FirstView" bundle:nil]; 
        } 
        [UIView setAnimationTransition: UIViewAnimationTransitionCurlUp forView:self.view cache:YES]; 
        [self.secondViewController.view removeFromSuperview]; 
        [self.view insertSubview:self.firstViewController.view atIndex:0]; 
    } 
    [UIView commitAnimations]; 
}

注意四個表示切換效果的常量：

UIViewAnimationTransitionFlipFromLeft
UIViewAnimationTransitionFlipFromRight
UIViewAnimationTransitionCurlDown
UIViewAnimationTransitionCurlUp

分別表示從左翻轉、從右翻轉、向下卷、向上卷。
運行後翻頁效果以下：

 

最終代碼：http://www.oschina.net/code/snippet_164134_10918