iOS 映客tabBar

先上效果图


iOS 映客tabBar_第1张图片
映客tabBar.gif
  • 1 注意利用通知控制中间按钮的点击事件
  • 2 利用KVC替换系统的tabBar
  • 3.遍历对系统的tabBar重新布局
  • 4.对超出tabBar范围的按钮点击事件进行处理

以下是相关代码:

//
//  GFTabBar.h
//  高仿映客
//
//  Created by 纪高飞 on 17/5/15.
//  Copyright © 2017年 纪高飞. All rights reserved.
//

#import 
 typedef void(^GFTabBarClick)();
@interface GFTabBar : UITabBar
- (void)btnClickBlock:(GFTabBarClick )Block;
@property (nonatomic,copy)void(^centerBlock)();
@end

//
//  GFTabBar.m
//  高仿映客
//
//  Created by 纪高飞 on 17/5/15.
//  Copyright © 2017年 纪高飞. All rights reserved.
//

#import "GFTabBar.h"
#import "UIView+GFExtension.h"

@interface GFTabBar ()
// 中间按钮
@property (nonatomic, strong) UIButton *centerBtn;
@property (nonatomic, copy) GFTabBarClick GFblock;
@end
@implementation GFTabBar
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
     
        // 加载子视图
        [self setUpChildrenViews];
    }
    return self;
}

// 创建子视图
- (void)setUpChildrenViews
{
       self.backgroundColor = [UIColor whiteColor];

   //去掉TabBar的分割线
  [self setBackgroundImage:[UIImage new]];
  [self setShadowImage:[UIImage new]];
    self.centerBtn = [[UIButton alloc] init];
    [_centerBtn setBackgroundImage:[UIImage imageNamed:@"tab_launch"] forState:UIControlStateNormal];
    [_centerBtn setBackgroundImage:[UIImage imageNamed:@"tab_launch"] forState:UIControlStateHighlighted];
  // 按钮和当前背景图片一样大
    _centerBtn.size = _centerBtn.currentBackgroundImage.size;
    [_centerBtn addTarget:self action:@selector(centerBtnAction:) forControlEvents:UIControlEventTouchUpInside];

  [self addSubview:_centerBtn];
    
}
- (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];
}


#pragma mark - 中间按钮点击事件
- (void)centerBtnAction:(UIButton *)sender
{
    NSLog(@"点击的是中间按钮");
    [[NSNotificationCenter defaultCenter] postNotificationName:@"centerAction" object:self userInfo:nil];
    if (self.GFblock) {
        self.GFblock();
    }
    if (self.centerBlock) {
        self.centerBlock();
    }
}
- (void)btnClickBlock:(GFTabBarClick )Block
{
    self.GFblock = Block;
}

//重写hitTest方法,去监听中间按钮的点击,目的是为了让凸出的部分点击也有反应
- (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];
}
@end

你可能感兴趣的:(iOS 映客tabBar)