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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,561评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,218评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,162评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,470评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,550评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,806评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,951评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,712评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,166评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,510评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,643评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,306评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,930评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,745评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,983评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,351评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,509评论 2 348

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,770评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,064评论 4 62
  • 一块黄土沟壑。荒草。干瘪的种子饥渴的老屋裂了唇久了诅咒残云憎恶每一处阳光(2017.7.9)
    君凉阅读 287评论 42 50
  • 当我的双眼印满你满目的悲伤时,我总以为时间的逝去,会让你忘却曾经遗留在内心深处的创伤。 当我的双眼印满你憔悴的面颊...
    hy七月阅读 351评论 0 0
  • 栋栋的高楼是把把矗立的剑 锋利无比 寒光慑人 我紧握命运的罗盘 步步为营 生活在驱赶 一介匹夫 驱使着悍勇 扬着梦...
    苏格拉风掠影阅读 345评论 5 18