UITabbar中间突出按钮

屏幕快照 2019-04-29 上午9.36.53.png

我们在写tabbar时,有时会出现如上图的要求,中间的item要突出来.
我们要想实现这个需求只需要自定义一个中间突出的item.其余的几个就可以完全使用系统创建就可以.
1.首先创建一个ApplyTabBar继承自UITabBar
ApplyTabBar.h

#import 

@class ApplyTabBar;

@protocol ApplyTabBarDelegate 
@optional
/** 点击按钮回调方法 */
- (void)tabBarPlusBtnClick:(ApplyTabBar *)tabBar;
@end


@interface ApplyTabBar : UITabBar

/** tabbar的协议方法 */
@property (nonatomic, weak) id myDelegate ;

@end

ApplyTabBar.m

#import "ApplyTabBar.h"

@interface ApplyTabBar ()

/** plus按钮 */
@property (nonatomic, weak) UIButton *plusBtn ;
@property UILabel *titleLabel;
@end

@implementation ApplyTabBar

- (instancetype)initWithFrame:(CGRect)frame{
    if (self=[super initWithFrame:frame]) {

        self.backgroundColor = [UIColor whiteColor];
        UIButton *plusBtn = [[UIButton alloc] init];
        [plusBtn setBackgroundImage:[UIImage imageNamed:@"applyImage"] forState:UIControlStateNormal];
        [plusBtn setBackgroundImage:[UIImage imageNamed:@"applyImage"] forState:UIControlStateHighlighted];

        self.plusBtn = plusBtn;
        [plusBtn addTarget:self action:@selector(plusBtnDidClick) forControlEvents:UIControlEventTouchUpInside];

        [self addSubview:plusBtn];

        self.titleLabel = [[UILabel alloc] init];
        self.titleLabel.text = @"申领";
        self.titleLabel.textAlignment = NSTextAlignmentCenter;
        self.titleLabel.font = [UIFont systemFontOfSize:11];
        [self.titleLabel sizeToFit];
        self.titleLabel.textColor = [UIColor grayColor];
        [self addSubview:self.titleLabel];
    }
    return self;
}

- (void)layoutSubviews{
    [super layoutSubviews];
    //系统自带的按钮类型是UITabBarButton，找出这些类型的按钮，然后重新排布位置，空出中间的位置

    Class class = NSClassFromString(@"UITabBarButton");
    int btnIndex = 0;
    CGFloat btnHeight = 0;
    for (UIView *btn in self.subviews) {//遍历tabbar的子控件
        if ([btn isKindOfClass:class]) {//如果是系统的UITabBarButton，那么就调整子控件位置，空出中间位置
            //每一个按钮的宽度==tabbar的五分之一(因为我这里一共五个item)
            btn.frame = CGRectMake(self.frame.size.width / 5 * btnIndex, btn.frame.origin.y, self.frame.size.width / 5, btn.frame.size.height);
            btnHeight = btn.frame.origin.y;
            btnIndex++;
            //如果是索引是2(从0开始的)，直接让索引++，目的就是让消息按钮的位置向右移动，空出来发布按钮的位置
            if (btnIndex == 2) {
                btnIndex++;
            }
        }
    }
    self.plusBtn.center = CGPointMake(self.center.x, self.plusBtn.center.y);
    //调整发布按钮的中线点Y值
    self.titleLabel.center = CGPointMake(self.plusBtn.center.x, btnHeight+ 47-self.titleLabel.frame.size.height/2);

    self.plusBtn.center = CGPointMake(self.plusBtn.center.x, 5);
    self.plusBtn.frame = CGRectMake(self.plusBtn.frame.origin.x, self.plusBtn.frame.origin.y, self.titleLabel.frame.origin.y*2-5, self.titleLabel.frame.origin.y*2-5);
    [self bringSubviewToFront:self.plusBtn];

}

//点击了发布按钮
- (void)plusBtnDidClick{
    //如果tabbar的代理实现了对应的代理方法，那么就调用代理的该方法
    if ([self.delegate respondsToSelector:@selector(tabBarPlusBtnClick:)]) {
        [self.myDelegate tabBarPlusBtnClick:self];
    }
}
@end

无论你使用storyboard还是代码设置tabbar 我们都需要自定义一个UITabBarController.用来关联storyboard中UITabBarController或者直接使用自定义UITabBarController来添加中间的突出item
这里一stroyboard为例
1.storyboard创建UITabBarController并添加四个item

屏幕快照 2019-04-29 上午10.15.30.png

2.关联自定义UITabBarController
3.在viewdidload方法中添加代码

ApplyTabBar *tabbar = [[ApplyTabBar alloc] init];
    tabbar.myDelegate = self;
    [self setValue:tabbar forKeyPath:@"tabBar"];

到这我们就可以运行程序中间的突出item就出来了
后来发现一个问题,当我们点击中间突出item超出tabbar高度的地方发现不会触发我们的点击方法.
在这我们需要在ApplyTabBar.m中重写- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event方法

//重写hitTest方法，去监听发布按钮的点击，目的是为了让凸出的部分点击也有反应
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {

    //我们只需要在tabbar未隐藏时重写当前方法
    if (self.isHidden == NO) {

        //将当前tabbar的触摸点转换坐标系，转换到发布按钮的身上，生成一个新的点
        CGPoint newP = [self convertPoint:point toView:self.plusBtn];

        //判断是否在添加按钮上
        if ( [self.plusBtn pointInside:newP withEvent:event]) {
            return self.plusBtn;
        }else{
            return [super hitTest:point withEvent:event];
        }
    }else {
        return [super hitTest:point withEvent:event];
    }
}