自定义tabbar中间凸起位置点击处理

一、需求背景

现在很多应用都有类似下图这种UI


父视图是图中蓝色框大小,中间按钮凸起部分在视图外,在这种情况下如果我们不做任何处理,点击图中红色区域是无法被响应的。

二、介绍

响应链在这里就不过多介绍了,我们主要介绍事件分发时是如何找到最合适的事件处理者。

这里需要了解两个方法:

// 判断点击区域是否在当前视图范围内
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
// 最适合处理事件的View
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event

方法一用于判断点击区域是否在当前视图范围内
方法二用于寻找最适合的View

我们以上图的例子进行说明,暂时称呼它为tabbar,其视图范围为图中1区域,中间凸起部分button在视图外的部分为2区域,两者重合部分为3区域。

在点击1、2、3区域时都会先调用tabbar的- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event,只不过返回值不同,结果不同,我们详细来看看会发生什么。

1.1、点击区域1

tabbar的方法一返回YES,接着会去遍历tabbar上所有子控件并调用子控件中的方法一,也就是会调用button的方法一,由于button不在1区域内,所以button的方法一返回NO,并且button的方法二返回null,然后调用tabbar的方法二并返回self即tabbar本身处理点击事件。


1.2、点击区域2

tabbar的方法一返回YES,接着会去遍历tabbar上所有子控件并调用子控件中的方法一,也就是会调用button的方法一,所以button的方法一返回YES,并且button的方法二返回本身,然后调用tabbar的方法二并返回button,最终由button处理点击事件。


1.3、点击区域3

我们在自定义tabbar时,一般有两种方式:
1、将自定义的tabbar添加到原来的tabbar上。
2、利用KVC替换掉原来的tabbar。

方式一
事件分发是由下往上进行分发,在调用系统tabbar方法一的时候,返回值为NO,事件不会继续向上分发,即不会调用自定义的tabbar的那两个方法,由系统的tabbar成为事件的接收者。此时无法实现我们的需求。

方式二
我们知道最终的接收者实际上是通过tabbar的方法二的返回值决定的,所以我们只需要修改自定义tabbar的方法二的实现即可。

// 其中self.plusButton为中间凸起按钮
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
     CGPoint newPoint = [self convertPoint:point toView:self.plusButton];
     // 判断是否属于按钮范围
     if ([self.plusButton pointInside:newPoint withEvent:event]) { 
         return self.plusButton;
     } else {
         return [super hitTest:point withEvent:event];
     }
}

三、总结

在做类似这种UI时,需要将自定义tabbar通过KVC替换掉原有tabbar,并重写- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event返回合适的View去处理事件。

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

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 在iOS开发中经常会涉及到触摸事件。本想自己总结一下,但是遇到了这篇文章,感觉总结的已经很到位,特此转载。作者:L...
    WQ_UESTC阅读 5,987评论 4 26
  • 转载: https://blog.csdn.net/qq871531334/article/details/822...
    NicooYang阅读 1,572评论 0 9
  • 亲爱的宝贝: 妈妈很久没有给你写信了!看着你一天天的长大,一天天的变化,而我却不能陪在你身边照顾你,鼓励你,教你...
    芽滴滴阅读 8,907评论 12 68
  • 今天是儿童节,对于儿子来说过得跟以往不一样。早上和闺蜜约好带娃去离宫,在乐翻天汇合,因为儿子早上还得参加学...
    全顺楼阅读 185评论 0 1