【Objective-c】 自定制 tabBar

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容