【学习ios之路:UI系列】UITabBarController , UIToorBar

浏览数：19 / 时间：2015年06月11日

1. UITabBarController(标签视图控制器),用来管理具有并列关系的视图控制器,多个界面同时存在.

UITableBarController 和UINavigationController 类似, UITabBarController 也可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型的例子就是QQ 、微信等应?。效果如下图:

技术分享

①使用UITabBarController步骤如下:
     （1）初始化UITabBarController
     （2）设置UIWindow的rootViewController为UITabBarController
     （3）创建相应的子控制器（viewcontroller）
     （4）把子控制器添加到UITabBarController

实现上述效果代码如下:

    //创建第一个试图控制器
    FirstViewController *firstVc = [[FirstViewController alloc] init];
    //设置barButton标题
    firstVc.tabBarItem.title = @"消息";
    //角标
    firstVc.tabBarItem.badgeValue = @"new";
    //设置被选中时的图片
    first Vc.tabBarItem.selectedImage = [UIImage imageNamed:@"tabbar_contacts"];
    //设置图片
    firstVc.tabBarItem.image = [UIImage imageNamed:@"tabbar_mainframe"];
    firstVc.tabBarItem.tag = 100;//设置tag
    
    //创建第二个控制器
    SecondViewController *secondVc = [[SecondViewController alloc] init];
    secondVc.tabBarItem.title = @"通讯里";
    //被选中的时的图片
    secondVc.tabBarItem.selectedImage = [UIImage imageNamed:@"tabbar_discover"];
    secondVc.tabBarItem.badgeValue = @"33";
    secondVc.tabBarItem.tag = 101;
    //修改字体的位置
    [secondVc.tabBarItem setTitlePositionAdjustment:UIOffsetMake(-1, -1)];
    secondVc.tabBarItem.image = [UIImage imageNamed:@"tabbar_contacts"];

    //第三个
    ThirdViewController *thirdVc = [[ThirdViewController alloc] init];
    thirdVc.tabBarItem.title = @"发现";
    thirdVc.tabBarItem.tag = 102;
    thirdVc.tabBarItem.badgeValue = @"2";
    thirdVc.tabBarItem.image = [UIImage imageNamed:@"tabbar_discover"];
    thirdVc.tabBarItem.selectedImage = [UIImage imageNamed:@"tabbar_me.png"];

    //第四个
    FoursViewController *fourVc = [[FoursViewController alloc] init];
    fourVc.tabBarItem.title = @"我的";
    fourVc.tabBarItem.tag = 103;
    fourVc.tabBarItem.image = [UIImage imageNamed:@"tabbar_me.png"];
    fourVc.tabBarItem.badgeValue = @"88";
    fourVc.tabBarItem.selectedImage = [UIImage imageNamed:@"tabbar_discover"];
    
    //第五个
    FifthViewController *fifthVC = [[FifthViewController alloc] init];
    fifthVC.tabBarItem.title  = @"下载";
    fifthVC.tabBarItem.image = [UIImage imageNamed:@"qr_toolbar_online_download_hl"];
    
 
    //第六个
    SixViewController *sixVc = [[SixViewController alloc] init];
    sixVc.tabBarItem.title = @"工具";
    sixVc.tabBarItem.image = [UIImage imageNamed:@"qr_toolbar_light_up_hl"];
    
    //当标签视图控制器管理的视图控制器超过5个时.标签栏第五个标签自动变成More(更多)标签,
                                                  除了前四个标签,其余标签全部放入更多中.
    
    //创建UITabBarController对象
    UITabBarController *barVC = [[UITabBarController alloc] init];
    //1.配置标签视图控制器所管理的多个视图控制器
    barVC.viewControllers = @[firstVc,secondVc,thirdVc,fourVc,fifthVC,sixVc];
    //3.修改标签栏的渲染颜色
    barVC.tabBar.barTintColor  = [UIColor whiteColor];
    barVC.tabBar.tintColor = [UIColor blackColor];
    
    //4.设置默认选中的标签
    barVC.selectedIndex = 2;
    //设置默认视图控制器
    barVC.selectedViewController = thirdVc;
    
    //5.给tabBar设置背景图片
    //barVC.tabBar.backgroundImage  = [UIImage imageNamed:@"320x49"];
    
    //6.设置代理
    barVC.delegate = self;
    
    //7.将视图标签指定为window的根视图控制器
    self.window.rootViewController = barVC;

②UITabBarController控制器常用代理方法如下:

//询问标签是否可选中
- (BOOL)tabBarController:(UITabBarController *)tabBarController 
                    shouldSelectViewController:(UIViewController *)viewController  {
    
    return YES;
}
//当选中标签时触发
- (void)tabBarController:(UITabBarController *)tabBarController
                        didSelectViewController:(UIViewController *)viewController {
     
    //需要选中的是第二个标签,则去掉角标
    if (viewController.tabBarItem.tag == 101) {
        viewController.tabBarItem.badgeValue = nil;
    }
 }

