【Objective-c】 自定制 tabBar

作者: MR_詹 | 来源:发表于2016-11-30 20:27 被阅读188次
    Paste_Image.png
    最新项目中,遇到定制标签的需求,类试于『闲鱼』,于是找网上找了几个Demo学习,发现实现的方法大概有两种

    1、创建一个UIView覆盖在原来的tabBar上方,在UIView中定义一个协议,并且通过这个协议方法回调来设置当前tabBar的index,从而实现视图的切换。当然这也能实现同样的效果,不过不推荐使用这种方法,毕竟这始终是一种土方法,后期添加功能不方便,例如添加红点。

    2、通过继承重写的方法,修改原生tabBar的布局,中间的『加号』是通过创建一个按钮,添加原生tabBar上的,并且通过协议方法回调加号按钮的点击事件。

    详细请看代码:
    tabBarViewController子类

    #import "MZTabBarViewController.h"
    #import "OneViewController.h"
    #import "TwoViewController.h"
    #import "ThreeViewController.h"
    #import "FoureViewController.h"
    #import "MZTabBar.h"
    #import "MZNavigationController.h"
    @interface MZTabBarViewController ()<MZTabBarDelegate>
    
    @end
    
    @implementation MZTabBarViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
    
        [self addViewController:[OneViewController new] title:@"闲鱼" ItemImage:[UIImage imageNamed:@"home_normal@2x.png"] ItemSelectedImage:[UIImage imageNamed:@"home_highlight@2x.png"]];
    
        [self addViewController:[OneViewController new] title:@"鱼塘" ItemImage:[UIImage imageNamed:@"fish_normal@2x.png"] ItemSelectedImage:[UIImage imageNamed:@"fish_highlight@2x.png"]];
    
        [self addViewController:[OneViewController new] title:@"消息" ItemImage:[UIImage imageNamed:@"message_normal@2x.png"] ItemSelectedImage:[UIImage imageNamed:@"message_highlight@2x.png"]];
    
        [self addViewController:[OneViewController new] title:@"我的" ItemImage:[UIImage imageNamed:@"account_normal@2x.png"]  ItemSelectedImage:[UIImage imageNamed:@"account_highlight@2x.png"]];
    
        MZTabBar *tabBar = [[MZTabBar alloc]init];
        tabBar.delegate = self;
        //重点:因为系统的tabBar的属性是只读的,所以只能通过KVC方式替换系统的tabBar
        //替换tabBar的目的:1、创建"发布按钮" 2、重新布局item的位置
        [self setValue:tabBar forKey:@"tabBar"];
    }
    
    - (void)addViewController:(UIViewController *)vc title:(NSString *)title ItemImage:(UIImage *)image ItemSelectedImage:(UIImage *)selectedImage{
        vc.title = title;
        vc.tabBarItem.image = image;
        //设置item选中图片,前提是要设置图片的模式『原图』展示
        vc.tabBarItem.selectedImage = [selectedImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    
        NSDictionary *dicNor = @{
                                 NSForegroundColorAttributeName:[UIColor colorWithRed:123/255.0 green:123/255.0  blue:123/255.0  alpha:1.0]
                                 };
    
        [vc.tabBarItem setTitleTextAttributes:dicNor forState:UIControlStateNormal];
    
        NSDictionary *dicSelected = @{
                                      NSForegroundColorAttributeName:[UIColor orangeColor]
                                      };
        [vc.tabBarItem setTitleTextAttributes:dicSelected forState:UIControlStateSelected];
    
        MZNavigationController *nac = [[MZNavigationController alloc]initWithRootViewController:vc];
        [self addChildViewController:nac];
    }
    
    #pragma mark - MZTabBar Delegate
    - (void)tabBarDidClickPlusButton:(MZTabBar *)tabBar{
        NSLog(@"中间加号按钮点击");
    }
    

    NavigationCtroller 子类

    #import "MZNavigationController.h"
    
    @interface MZNavigationController ()
    
    @end
    
    @implementation MZNavigationController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
    }
    
    + (void)initialize{
        UIBarButtonItem *barItem = [UIBarButtonItem appearance];
        //设置普通状态
        NSDictionary *dicNormal = @{NSForegroundColorAttributeName:[UIColor orangeColor],NSFontAttributeName:[UIFont systemFontOfSize:13]};
        [barItem setTitleTextAttributes:dicNormal forState:UIControlStateNormal];
        
        //设置不可用状态
        NSDictionary *dicDisabled = @{NSForegroundColorAttributeName:[UIColor colorWithRed:0.6 green:0.6 blue:0.6 alpha:0.7],NSFontAttributeName:[UIFont systemFontOfSize:13]};
        [barItem setTitleTextAttributes:dicDisabled forState:UIControlStateDisabled];
    
    }
    //重写这个方法,目的是拦截所有push进来的控制器
    - (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated{
        if (self.viewControllers.count>0) {
            //这是push进来的控制器不是第一个控制器
            viewController.hidesBottomBarWhenPushed = YES;
        }
        [super pushViewController:viewController animated:animated];
    }
    
    @end
    

    tabBar的子类

    #import <UIKit/UIKit.h>
    @class MZTabBar;
    
    @protocol MZTabBarDelegate<UITabBarDelegate>
    - (void)tabBarDidClickPlusButton:(MZTabBar *)tabBar;
    @end
    
    @interface MZTabBar : UITabBar
    @property (nonatomic,weak) id<MZTabBarDelegate>delegate;
    @end
    
    #import "MZTabBar.h"
    @interface MZTabBar()
    @property (nonatomic,strong) UIButton *plusBtn;
    @end
    @implementation MZTabBar
    
    - (instancetype)init{
        self = [super init];
        if (self) {
            UIButton *plusBtn = [[UIButton alloc]init];
            [plusBtn setBackgroundImage:[UIImage imageNamed:@"post_normal@2x.png"] forState:UIControlStateNormal];
            [plusBtn addTarget:self action:@selector(plusBtnClick:) forControlEvents:UIControlEventTouchUpInside];
            CGSize newSize = plusBtn.currentBackgroundImage.size;
            plusBtn.frame = CGRectMake(0, 0, newSize.width, newSize.height);
            [self addSubview:plusBtn];
            _plusBtn = plusBtn;
        }
        return self;
    }
    
    - (void)plusBtnClick:(UIButton *)sender{
        [self.delegate tabBarDidClickPlusButton:self];
    }
    
    - (void)layoutSubviews{
        [super layoutSubviews];
        
        CGFloat width = self.frame.size.width;
        CGFloat height = self.frame.size.height;
        //设置发布按钮的位置
        _plusBtn.center = CGPointMake(width/2, height/2-20);
        
        //遍历tabBar的所有控件,并重新布局,中间的位置空出来
        //系统自带的按钮类型是UITabBarButton
        Class class = NSClassFromString(@"UITabBarButton");
        int index = 0;
        for (UIView *btn in self.subviews) {
            if ([btn isKindOfClass:class]) {
                CGRect rect = btn.frame;
                rect.origin.x = width/5 * index;
                rect.size.width = width/5;
                btn.frame = rect;
                
                index++;
                //如果是中间位置,则直接跳过,空出来
                if (index == 2) {
                    index++;
                }
            }
            
        }
    }
    
    //重写hitTest方法,去监听发布按钮的点击,目的按时为了让凸出部分点击也有反应
    - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{
        /*
         这个判断是关键,不判断的话push到其他页面,点击发布按钮的位置也是会有反应的,这样就不好了
         self.isHidden == NO 说明当前页面是有tabBar的,那么肯定是再导航控制器的根控制器页面
         在导航控制器根控制器页面,那么我们就需要判断手指点击的位置是否再发布按钮身上
         是的话,让发布按钮自己处理点击事件,不是的话让系统去处理点击事件就可以了
         
         这里有一个理解的关键点:传动链是从下往上的,也就是从最底层开始往顶层遍历UIResporter的子类
         因为这个框架是UITabBar --  UINavigation -- ViewController -- view,所以Window首先
         是把UIEvent事件传递给UITabBar的,这时重写hitTest方法,拦截事件并返回plusBtn,系统就会继续调用
         plusBtn的hitTest方法遍历其所有的子类,确定事件的第一响应者。
         */
        if (self.isHidden == NO) {
            //将当前tabBar的触摸点转换坐标系,转换到发布按钮的身上,生成一个新的点
            CGPoint newPoint = [self convertPoint:point toView:self.plusBtn];
            //判断这个新的点是否在发布按钮身上,若是,那么处理点击事件的最合适的view就是发布按钮
            if ([self.plusBtn pointInside:newPoint withEvent:event]) {
                return self.plusBtn;
            }else{
                //如果不在发布按钮身上,直接让系统处理就好
                return [super hitTest:point withEvent:event];
            }
        }else{
            //tabBar隐藏了,那么说明已经push到其他的页面了,这个时候还是让系统去判断最合适的view处理就好了
            return [super hitTest:point withEvent:event];
        }
    
    }
    

    完整Demo20161130
    出自JSOfJackChen

    相关文章

      网友评论

        本文标题: 【Objective-c】 自定制 tabBar

        本文链接:https://www.haomeiwen.com/subject/fhbtmttx.html