当前位置： 移动技术网 > 移动技术>移动开发>IOS > iOS应用中使用Toolbar工具栏方式切换视图的方法详解

iOS应用中使用Toolbar工具栏方式切换视图的方法详解

2019年07月24日  | 移动技术网移动技术  | 我要评论

关于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)

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网