//将要开始自定义标签视图控制器所管理的多个视图控制器时触发,点击edit时
- (void)tabBarController:(UITabBarController *)tabBarController 
                  willBeginCustomizingViewControllers:(NSArray *)viewControllers  {
    NSLog(@"%s %d",__FUNCTION__,__LINE__);
    NSLog(@"%@",viewControllers);
 }
//结束自定义标签视图控制器所管理的多个视图控制器时触发.点击done时
- (void)tabBarController:(UITabBarController *)tabBarController didEndCustomizingViewControllers:(NSArray *)viewControllers changed:(BOOL)changed {
   NSLog(@"%s %d",__FUNCTION__,__LINE__);
    NSLog(@"%@ \n  %d",viewControllers,changed);
}

③UITabBar

下方的工具条称为UITabBar ，如果UITabBarController有N个子控制器,那么UITabBar内部就会有N 个UITabBarButton作为子控件与之对应。
注意： UITabBarButton在UITabBar中得位置是均分的，UITabBar的高度为49。

在上面的程序中，UITabBarController有6个子控制器,所以UITabBar中有6个UITabBarButton，UITabBar的结构?大致如下图所示：

技术分享

UITabBarButton ?面显?什么内容,由对应子控制器的 tabBarItem 属性来决定.如下:设置

    firstVc.tabBarItem.title = @"消息";
    //角标
    firstVc.tabBarItem.badgeValue = @"new";
    //设置被选中时的图片
    first Vc.tabBarItem.selectedImage = [UIImage imageNamed:@"tabbar_contacts"];
    //设置图片
    firstVc.tabBarItem.image = [UIImage imageNamed:@"tabbar_mainframe"];

注意：视图展示的顺序和添加的顺序一致，和导航控制器中不同，展现在眼前的是第一个添加的控制器对应的View。

2.UIToorBar

工具条,主要搭配导航控制器使用,由导航控制器控制,主要用来存储一些系统的辅助功能.在网页切换,微信的评论等.
可以在toolBar上添加任何View。其实它的原理是把你要添加的View先加到UIBarButtonItem里面，最后再把UIBarButtonItem数组一次性放到toolbar的items里面。

UIBbarButtonItem有如下几种初始化的方法：
     -initWithTitle
     -initWithImage
     -initWithBarButtonSystemItem
     -initWithCustomView

实现效果如下:

技术分享

实现代码如下:

    //创建UIToorBar对象
   UIToolbar *toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 64, 320, 49)];
   toolBar.translucent = NO;//配置属性,毛玻璃效果
   toolBar.barTintColor = [UIColor greenColor];//背景颜色
   //设置字体样式 
   toolBar.tintColor = [UIColor purpleColor];
   //toolbar样式
   //toolBar.barStyle = UIBarStyleBlackOpaque;
   //设置图片
   [toolBar setBackgroundImage:[UIImage imageNamed:@"user_guide_page6"] forToolbarPosition:UIBarPositionBottom barMetrics:UIBarMetricsDefault];
   //添加到视图控制器的根视图上
   [self.view addSubview:toolBar];
   [toolBar release];
   
   //UIBarButtonItem初始化方法1(initWithTitle)
   UIBarButtonItem *barItems = [[UIBarButtonItem alloc] initWithTitle:@"妞1" 
     style:UIBarButtonItemStylePlain target:self action:@selector(handleBarAction:)];
    //系统button
   //UIBarButtonItem初始化方法2(initWithBarButtonSystemItem) 
   UIBarButtonItem *addItems = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:
            UIBarButtonSystemItemAdd target:self action:@selector(handleAddAction:)];
    //添加图片<pre name="code" class="objc">    //UIBarButtonItem初始化方法3(initWithImage) 
    UIBarButtonItem *imageItems = [[UIBarButtonItem alloc] initWithImage:

[UIImage imageNamed:@"post_timeline_mood_icon_1"]
style:UIBarButtonItemStylePlain target:self action:@selector(handleReplyAction:)];

<pre name="code" class="objc">    //UIBarButtonItem初始化方法2(initWithBarButtonSystemItem) 
    UIBarButtonItem *items = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:
                          UIBarButtonSystemItemFlexibleSpace target:self action:nil];
    //调节buttonItem之间的间距
    UIBarButtonItem *fiex = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:
                            UIBarButtonSystemItemFixedSpace target:self action:nil];
    fiex.width  = 50;
    //将UIBarButtonItem添加到数组
     //fiex 和items  起到调节按钮之间的位置
    NSArray *itemsArr1 = @[items,barItems,fiex,items,addItems,items,imageItems,items];
    NSLog(@"%@",itemsArr1);
    //NSArray *itemsArr = @[fiex,barItems,fiex,addItems,fiex,imageItems,fiex];
    //添加
    [toolBar setItems:itemsArr animated:YES];
    [barItems release];
    [itemsArr release];

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

【学习ios之路:UI系列】UITabBarController , UIToorBar