使用Tool Bar切換視圖

原創 w809026418 2018-09-03 07:26

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

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開始創建我們的程序。

 

1、創建工程：

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

 

 

2、創建3個View Controller：

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

 

 

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

 

 

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

 

 

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

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

 

 

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

 

 

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

 

4、修改App Delegate：

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

C代碼 複製代碼 收藏代碼
  1. #import <UIKit/UIKit.h>   
  2. @class RootViewController;   
  3. @interface AppDelegate : UIResponder <UIApplicationDelegate>   
  4. @property (strong, nonatomic) UIWindow *window;   
  5. @property (strong, nonatomic) RootViewController *rootViewController;   
  6. @end  
 

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

C代碼 複製代碼 收藏代碼
  1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions   
  2. {   
  3.     self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];   
  4.     // Override point for customization after application launch.   
  5.     self.rootViewController = [[RootViewController alloc] initWithNibName:@"RootView" bundle:nil];    
  6.     UIView *rootView = self.rootViewController.view;    
  7.     CGRect rootViewFrame = rootView.frame;    
  8.     rootViewFrame.origin.y += [UIApplication sharedApplication].statusBarFrame.size.height;    
  9.     rootView.frame = rootViewFrame;    
  10.     [self.window addSubview:rootView];    
  11.     self.window.backgroundColor = [UIColor whiteColor];   
  12.     [self.window makeKeyAndVisible];   
  13.     return YES;   
  14. }  
 

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

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

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

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

 

5、修改RootViewController.h：

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

C代碼 複製代碼 收藏代碼
  1. #import <UIKit/UIKit.h>   
  2. @class FirstViewController;   
  3. @class SecondViewController;   
  4.   
  5. @interface RootViewController : UIViewController   
  6.   
  7. @property (strong, nonatomic) FirstViewController *firstViewController;   
  8. @property (strong, nonatomic) SecondViewController *secondViewController;   
  9. - (IBAction)switchViews:(id)sender;   
  10.   
  11. @end  
 

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

 

 

這樣，我們就可以從RootView.xib文件向RootViewController創建Outlet和Action了。

 

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

 

 

8、添加Action映射：

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

 

 

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

 

 

10、修改RootViewController.m：

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

C代碼 複製代碼 收藏代碼
  1. #import "FirstViewController.h"   
  2. #import "SecondViewController.h"  
 

在@implementation之後添加代碼：

C代碼 複製代碼 收藏代碼
  1. @synthesize firstViewController;   
  2. @synthesize secondViewController;  
 

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

C代碼 複製代碼 收藏代碼
  1. - (void)viewDidLoad   
  2. {   
  3.     self.firstViewController = [[FirstViewController alloc] initWithNibName:@"FirstView" bundle:nil];   
  4.     [self.view insertSubview: firstViewController.view atIndex:0];   
  5.     [super viewDidLoad];   
  6. }  
 

添加switchViews方法：

C代碼 複製代碼 收藏代碼
  1. - (IBAction)switchViews:(id)sender {   
  2.     if (self.secondViewController.view.superview == nil) {   
  3.         if (self.secondViewController == nil) {    
  4.             self.secondViewController = [[SecondViewController alloc] initWithNibName:@"SecondView" bundle:nil];    
  5.         }    
  6.         [firstViewController.view removeFromSuperview];    
  7.         [self.view insertSubview:self.secondViewController.view atIndex:0];    
  8.     } else {   
  9.         if (self.firstViewController == nil) {    
  10.             self.firstViewController =    
  11.             [[FirstViewController alloc] initWithNibName:@"FirstView" bundle:nil];    
  12.         }    
  13.         [secondViewController.view removeFromSuperview];    
  14.         [self.view insertSubview:self.firstViewController.view atIndex:0];    
  15.     }    
  16. }  
 

修改didReceiveMemoryWarning方法：

C代碼 複製代碼 收藏代碼
  1. - (void)didReceiveMemoryWarning   
  2. {   
  3.     [super didReceiveMemoryWarning];   
  4.     if (self.firstViewController.view.superview == nil) {    
  5.         self.firstViewController = nil;    
  6.     } else {    
  7.         self.secondViewController = nil;    
  8.     }    
  9. }  
 

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

 

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

 

 

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

 

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

 

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

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

C代碼 複製代碼 收藏代碼
  1. - (IBAction)switchViews:(id)sender {    
  2.     [UIView beginAnimations:@"View Flip" context:nil];    
  3.     [UIView setAnimationDuration:1.25];    
  4.     [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];   
  5.     if (self.secondViewController.view.superview == nil) {    
  6.         if (self.secondViewController == nil) {    
  7.             self.secondViewController = [[SecondViewController alloc] initWithNibName:@"SecondView" bundle:nil];    
  8.         }    
  9.         [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES];    
  10.         [self.firstViewController.view removeFromSuperview];    
  11.         [self.view insertSubview:self.secondViewController.view atIndex:0];    
  12.     } else {    
  13.         if (self.firstViewController == nil) {    
  14.             self.firstViewController = [[FirstViewController alloc] initWithNibName:@"FirstView" bundle:nil];    
  15.         }    
  16.         [UIView setAnimationTransition: UIViewAnimationTransitionCurlUp forView:self.view cache:YES];    
  17.         [self.secondViewController.view removeFromSuperview];    
  18.         [self.view insertSubview:self.firstViewController.view atIndex:0];    
  19.     }    
  20.     [UIView commitAnimations];    
  21. }  
 

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

C代碼 複製代碼 收藏代碼
  1. UIViewAnimationTransitionFlipFromLeft   
  2. UIViewAnimationTransitionFlipFromRight   
  3. UIViewAnimationTransitionCurlDown   
  4. UIViewAnimationTransitionCurlUp  
 

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

 

 

 

 

來源：http://my.oschina.net/plumsoft/blog/49522

 

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章