自定义TabBar(在tabBar中有一个弧形的凸起)

96
JSOfJackChen
2016.11.16 00:35* 字数 691

1、自定义TabBar的效果图

自定义TabBar.gif

2、对于tabBar的自定义实现步骤

1、在tabBar中只可以布局5个tabBarItem,如果超过5个那么超过的item会在tabBar上显示三个点(省略号…)。tabBar中的item都会对应一个控制器,点击item那么就会显示对应的控制器。tabBarItem会按照添加的先后顺序从左向右依次排布,item的大小会按照item的数量来均分tabBar,每一个item会占据自己对应的居中的位置。
2、自定义tabbar就需要自定义一个TabBar类来继承UITabBar,实现自定义的功能。首先需要重新布局tabBarItem的位置,重新计算每一个item的宽度。在中间的item有一个凸起,需要自定义button来替换tabBarItem。item的下标索引是从0开始的,当索引为2时(自定义button的凸起按钮)就跳过。来给剩下的item计算x坐标。
3、在tabBar中超出的部分默认是不可以响应触摸事件的。所以就需要重写- (UIView *)hitTestCGPoint)point withEventUIEvent *)event 方法来实现点击超出部分能够响应触摸事件。
4、触摸事件的传递是从父控件传递到子控件如果父控件不能接收触摸事件,那么子控件就不可能接收到触摸事件不能接受触摸事件的四种情况不接收用户交互,即:userInteractionEnabled = NO隐藏,即:hidden = YES
透明,即:alpha <= 0.01未启用,即:enabled = NO提示:UIImageView 的 userInteractionEnabled 默认就是 NO,因此 UIImageView 以及它的子控件默认是不能接收触摸事件的如何找到最合适处理事件的控件:
首先,判断自己能否接收触摸事件可以通过重写 hitTest:withEvent:方法验证其次,判断触摸点是否在自己身上
对应方法 pointInside:withEvent:从后往前(先遍历最后添加的子控件)遍历子控件,重复前面的两个步骤如果没有符合条件的子控件,那么就自己处理

3、重要的核心代码

重新对tabBar中的子视图进行布局

-(void)layoutSubviews{

    [super layoutSubviews];
    
    self.plusBtn.centerX = self.width *0.5;
    //调整发布按钮的中线点Y值
    self.plusBtn.centerY = self.height * 0.5 - 2*CLMargin  ;
    self.label.centerX = self.plusBtn.centerX;
    self.label.centerY = CGRectGetMaxY(self.plusBtn.frame) + CLMargin ;
    //  CLMargin 是一个宏 等于 10pt
    //系统自带的按钮类型是UITabBarButton,找出这些类型的按钮,然后重新排布位置,空出中间的位置
    Class class = NSClassFromString(@"UITabBarButton");

    int btnIndex = 0;
    for (UIView *btn in self.subviews) {//遍历tabbar的子控件
        if ([btn isKindOfClass:class]) {//如果是系统的UITabBarButton,那么就调整子控件位置,空出中间位置
            //每一个按钮的宽度==tabbar的五分之一
            btn.width = self.width / 5;
            
            btn.x = btn.width * btnIndex;
            
            btnIndex++;
            //如果是索引是2(从0开始的),直接让索引++,目的就是让消息按钮的位置向右移动,空出来发布按钮的位置
            if (btnIndex == 2) {
                btnIndex++;
            }      
        }
    }
}

重写- (UIView *)hitTestCGPoint)point withEventUIEvent *)event 来验证触摸点是否在自己身上,触摸自定义的按钮当触摸点超过tabBar时,需要把这个点的坐标系转换为以自定义button为参考系的点,来判断触摸点是否在自定义的button上。

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    
    //这一个判断是关键,不判断的话push到其他页面,点击发布按钮的位置也是会有反应的,这样就不好了
    //self.isHidden == NO 说明当前页面是有tabbar的,那么肯定是在导航控制器的根控制器页面
    //在导航控制器根控制器页面,那么我们就需要判断手指点击的位置是否在发布按钮身上
    //是的话让发布按钮自己处理点击事件,不是的话让系统去处理点击事件就可以了
    if (self.isHidden == NO) {
        
        //将当前tabbar的触摸点转换坐标系,转换到发布按钮的身上,生成一个新的点
        CGPoint newPoint = [self convertPoint:point toView:self.plusBtn];
        
        //判断如果这个新的点是在发布按钮身上,那么处理点击事件最合适的view就是发布按钮
        if ( [self.plusBtn pointInside:newPoint withEvent:event]) {
            return self.plusBtn;
        }else{
            //如果点不在发布按钮身上,直接让系统处理就可以了
            return [super hitTest:point withEvent:event];
        }
    }
    else {
        //tabbar隐藏了,那么说明已经push到其他的页面了,这个时候还是让系统去判断最合适的view处理就好了
        return [super hitTest:point withEvent:event];
    }
}

Demo下载地址
点击这里下载Demo

iOS笔记
Web note ad 1