• IOS之UITabBarController


      在学习IOS开发过程中,针对于UITabBarController的使用也不少出现,UITabBarController和UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换

      使用步骤:

    1初始化UITabBarController

    2设置UIWindow的rootViewController为UITabBarController

    3创建相应的子控制器(viewcontroller)

    4把子控制器添加到UITabBarController

      代码如下

    //初始化视图控制器
        UIViewController * vc1=[[UIViewController alloc] init];
        vc1.view.backgroundColor=[UIColor redColor];
      
        
        UIViewController * vc2=[[UIViewController alloc] init];
        vc2.view.backgroundColor=[UIColor greenColor];
        
        
        UIViewController * vc3=[[UIViewController alloc] init];
        vc3.view.backgroundColor=[UIColor yellowColor];
        
        UIViewController * vc4=[[UIViewController alloc] init];
        vc4.view.backgroundColor=[UIColor orangeColor];
        
        UIViewController * vc5=[[UIViewController alloc] init];
        vc5.view.backgroundColor=[UIColor purpleColor];
       
        
        //为tabbarController添加控制器
        UITabBarController * tabVC=[[UITabBarController alloc] init];
        tabVC.delegate=self;
        tabVC.viewControllers=@[vc1,vc2,vc3,vc4,vc5 ];
        
        
        //初始化系统UITabBarItem
        UITabBarItem * item1=[[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemFavorites tag:101];
        vc1.tabBarItem=item1;
        
        UITabBarItem * item2=[[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemBookmarks tag:102];
        vc2.tabBarItem=item2;
      
        //初始化带图片的UITabBarItem
        UIImage * selImage=[UIImage imageNamed:@"tabbar_cate_f"];
        selImage=[selImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        UITabBarItem * item3=[[UITabBarItem alloc] initWithTitle:@"最近" image:[UIImage imageNamed:@"tabbar_cate"] selectedImage:selImage];
        NSDictionary * dic=@{NSFontAttributeName:[UIFont systemFontOfSize:20],NSForegroundColorAttributeName:[UIColor redColor]};
        [item3 setTitleTextAttributes:dic forState:UIControlStateSelected];
        vc3.tabBarItem=item3;
    
        
        //初始化带图片的UITabBarItem
        UITabBarItem * item4=[[UITabBarItem alloc] initWithTitle:@"你好" image:[UIImage imageNamed:@"tabbar_fov"] tag:104];
        vc4.tabBarItem=item4;
     
        
        UITabBarItem * item5=[[UITabBarItem alloc] initWithTabBarSystemItem:UITabBarSystemItemSearch tag:105];
        vc5.tabBarItem=item5;
       
        //将TabBarController设置为窗口的根控制器
    self.window.rootViewController=tabVC;

    2.UITabBar自己有一些方法是可以改变自身状态,但是对于UITabBarController自带的tabBar还是不能满足需求的,因此们需要用到自定义

      思路如下: 我们需要自定义一个tabbar,这里我们用UIView来替代,同时我们需要在tabbar上面来增加Item,从而达到点击控制视图控制器的目的。Item涉及到点击事件因此我们可以考虑用Button来完成,同时在button上面添加图标和标题。

      1 我们自定义类JRTabBarController.h

      2 分别实现三个方法

    代码如下

    #pragma mark - loadVC
    - (void) _loadVC{
        
        self.tabBar.hidden=YES;
        
        //1 创建视图控制器
        JRViewController * vc1=[[JRViewController alloc] init];
        
        
        UIViewController * vc2=[[UIViewController alloc] init];
        vc2.view.backgroundColor=[UIColor greenColor];
        
        UIViewController * vc3=[[UIViewController alloc] init];
        vc3.view.backgroundColor=[UIColor yellowColor];
        
        UIViewController * vc4=[[UIViewController alloc] init];
        vc4.view.backgroundColor=[UIColor blueColor];
        
     
        self.viewControllers=@[vc1,vc2,vc3,vc4];
        
    
    }
    
    #pragma mark - _makeTabBar
    - (void)_makeTabBar{
        
        //1 >定制tabbar
        UIView * bgview=[[UIView alloc] initWithFrame:CGRectMake(0, kHeight-49, kWidth, 49)];
        bgview.backgroundColor=[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5];
        [self.view addSubview:bgview];
        
        //2 >定制btn
        CGFloat space=(kWidth-2*kLeftSpace-5*kBtSize)/4.0+kBtSize;
        
        for(int i=0;i<5;i++){
            
            NSDictionary * dic=_array[i];
            //1 初始化button大小
            JRButton * button= [[JRButton alloc] initWithFrame:CGRectMake(kLeftSpace+i*space, 49/2.0-kBtSize/2.0, kBtSize, kBtSize)];
            
            //2 初始化button的标题和图片
            [button initButtonWithTitle:dic[@"title"] andImage:dic[@"image"]];
            
            //3 为button 设置tag 和代理
            button.tag=i;
            button.delegate=self;
            [bgview addSubview:button];
            
            //4 将button 加入到数组,来调整选中背景的位置
            [_btArray addObject:button];
            
    
            
        }
        
        //3 >增加选中图标
        _selectView=[[UIImageView alloc] initWithFrame:CGRectMake(10, 49/2.0-(kBtSize+2)/2.0, kBtSize+4, kBtSize+4)];
        UIButton * button=_btArray[0];
        _selectView.center=button.center;
        _selectView.image=[UIImage imageNamed:@"bg"];
        [bgview addSubview:_selectView];
        [bgview sendSubviewToBack:_selectView];
        
    
    }
    
    #pragma mark - 加载数据
    - (void) _loadData{
        
        _btArray=[NSMutableArray array];
        
        NSDictionary * dic1=@{@"title":@"电影",@"image":[UIImage imageNamed:@"movie_cinema"]};
        NSDictionary * dic2=@{@"title":@"新闻",@"image":[UIImage imageNamed:@"msg_new"]};
        NSDictionary * dic3=@{@"title":@"top",@"image":[UIImage imageNamed:@"star_top250"]};
        NSDictionary * dic4=@{@"title":@"影院",@"image":[UIImage imageNamed:@"icon_cinema"]};
        NSDictionary * dic5=@{@"title":@"更多",@"image":[UIImage imageNamed:@"more_select_setting"]};
        
        _array=@[dic1,dic2,dic3,dic4,dic5];
        
    }

      2、这里还有一个需要完成的功能就是点击事件,当每个Item被点击的时候我们需要进行视图控制器的切换,在切换视图控制器的同时我们还需要控制黑色背景小图片的移动,下面我们来实现这个方法

    #pragma mark - ButtonDelegate
    - (void)changePage:(NSInteger)index{
        
        //1 改变选中图片
        UIButton * button=_btArray[index];
        [UIView beginAnimations:nil context:nil];
        _selectView.center=button.center;
        [UIView commitAnimations];
        
        //2 切换视图控制器
        self.selectedIndex=index; 
    }

    3 、Item的定义,这里我们自定义一个button用来自定义Item,分别在button上面增加图片和标题来达到我们的效果,同时,通过代理实现控件的控制,代码如下:

    /**
     *  初始化图片和标题
     *
     *  @param title 标题
     *  @param image 图片
     */
    - (void) initButtonWithTitle:(NSString *) title andImage:(UIImage *) image{
    
        if(self) {
           //1> 添加Image
            UIImageView * imageView=[[UIImageView alloc] initWithFrame:CGRectMake(self.frame.size.width/2.0-kImageSize/2.0, 2, kImageSize, kImageSize)];
            imageView.contentMode=UIViewContentModeScaleAspectFit;
            imageView.image=image;
            [self addSubview:imageView];
            
           //2> 添加title
            UILabel * label=[[UILabel alloc] initWithFrame:CGRectMake(0, kImageSize, self.frame.size.width, self.frame.size.height-kImageSize)];
            label.text=title;
            label.textColor=[UIColor whiteColor];
            label.textAlignment=NSTextAlignmentCenter;
            label.font=[UIFont boldSystemFontOfSize:13];
            [self addSubview:label];
            [self addTarget:self action:@selector(showClick) forControlEvents:UIControlEventTouchUpInside];
        
        }
        
    }
    作者:杰瑞教育
    出处:http://www.cnblogs.com/jerehedu/ 
    版权声明:本文版权归烟台杰瑞教育科技有限公司和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
    技术咨询:JRedu技术交流
     
  • 相关阅读:
    移动网页如何只调出数字键盘
    把HTML5网页封装成APP,APK的方法
    HTML5,微信开发原码社区
    display:table 水平居中
    input在苹果浏览器下变成圆角的解决方案
    四种方法解决DIV高度自适应问题
    jquery prop和attr的区别
    移动端网页JS框架-手机触摸事件框架,日历框架带滑动效果
    meta viewport标签的使用说明(手机浏览缩放控制)
    javascript json格式解析方法
  • 原文地址:https://www.cnblogs.com/jerehedu/p/4884377.html
Copyright © 2020-2023  润新知