美文网首页iosiOS开发小知识点
iOS-TabBar中间凸起点击完全有反应

iOS-TabBar中间凸起点击完全有反应

作者: 小小小阿博er | 来源:发表于2016-05-29 01:29 被阅读9855次
    • 先看下效果
    仿闲鱼.png
    • 为什么还要继续说这个内容呢?
    • 前一段微博上很火的tabbar封装大赛想必大家都知道吧,各位大神尽其所能
    • 自己正在仿写闲鱼,看了网上一些朋友写的关于tabbar中间按钮的处理,发现关于处理中间按钮的点击这块有点模糊
    • 个人估计是大家在写这一块的时候忽略了这个细节
      • 有的是中间按钮凸起的部分点击没有反应,按钮其他地方可以点击
      • 有的是中间凸起按钮可以完全点击了,但是没有做细节处理,导致push到其他页面,在和凸起按钮同样的位置还可以被点击,而且点击效果和点击凸起按钮效果是一样的
      • 还有的是虽然实现了功能,但是处理方法上并不是很完善
    因此决定熬夜写下这篇文章,帮助有需要的朋友看一下
    • 突然感觉没有什么可说的了,哈哈,主要是我代码里面已经写得非常详细了,而且文字多了效果也不好

    • 简单的说下大致结构和思路吧

    • tabbar的话也是遵循主流,自定义一个继承自系统UITabbar的LBTabbar,然后用KVC和系统的进行替换

    • 中间的凸起按钮和tabbar内部的子控件不是同一类型,是一个UIButton而已

    • 根据tabbar内部子控件的类型去调整内部子控件的位置,从而腾出一个中间位置给凸起按钮

    • 给tabbar弄一个代理,添加一个点击中间凸起按钮的代理方法,让LBTabBarController成为它的代理,实现对应代理方法即可实现按钮点击

    • 如果对以上步骤有不清楚的地方可以看代码或者随时咨询我哦,这篇文字主要讲的核心就是中间按钮点击
      1)要想监听整个发布按钮的点击,包括凸起部分点击也有反应,那么我是通过在自定义的LBTabbar内部重写- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)even方法来实现的
      2)我们都知道,凸起按钮是自定义的LBTabbar的子控件,默认情况下子控件尺寸如果超出父控件,那么超出的部分点击是没有反应的
      3)hitTest这个方法就是专门返回一个处理响应事件最合适view的,一般情况下我们不实现这个方法,默认就是让系统帮我们去判断处理事件响应最合适的view,一旦我们想要改变一下这种情况,我们就需要通过重写这个方法
      4)我们的需求是只要我们点击的point在凸起按钮的任何位置(无论是否超出tabbar)都可以有响应,那么我们首先需要判断这个point是否在凸起按钮自身上
      [self convertPoint:point toView:self.plusBtn]
      这句代码就是将当前tabbar的触摸点转换坐标系,转换到凸起按钮的身上,它会生成一个新的点,然后我们通过
      [self.plusBtn pointInside:newP withEvent:event]方法判断如果这个新的点是在发布按钮身上,那么处理点击事件最合适的view就是发布按钮,否则直接让系统帮我们处理点击事件就可以了
      5)对了,这里还有一步也是非常关键,因为我们重写了寻找最合适view的方法,那么我们还需要考虑什么情况下我们需要由我们自己选择最合适的view,什么情况下不需要,所以我们需要加一个判断if (self.isHidden == NO)
      这句代码代表了当前页面是有tabbar的,那么肯定是在导航控制器的根控制器页面,这个时候就需要由我们自己选择最合适的view,其他的push页面直接让系统选择
      6)如果不做第五步判断,bug就是由导航控制器的根控制器页面push到其他页面后,点击该页面和tabbar凸起按钮同样的位置也会有反应
      7)好了,该上关键代码了

    //重写hitTest方法,去监听发布按钮的点击,目的是为了让凸出的部分点击也有反应
    - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    
        //这一个判断是关键,不判断的话push到其他页面,点击发布按钮的位置也是会有反应的,这样就不好了
        //self.isHidden == NO 说明当前页面是有tabbar的,那么肯定是在导航控制器的根控制器页面
        //在导航控制器根控制器页面,那么我们就需要判断手指点击的位置是否在发布按钮身上
        //是的话让发布按钮自己处理点击事件,不是的话让系统去处理点击事件就可以了
        if (self.isHidden == NO) {
    
            //将当前tabbar的触摸点转换坐标系,转换到发布按钮的身上,生成一个新的点
            CGPoint newP = [self convertPoint:point toView:self.plusBtn];
    
            //判断如果这个新的点是在发布按钮身上,那么处理点击事件最合适的view就是发布按钮
            if ( [self.plusBtn pointInside:newP withEvent:event]) {
                return self.plusBtn;
            }else{//如果点不在发布按钮身上,直接让系统处理就可以了
              return [super hitTest:point withEvent:event];
         }
       } 
        else {//tabbar隐藏了,那么说明已经push到其他的页面了,这个时候还是让系统去判断最合适的view处理就好了
            return [super hitTest:point withEvent:event];
        }
    }
    
    下面是排布tabbar里面的子控件的
    - (void)layoutSubviews
    {
        [super layoutSubviews];
        //系统自带的按钮类型是UITabBarButton,找出这些类型的按钮,然后重新排布位置,空出中间的位置
        Class class = NSClassFromString(@"UITabBarButton");
    
        self.plusBtn.size = CGSizeMake(self.plusBtn.currentBackgroundImage.size.width, self.plusBtn.currentBackgroundImage.size.height);
    
        self.plusBtn.centerX = self.centerX;
        //调整发布按钮的中线点Y值
        self.plusBtn.centerY = self.height * 0.5 - 2*LBMagin ;
    
    
            UILabel *label = [[UILabel alloc] init];
            label.text = @"发布";
            label.font = [UIFont systemFontOfSize:11];
            [label sizeToFit];
            label.textColor = [UIColor grayColor];
            [self addSubview:label];
            label.centerX = self.plusBtn.centerX;
            label.centerY = CGRectGetMaxY(self.plusBtn.frame) + LBMagin ;
    
    
    
        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++;
                }
                
            }
        }
    }
    
    
    • OK,结束了,不足之处欢迎大家指正,共同学习
      代码地址
    后续准备写一篇关于事件响应和传递的文章,如果对于hitTest方法不是很熟悉的朋友可以后续看看,个人感觉这块也是面试常客,感谢支持

    相关文章

      网友评论

      • 倪灏:你好,hitTest 方法只会在父类没有响应方法的时候才会返回 nil,如果再父类中有视图响应了点击方法怎么办?比如:在 viewcontroller 中添加一个 TableView,这样点击中间的按钮,超出 Tabbar 的范围就会被 TableView 的响应方法响应,而不会触发 Tabbar 的 hitTest 方法,请问,这样能解吗?
      • 左岸凉面:大神您好,我下载您的demo,跑起来后发现中间的凸起错位了
      • e5d58011e5e7:ios 11 以下 中间的item是偏移很多的 怎么回事
      • 曹世鑫的杂谈:为什么我的hitTest方法不走?也是在继承view的tabbar里面写的
        曹世鑫的杂谈:就是在点击外面多出来的button的时候不触发方法。
      • 亲爱的大倩倩:iPhone6模拟器下运行有Bug,按钮点击顺序错乱,知道这个要如何解决吗
      • NeverMore奈文摩尔:点击发布 如果要push 怎么实现呢
      • ivylee_mr: //kvc实质是修改了系统的_tabBar
        [self setValue:tabbar forKeyPath:@"tabBar"];

        这个不是修改私有熟悉吗? 审批会不会不让过
      • 文刀三三:我们的需求是中间那个按钮点击效果和功能与其他的按钮相同,我是一开始就在tabbarcontroller添加了5个控制器,但是tabbar中间那个按钮的图片和文字我都设nil,然后把自己写的plus按钮盖在中间的按钮上面,代理方法里面直接[self setSelectedIndex:2];
        文刀三三:@西夏ci 我试了没有遇到这个问题啊,你要按照作者的来,不要自己加
        9648f522204f:大哥, 你直接加上去 会不会出现,二级界面跳转的时候,viewController.hidesBottomBarWhenPushed = YES; 这个已经隐藏,但是高出tabbar的部分,没有隐藏掉。我这头疼
        文刀三三:中间按钮文字和图片不能设置nil,不然点击的时候会导致和自己加的label重叠,
        解决办法就是,中间按钮文字正常填写,图片设置[UIImage imageWithColor:[UIColor clearColor]]
        不使用自定义label
      • Tomboy_Anan:中间按钮都已经偏了, 我用的模拟器 是 7p 和 7 . 还有6s, 都存在这个问题, 中间按钮没有向上突出,反而向下, 和向右偏了, 如果不能复现的话, 可加wx截图, yaoapp518
      • b95f0ca6ca78:每次看到这种知识分享,我反手就是一个赞,互相进步
      • 阿文灬:layoutSubviews中布局,self.plusBtn要先设置size,再设置center
        self.plusBtn.size = CGSizeMake(self.plusBtn.currentBackgroundImage.size.width, self.plusBtn.currentBackgroundImage.size.height);
        self.plusBtn.centerX = self.centerX;
        //调整发布按钮的中线点Y值
        self.plusBtn.centerY = self.height * 0.5 - 2*LBMagin ;
        帅气的大萝卜:点击发布按钮如何实现发布字体变色,点击其他按钮发布变回原来颜色
      • 4c62102c6578:i7p 刚开中间按钮是右歪了
      • 励志当学霸的皮皮:感谢,正好遇到因为没有判断self.isHidden而产生的bug
      • 管饱饱:我的大按钮。点击了不想跳转页面怎么办。或者叫还想现实tabbar怎么办呢。我试了,直接rootnav==那个想显示的。就没有反应,并不会切换页面,还是在之前选择的页面上
      • Xcode12306:d点击中间的按钮,presentViewController之后怎么让tabbar显示啊,求指教
        管饱饱:@Xcode12306 同问。。。
      • 我想说_:有bug 加号位置不对 怎么破
      • 建古:您好 我下载下来运行的时候··中间的按钮不在 中间··位置偏了··怎么处理··
      • ray_1942:很强势 ,帮助很大,感谢分享~
        小小小阿博er:@ray_1942 发吧,没事:stuck_out_tongue:
        ray_1942:@小小小阿博er 喜欢点啦 我把oc翻译成swift版了 还修复了些bug修改了修改 我可以发到我的github么 :smirk:
        小小小阿博er:@ray_1942 感谢支持,可以点个喜欢:heart_eyes::heart_eyes:
      • 丶偏执怪人:那能不能设置中间的按钮和其他按钮一样点击切换界面 不用dismiss切换
        9648f522204f:大哥,你解决了吗
        9648f522204f:@小小小阿博er 大哥,能仔细说说吗,怎么让他按照系统的行为。新手,还赶项目
        小小小阿博er:@丶偏执怪人 你说像普通的控制器切换吗?是的话,让它按照系统的行为就可以了,不需要做那些复杂操作
      • NateLam:需要转载做个笔记, 会注明出处的放心, 再次感谢
      • NateLam:对我帮助很大, 网上就你一篇靠谱的, 十分感谢 :heart:
        小小小阿博er:@NateLam 感谢支持,对你有帮助就好
      • tomatobin:使用storyboard方法:
        1、storyboard中增加一个空的,来占位
        2、继承Tabbar,添加一个按钮,layoutSubviews时将按钮bring到最前
        3、处理点击事件。。
        哈哈
        3bad9091035d:小哥,你那个空的是怎么加上去的,是多加了个控制器吗,然后这个按钮没有图片啥的,在代码里再使用layoutSubviews吗:innocent:
        7b1f338f0c62:增加个空位怎么搞?大神
      • ForestSen:好文章
      • JoeWcc:不错
      • xxttw:不错 不错
        小小小阿博er:@Unc1eWang 多谢支持,共同学习、进步
      • 小小小阿博er:你指的是?这个框架的代码地址我有在文章最后给出的哦
      • 毕小强:有木有完整点的代码
        毕小强:好的 谢谢
        小小小阿博er:@毕小强 你指的是?这个框架的代码地址我有在文章最后给出的哦
      • LV大树:已经帮你修复一个issue.
        小小小阿博er:@LV大树 thanks
      • Lol刀妹:可以,很强势。
      • just_xam:学习了
      • Azzan:好文章
      • 6a5559b55c25:不错不错

      本文标题:iOS-TabBar中间凸起点击完全有反应

      本文链接:https://www.haomeiwen.com/subject/qrqqdttx.html