自定义TabBar(一)修改系统TabBar样式

简介

由于项目中需要改变TabBar的样式，网上找了一些例子，发现这篇文章比较符合项目需求（先膜拜大神），所以按照大神的思路，自己写了一个自定义TabBar，完整dome GitHub地址，另外一种实现形式，我会在下篇文章更新。
效果图

Simulator Screen Shot 2017年8月11日 下午1.57.25.png

1.先继承UITabBar创建一个文件CJTabBar，然后声明一个中间按钮的button

@property (nonatomic, strong) UIButton *centerButton;

2.写初始化方法和centerButton getter方法以及点击事件

#pragma mark init
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self addSubview:self.centerButton];
    }
    return self;
}
#pragma mark getter
- (UIButton *)centerButton
{
    if (_centerButton == nil) {
        _centerButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 80, 60)];
        [_centerButton setImage:[UIImage imageNamed:@"08"] forState:UIControlStateNormal];
        [_centerButton addTarget:self action:@selector(centerAction:) forControlEvents:UIControlEventTouchUpInside];
    }
    return _centerButton;
}
#pragma mark centerButton click
- (void)centerAction:(UIButton *)btn
{
    NSLog(@"center");
}

3.重新布局系统TabBar

// 重新布局
- (void)layoutSubviews
{
    [super layoutSubviews];
    // 获取原有tabBarButton
    NSMutableArray *tabArr = [NSMutableArray array];
    for (UIView *temp in self.subviews) {
        if ([temp isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
            [tabArr addObject:temp];
        }
    }
    // 重新设置坐标
    CGFloat btnWidth = (self.frame.size.width-self.centerButton.frame.size.width)/4.0;
    CGFloat btnHeight = 48;
    
    for (int i = 0; i < tabArr.count; i++) {
        UIButton *temp = tabArr[i];
        temp.frame = CGRectMake(btnWidth*i+(i/2)*btnWidth, 1, btnWidth, btnHeight);
    }
    // 设置中间按钮高
    self.centerButton.center = CGPointMake(self.frame.size.width / 2, 48/2-6);
}

4. 重写hitTest方法，让超出tabBar部分也能响应事件

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    if (self.clipsToBounds || self.hidden || (self.alpha <= 0.01f)) {
        return nil;
    }
    UIView *result = [super hitTest:point withEvent:event];
    // 如果事件发生在tabbar里面直接返回
    if (result) {
        return result;
    }
    // 这里遍历那些超出的部分就可以了，不过这么写比较通用。
    for (UIView *subview in self.subviews) {
        // 把这个坐标从tabbar的坐标系转为subview的坐标系
        CGPoint subPoint = [subview convertPoint:point fromView:self];
        result = [subview hitTest:subPoint withEvent:event];
        // 如果事件发生在subView里就返回
        if (result) {
            return result;
        }
    }
    return nil;
}

5.创建一个继承UITabBarController的文件CJTabBarController，并创建controller

#pragma mark 创建controller
- (void)createControllers
{
    NSArray *titleArr = @[@"首页", @"发现", @"收藏", @"设置"];
    NSArray *imageArr = @[@"wxb主页", @"iconfont-yiqiyibiao", @"iconfont-xingxing", @"iconfont-jixieqimo"];
    NSArray *selectImageArr = @[@"wxb主页-2", @"iconfont-yiqiyibiao-2", @"iconfont-xingxing-2", @"iconfont-jixieqimo-2"];
    for (NSInteger i = 0; i < titleArr.count; i++) {
        // 对应controller
        UIViewController *VC = [[UIViewController alloc] init];
        VC.view.backgroundColor = [UIColor colorWithRed:255.0/3*i/255.0 green:255.0/3*i/255.0 blue:255.0/3*i/255.0 alpha:1];
        // 创建navigation
        UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:VC];
        // nav标题
        VC.navigationItem.title = titleArr[i];
        // tabBar标题
        nav.tabBarItem.title = titleArr[i];
        // 设置未选中图片（原谅我首页图片颜色和其他不一样，弄错了）
        nav.tabBarItem.image = [[UIImage imageNamed:imageArr[i]] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        // 设置选中图片
        nav.tabBarItem.selectedImage = [[UIImage imageNamed:selectImageArr[i]] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        // 添加
        [self addChildViewController:nav];
    }
}

6.替换系统tabBar

- (void)viewDidLoad {
    [super viewDidLoad];
    // 设置tabBar
    [self setValue:[CJTabBar new] forKey:@"tabBar"];
    
    [self createControllers];
}

7.在AppDelegate中设置根视图

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // 设置根视图
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.window.backgroundColor = [UIColor whiteColor];
    self.tabBarController = [CJTabBarController new];
    self.window.rootViewController = self.tabBarController;
    [self.window makeKeyAndVisible];

    return YES;
}

这样一个简单的tabBar就自定义完成了。

结语：限于水平，本文只写了一些基本用法和注意事项，如果文中存在错误请指出，我会及时修改。