iOS-带大按钮的UITabBar

IMG_0081.PNG

如上图是本文将要实现的界面。

没有文字带大按钮的tabbar。

创建一个UITabBarController

#import "ICETabBarController.h"
#import "ICETabbar.h"

@interface ICETabBarController ()

@end

@implementation ICETabBarController

- (void)viewDidLoad {
    [super viewDidLoad];
    UIViewController *vc1 = [[UIViewController alloc]init];
    vc1.view.backgroundColor = [UIColor orangeColor];
    UIViewController *vc2 = [[UIViewController alloc]init];
    vc2.view.backgroundColor = [UIColor whiteColor];
    
    [self loadDefaultData:vc1 image:@"btn_index_home_selected"];
    [self loadDefaultData:vc2 image:@"btn_index_wd_selected"];
    
    //利用kvc将系统的tabbar替换成ICETabbar
    ICETabbar *tabbar = [[ICETabbar alloc]init];
    [self setValue:tabbar forKey:@"tabBar"];
    
    [tabbar setBtnClickBlock:^{
        NSLog(@"click Center");
    }];
}


/**
 加载vc和图片

 @param vc vc
 @param img img
 */
- (void)loadDefaultData:(UIViewController *)vc image:(NSString *)img {
    UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:vc];
    [self addChildViewController:nav];
    
    vc.tabBarItem.image                   = [UIImage imageNamed:img];
    vc.tabBarItem.imageInsets             = UIEdgeInsetsMake(4.5, 0, -4.5, 0);
    
    //UIOffsetMake(CGFloat horizontal, CGFloat vertical)
    //将verical设置为MAXFLOAT的时候没有title
    vc.tabBarItem.titlePositionAdjustment = UIOffsetMake(0, MAXFLOAT);
}

@end

#import <UIKit/UIKit.h>
typedef void(^ICETabBarClickBlock)();

@interface ICETabbar : UITabBar

- (void)setBtnClickBlock:(ICETabBarClickBlock)block;

@end


#import "ICETabbar.h"
#import "UIView+HKExtension.h"

@interface ICETabbar ()

@property (nonatomic, strong) UIButton *centerBtn;
@property (nonatomic, copy  ) ICETabBarClickBlock block;

@end
@implementation ICETabbar

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor blueColor];
        [self setBackgroundImage:[UIImage new]];
        [self setShadowImage:[UIImage new]];
        
        self.centerBtn = [[UIButton alloc]init];
        [self.centerBtn setBackgroundImage:[UIImage imageNamed:@"tab_launch"]
                                  forState:UIControlStateNormal];
        [self.centerBtn setBackgroundImage:[UIImage imageNamed:@"tab_launch"]
                                  forState:UIControlStateHighlighted];
        self.centerBtn.size = self.centerBtn.currentBackgroundImage.size;
        [self.centerBtn addTarget:self action:@selector(centerBtnDidClick) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:self.centerBtn];
    }
    return self;
}

- (void)centerBtnDidClick {
    if (self.block) {
        self.block();
    }
}
- (void)setBtnClickBlock:(ICETabBarClickBlock)block {
    self.block = block;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    //系统自带的按钮类型是UITabBarButton，找出这些类型的按钮，然后重新排布位置，空出中间的位置
    Class class = NSClassFromString(@"UITabBarButton");
    
    self.centerBtn.centerX = self.centerX;
    //调整中间按钮的中线点Y值
    self.centerBtn.centerY = (self.height - (self.centerBtn.height - self.height)) * 0.5;
    
    NSInteger btnIndex = 0;
    for (UIView *btn in self.subviews) {//遍历tabbar的子控件
        if ([btn isKindOfClass:class]) {//如果是系统的UITabBarButton，那么就调整子控件位置，空出中间位置
            //按钮宽度为TabBar宽度减去中间按钮宽度的一半
            btn.width = (self.width - self.centerBtn.width) * 0.5;
            //中间按钮前的宽度,这里就3个按钮，中间按钮Index为1
            if (btnIndex < 1) {
                btn.x = btn.width * btnIndex;
            } else { //中间按钮后的宽度
                btn.x = btn.width * btnIndex + self.centerBtn.width;
            }
            
            btnIndex++;
            //如果是索引是0(从0开始的)，直接让索引++，目的就是让消息按钮的位置向右移动，空出来中间按钮的位置
            if (btnIndex == 0) {
                btnIndex++;
            }
        }
    }
    [self bringSubviewToFront:self.centerBtn];
}


/**
 重写hitTest方法，去监听中间按钮的点击，目的是为了让凸出的部分点击也有反应

 @param point 点击point
 @param event 事件
 @return view
 */
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    
    //判断当前手指是否点击到中间按钮上，如果是，则响应按钮点击，其他则系统处理
    //首先判断当前View是否被隐藏了，隐藏了就不需要处理了
    if (self.isHidden == NO) {
        
        //将当前tabbar的触摸点转换坐标系，转换到中间按钮的身上，生成一个新的点
        CGPoint newP = [self convertPoint:point toView:self.centerBtn];
        
        //判断如果这个新的点是在中间按钮身上，那么处理点击事件最合适的view就是中间按钮
        if ( [self.centerBtn pointInside:newP withEvent:event]) {
            return self.centerBtn;
        }
    }
    
    return [super hitTest:point withEvent:event];
}

Category

#import <UIKit/UIKit.h>

@interface UIView (HKExtension)

@property (nonatomic, assign) CGFloat x;
@property (nonatomic, assign) CGFloat y;
@property (nonatomic, assign) CGFloat width;
@property (nonatomic, assign) CGFloat height;
@property (nonatomic, assign) CGFloat centerX;
@property (nonatomic, assign) CGFloat centerY;
@property (nonatomic, assign) CGSize size;

@end

#import "UIView+HKExtension.h"

@implementation UIView (HKExtension)

- (void)setX:(CGFloat)x {
    CGRect frame = self.frame;
    frame.origin.x = x;
    self.frame = frame;
}

- (CGFloat)x {
    return self.frame.origin.x;
}

- (void)setY:(CGFloat)y {
    CGRect frame = self.frame;
    frame.origin.y = y;
    self.frame = frame;
}

- (CGFloat)y {
    return self.frame.origin.y;
}

- (void)setWidth:(CGFloat)width {
    CGRect frame = self.frame;
    frame.size.width = width;
    self.frame = frame;
}

- (CGFloat)width {
    return self.frame.size.width;
}

- (void)setHeight:(CGFloat)height {
    CGRect frame = self.frame;
    frame.size.height = height;
    self.frame= frame;
}

- (CGFloat)height {
    return self.frame.size.height;
}

- (void)setSize:(CGSize)size {
    CGRect frame = self.frame;
    frame.size = size;
    self.frame = frame;
}

- (CGSize)size {
    return self.frame.size;
}

- (void)setCenterX:(CGFloat)centerX {
    CGPoint center = self.center;
    center.x = centerX;
    self.center = center;
}

- (CGFloat)centerX {
    return self.center.x;
}

- (void)setCenterY:(CGFloat)centerY {
    CGPoint center = self.center;
    center.y = centerY;
    self.center = center;
}

- (CGFloat)centerY {
    return self.center.y;
}

• 利用kvc替换系统自带tabbar
  [self setValue:tabbar forKey:@"tabBar"];

• ICETabbar 大的点击按钮超出tabbar范围重写- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event ; 方法，使超出范围可以点击。