自定义TabBar(二)完全自定义TabBar样式

简介

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

Simulator Screen Shot 2017年8月14日 上午11.41.48.png

1. 先继承UIView搭建tabBar的样式，封装view没什么难点，这里直接上代码了

.h文件

#import <UIKit/UIKit.h>

@protocol CJTabBarViewDelegate <NSObject>
// 返回点击index
- (void)selectIndex:(NSInteger)index;
// 点击center
- (void)selectCenter;

@end

@interface CJTabBarView : UIView

@property (nonatomic, assign) id <CJTabBarViewDelegate> delegate;

@end

.m文件

#import "CJTabBarView.h"

@implementation CJTabBarView
{
    NSInteger saveIndex;// 保存上次点击的index
}
#pragma mark 初始化
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        saveIndex = 100;
        [self createView];
    }
    return self;
}

#pragma mark 创建视图
- (void)createView
{
    NSArray *titleArr = @[@"首页", @"发现", @"收藏", @"设置"];
    NSArray *imageArr = @[@"wxb主页", @"iconfont-yiqiyibiao", @"iconfont-xingxing", @"iconfont-jixieqimo"];
    NSArray *selectImageArr = @[@"wxb主页-2", @"iconfont-yiqiyibiao-2", @"iconfont-xingxing-2", @"iconfont-jixieqimo-2"];
    // 设置item大小 根据项目具体情况修改
    CGFloat centerW = 80;
    CGFloat centerH = 60;
    CGFloat itemW = ([UIScreen mainScreen].bounds.size.width-80)/4.0;
    CGFloat itemH = 35;
    // 循环创建4个item
    for (int i = 0; i < imageArr.count; i++) {
        UIButton *item = [UIButton buttonWithType:UIButtonTypeCustom];
        item.frame = CGRectMake(itemW * i + centerW * (i/2), 0, itemW, itemH);
        // 对，主页的图片还是那个灰的，不懂的童鞋去看（一），反正没有影响
        [item setImage:[UIImage imageNamed:imageArr[i]] forState:UIControlStateNormal];
        [item setImage:[UIImage imageNamed:selectImageArr[i]] forState:UIControlStateSelected];
        [self addSubview:item];
        item.tag = 100+i;
        [item addTarget:self action:@selector(itemClick:) forControlEvents:UIControlEventTouchDown];
        
        UILabel *itemLabel = [[UILabel alloc] initWithFrame:CGRectMake(itemW * i + centerW * (i/2), itemH, itemW, 14)];
        itemLabel.text = titleArr[i];
        [self addSubview:itemLabel];
        itemLabel.font = [UIFont systemFontOfSize:10];
        itemLabel.textColor = [UIColor blackColor];
        itemLabel.tag = 200+i;
        itemLabel.textAlignment = NSTextAlignmentCenter;
        
        if (i == 0) {
            [self itemClick:item];
        }
    }
    // 创建center
    UIButton *center = [UIButton buttonWithType:UIButtonTypeCustom];
    center.frame = CGRectMake(itemW*2, 49-centerH, centerW, centerH);
    [center setImage:[UIImage imageNamed:@"08"] forState:UIControlStateHighlighted];
    [center setImage:[UIImage imageNamed:@"08"] forState:UIControlStateNormal];
    [self addSubview:center];
    [center addTarget:self action:@selector(centerClick:) forControlEvents:UIControlEventTouchDown];
}
#pragma mark item点击事件
- (void)itemClick:(UIButton *)btn
{
    // 将之前点击的item恢复原样
    UIButton *tempB = [self viewWithTag:saveIndex];
    tempB.selected = NO;
    tempB.userInteractionEnabled = YES;
    
    UILabel *tempL = [self viewWithTag:saveIndex+100];
    tempL.textColor = [UIColor blackColor];
    
    // 将点击的item变成选中状态
    saveIndex = btn.tag;
    btn.selected = YES;
    btn.userInteractionEnabled = NO;
    
    UILabel *tempL1 = [self viewWithTag:saveIndex+100];
    tempL1.textColor = [UIColor colorWithRed:32/255.0 green:151/255.0 blue:217/255.0 alpha:1];
    
    if ([self.delegate respondsToSelector:@selector(selectIndex:)]) {
        [self.delegate selectIndex:btn.tag - 100];
    }
}
#pragma mark center点击事件
- (void)centerClick:(UIButton *)btn
{
    if ([self.delegate respondsToSelector:@selector(selectCenter)]) {
        [self.delegate selectCenter];
    }
}

@end

2. 继承UITabBar创建CJCustomTabBar 并在.h声明CJTabBarView属性

#import <UIKit/UIKit.h>
#import "CJTabBarView.h"

@interface CJCustomTabBar : UITabBar

@property (nonatomic, strong) CJTabBarView *tabBarView;

@end

3. 在.m中创建自定义tabBar

#pragma mark 初始化
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self addSubview:self.tabBarView];
    }
    return self;
}
#pragma mark layout
- (void)layoutSubviews
{
    [super layoutSubviews];
    // 设置tabBarView的frame
    self.tabBarView.frame = self.bounds;
    // 把tabBarView带到最前面，覆盖tabBar的内容
    [self bringSubviewToFront:self.tabBarView];
}

#pragma mark - getter
- (CJTabBarView *)tabBarView
{
    if (_tabBarView == nil) {
        _tabBarView = [[CJTabBarView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, 49)];
    }
    return _tabBarView;
}

// 重写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.tabBarView.subviews) {
        // 把这个坐标从tabbar的坐标系转为subview的坐标系
        CGPoint subPoint = [subview convertPoint:point fromView:self];
        result = [subview hitTest:subPoint withEvent:event];
        // 如果事件发生在subView里就返回
        if (result) {
            return result;
        }
    }
    return nil;
}

4.创建CJTabBarController 继承UITabBarController

.m文件

- (void)viewDidLoad {
    [super viewDidLoad];
    // 利用 KVC 来使用自定义的tabBar；
    CJCustomTabBar *tabBar = [[CJCustomTabBar alloc] init];
    [self setValue:tabBar forKey:@"tabBar"];
    tabBar.tabBarView.delegate = self;
    [self createControllers];
}
#pragma mark 创建controller
- (void)createControllers
{
    NSArray *titleArr = @[@"首页", @"发现", @"收藏", @"设置"];

    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];
        // 添加
        [self addChildViewController:nav];
    }
}

#pragma mark CJTabBarView delegate
- (void)selectIndex:(NSInteger)index
{
    self.selectedIndex = index;
    NSLog(@"%ld", index);
}
- (void)selectCenter
{
    NSLog(@"center");
}

这样样式自定义tabBar就完成了。由于部分方法、思路和（一）里相同，这里就没做过多解释。

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