UITabBarController自定义

应新项目需求，标签栏中间的按钮要自定义，老板还必须要原生的效果，毛玻璃之类的，所以之前封装过的都用不上了，重新弄一个。
换了一家新公司，之前都比较忙，项目节点，为了让老板觉得我比较忙，给自己找点事干~~~

上张图看效果

 
 
 
 
 

1、原理

• 思路就是tabbar上 四个tabbarItem 和中间一个button。
• 修改四个tabbarItem的位置，空出中间button的位置。
• 如果中心的button是像图中突出来的，超出tabbar的部分可能没有点击效果，所以还要重写一下hitTest: withEvent:方法。

2、上代码

2.1 New File... 一个UITabBar的继承类。添加实例方法

.h

#import 
#define RGB_S(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]
@interface Tabbar : UITabBar
@property (strong, nonatomic) UIButton *centerButton;

- (instancetype)initWithCenterImage:(NSString *)centerImage selectImage:(NSString *)selectImage target:(id)target action:(SEL)action;

.m

- (instancetype)initWithCenterImage:(NSString *)centerImage selectImage:(NSString *)selectImage target:(id)target action:(SEL)action {
    if (self = [super init]) {
        self.userInteractionEnabled = YES;
        self.tintColor = RGB_S(0x0FB5BA);
        self.translucent = YES;
        [self.centerButton setBackgroundImage:[UIImage imageNamed:centerImage] forState:UIControlStateNormal];
        [self.centerButton setBackgroundImage:[UIImage imageNamed:selectImage] forState:UIControlStateHighlighted];
        [self.centerButton setBackgroundImage:[UIImage imageNamed:selectImage] forState:UIControlStateSelected];
        [self.centerButton addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:self.centerButton];
    }
    return self;
}

layoutSubviews

- (void)layoutSubviews {
    [super layoutSubviews];
    
    CGFloat centerW = self.centerButton.currentBackgroundImage.size.width;
    CGFloat centerH = self.centerButton.currentBackgroundImage.size.height;
    
    self.centerButton.frame = CGRectMake((self.frame.size.width-centerW)/2, -14, centerW, centerH);
    CGFloat itemW  = self.frame.size.width / 5;
    CGFloat itemIndex = 0;
    // 计算每个item位置
    for (UIView *child in self.subviews) {
        Class class = NSClassFromString(@"UITabBarButton");
        if ([child isKindOfClass:class]) {
            child.frame = CGRectMake(itemIndex *itemW, child.frame.origin.y, itemW, child.frame.size.height);
            itemIndex ++;
            if (itemIndex == 2) {
                itemIndex ++;
            }
        }
    }
}

重写hitTest

#pragma mark - 重写hitTest方法
// TODO: 如果不重写此方法，centerButton超出tabbar的部分点击无效
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
   // 1. isHidden==NO 表示当前在tabbar页面
    if (self.isHidden == NO) {
        // 1.1 获取触摸点坐标系转化到centerButton上的CGPoint
        CGPoint newPoint = [self convertPoint:point toView:self.centerButton];
        // 1.2 判断point是否在centerButton上，如果在，centerButton来处理点击事件
        if ( [self.centerButton pointInside:newPoint withEvent:event]) {
            return self.centerButton;
        }
        // 1.3 如不在，系统自行处理
        else{
            return [super hitTest:point withEvent:event];
        }
    }
    // 2. 不在tabbar页面，系统自行处理点击事件
    else {
        return [super hitTest:point withEvent:event];
    }
}


- (UIButton *)centerButton {
    if (_centerButton == nil) {
        _centerButton = [UIButton buttonWithType:UIButtonTypeCustom];
    }
    return _centerButton;
}

重点在重写hisTest 和修改item位置, 代码都在这了。

2.2 New File... 一个 UITabBarController的继承类

这里就看个人习惯了，怎么简单怎么敲吧，只是多了一个Button的点击事件

.m

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 首页
    HomeViewController *homeVC = [[HomeViewController alloc]init];
    [self setViewController:homeVC title:@"首页" image:@"TB_home_normal" selectImage:@"TB_home_press"];
    // 功能
    FunctionViewController *funcVC = [[FunctionViewController alloc]init];
    [self setViewController:funcVC title:@"功能" image:@"TB_function_normal" selectImage:@"TB_function_press"];
    // 社区
    CommunityViewController *commVC = [[CommunityViewController alloc]init];
    [self setViewController:commVC title:@"社区" image:@"TB_community_normal" selectImage:@"TB_community_press"];
    // 我的
    MineViewController *mineVC = [[MineViewController alloc]init];
    [self setViewController:mineVC title:@"我的" image:@"TB_mine_normal" selectImage:@"TB_mine_press"];

    self.customTabbar = [[Tabbar alloc]initWithCenterImage:@"homePage_saoyisao" selectImage:@"homePage_saoyisao" target:self action:@selector(CenterButtonClick)];
    [self setValue:self.customTabbar forKey:@"tabBar"];
}

- (void)CenterButtonClick {
    CenterViewController *centerVC = [[CenterViewController alloc]init];
    [self presentViewController:centerVC animated:YES completion:nil];
}

自定义添加控制器方法

#pragma mark - 添加子控制器
-(void)setViewController:(UIViewController *)viewController title:(NSString *)title image:(NSString *)image selectImage:(NSString *)selectImage {
    static NSInteger index = 0;
    viewController.tabBarItem.title = title;
    viewController.title = title;
    viewController.tabBarItem.image = [[UIImage imageNamed:image] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    viewController.tabBarItem.selectedImage = [[UIImage imageNamed:selectImage] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    viewController.tabBarItem.tag = index;
    index++;
    UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:viewController];
    [self addChildViewController:nav];
}

使用原生tabbar的好处一是视觉效果：半透明毛玻璃效果还是很高大上的（捂脸），还有转场效果，自己做还是挺浪费时间的。
二则是适配 iPhone X 省力很多，自定义的要适配好tabbar的高度，原生的根本不用你管。
代码不多，在网上找了几个demo，这个是整理出来的代码比较少，效果比较好的，不足请指正（再次捂脸）。

Demo地址