你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發綜合 >> iOS應用中使用Toolbar工具欄方式切換視圖的方法詳解

iOS應用中使用Toolbar工具欄方式切換視圖的方法詳解

編輯:IOS開發綜合

關於UIToolbar
ToolBar工具欄是視圖View的屬性,可以在工具欄上添加工具欄按鈕Bar Button Item(可以是自定義的Custom、也可以是系統自帶的BarButtonSystemItem ),視圖控制器可以通過工具欄項對視圖中內容進行操作。

注意事項:
在導航欄控制器中會有一個UIToolBar實例,但默認是隱藏的,如果需要顯示,需要通過這個方法將其打開:

201642193049007.png (766×89)

在這裡需要注意的是,與UINavigationBar類似,導航控制器擁有且只擁有一個UIToolBar實例,但UIToolBar擁有的UIBarButtonItem實例,是由視圖控制器進行管理的,如下所示:

201642193128090.png (757×159)

工具欄風格:

typedef NS_ENUM(NSInteger, UIBarStyle) {
  UIBarStyleDefault     = 0,    //默認風格,藍色文字
  UIBarStyleBlack      = 1,    //黑色背景,褐色文字
  UIBarStyleBlackOpaque   = 1,  // 純黑色背景,白色文字
  UIBarStyleBlackTranslucent = 2,  // 透明黑色背景,白色文字
};

屬性:

@property(nonatomic)    UIBarStyle barStyle;  //工具欄風格,默認為藍色
@property(nonatomic,copy)  NSArray  *items;   //工具欄中的按鈕單元,UIBarButtonItem
@property(nonatomic,assign,getter=isTranslucent) BOOL translucent //是否透明
@property(nonatomic,retain) UIColor *tintColor;    //按鈕顏色
@property(nonatomic,retain) UIColor *barTintColor; //工具欄顏色

方法:
※設置工具欄中的按鈕單元

- (void)setItems:(NSArray *)items animated:(BOOL)animated; 

※設置工具欄的背景圖像

復制代碼 代碼如下:

- (void)setBackgroundImage:(UIImage *)backgroundImage forToolbarPosition:(UIBarPosition)topOrBottom barMetrics:(UIBarMetrics)barMetrics;

※獲取工具欄的背景圖像

復制代碼 代碼如下:
- (UIImage *)backgroundImageForToolbarPosition:(UIBarPosition)topOrBottom barMetrics:(UIBarMetrics)barMetrics;


※設置工具欄的陰影圖像

復制代碼 代碼如下:
- (void)setShadowImage:(UIImage *)shadowImage forToolbarPosition:(UIBarPosition)topOrBottom;


 ※獲取工具欄的陰影圖像

復制代碼 代碼如下:
- (UIImage *)shadowImageForToolbarPosition:(UIBarPosition)topOrBottom ;

Tool Bar方式切換視圖
1、創建工程:
運行Xcode,新建一個Empty Application,名稱為MultiView,其他設置如下圖:

201642193318520.png (517×221)

2、創建3個View Controller:
依次選擇File — New — New File,打開如下窗口:

201642193334536.png (734×494)

找到UIViewController subclass並單擊Next,打開下面的窗口:

201642193358623.png (594×321)

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

201642193415059.png (263×271)

3、為三個View Controller創建.xib文件:
依次選擇File — New — New File,打開如下窗口:

201642193435862.png (733×494)

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

201642193455889.png (429×311)

輸入名稱RootView,單擊Create,創建了一個.xib文件。用同樣的方法再創建兩個.xib,名稱分別是FirstView和SecondView。
4、修改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的視圖不會被狀態欄擋住
5、修改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

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

這樣,我們201642193602292.png (714×197)就可以從RootView.xib文件向RootViewController創建Outlet和Action了。
7、為RootView.xib添加工具欄:打開RootView.xib,拖一個Tool Bar到視圖上,雙擊Tool Bar上的按鈕,修改其名稱為Switch Views:

201642193620664.png (421×229)

8、添加Action映射:
選中Switch Views按鈕,按住Control,拖到File's Owner,松開鼠標後選擇switchViews方法:

201642193655682.png (269×202)

9、選擇File's Owner,按住Control鍵,拖到View,松開鼠標,選擇view:

201642193709607.png (235×193)

10、修改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; 
  } 
}

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,進行如下設置:

201642193814931.png (900×468)

對SecondView.xib進行同樣設置,不過背景顏色設成紅色。
13、此時運行程序,你會看見剛啟動的時候,程序顯示的綠色背景,輕觸Switch Views按鈕後,背景變成了紅色。不斷輕觸按鈕,背景不斷變換。
14、添加切換背景的動畫效果:
打開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

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

201642193904648.png (350×500)201642193920985.png (350×500)

  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved