iOS-使用hitTest控制点击事件的响应对象

之前在文章《iOS-实现映客首页TabBar和滑动隐藏NavBar和TabBar》中,提到了hitTest方法,但是没有详细说明,导致有童鞋不理解为什么要这么做,这几天把hitTest的资料整理了一下,在这里介绍一些,解开疑惑。

这篇文章,最终的目的就是解释如何让中间按钮超出TabBar部分响应点击事件。效果图如下:

中间按钮超出了`TabBar`的区域效果图

这篇文章将围绕一下几个问题来讲:

  1. hitTest是什么
  2. hitTest的调用顺序是怎么样的
  3. hitTest和事件传递有什么关系
  4. hitTest是如何解决子视图超出其视图范围还是能响应触摸事件的

下面我们一个一个来看。

1. hitTest是什么

hitTest:withEvent:UIView的一个方法,该方法会被系统调用,是用于在视图(UIView)层次结构中找到一个最合适的UIView来响应触摸事件。

2. hitTest的调用顺序是怎么样的

一个触摸事件事件传递顺序大致如下:

touch->UIApplication->UIWindow->UIViewController.view->subViews->...->view

1) 触摸事件传递顺序

  1. 当用户点击屏幕时,会产生一个触摸事件,系统会将该事件加入到由UIApplication管理的事件队列中
  2. UIApplication会从事件队列中取出最早的事件进行分发处理,先发送事件给应用程序的主窗口UIWindow
  3. 主窗口会调用其hitTest:withEvent:方法在视图(UIView)层次结构中找到一个最合适的UIView来处理触摸事件

2) hitTest调用顺序

以下pointInside:withEvent:简称为pointInsidehitTest:withEvent:简称为hitTest

hitTest的代码逻辑大致如下:

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    //系统默认会忽略isUserInteractionEnabled设置为NO、隐藏、alpha小于等于0.01的视图
    if (!self.isUserInteractionEnabled || self.isHidden || self.alpha <= 0.01) {
        return nil;
    }
    if ([self pointInside:point withEvent:event]) {
        for (UIView *subview in [self.subviews reverseObjectEnumerator]) {
            CGPoint convertedPoint = [subview convertPoint:point fromView:self];
            UIView *hitTestView = [subview hitTest:convertedPoint withEvent:event];
            if (hitTestView) {
                return hitTestView;
            }
        }
        return self;
    }
    return nil;
}

执行顺序如下:

  1. 首先在当前视图的hitTest方法中调用pointInside方法判断触摸点是否在当前视图内
  2. pointInside方法返回NO,说明触摸点不在当前视图内,则当前视图的hitTest返回nil,该视图不处理该事件
  3. pointInside方法返回YES,说明触摸点在当前视图内,则从最上层的子视图开始(即从subviews数组的末尾向前遍历),遍历当前视图的所有子视图,调用子视图的hitTest方法重复步骤1-3
  4. 直到有子视图的hitTest方法返回非空对象或者全部子视图遍历完毕
  5. 若第一次有子视图的hitTest方法返回非空对象,则当前视图的hitTest方法就返回此对象,处理结束
  6. 若所有子视图的hitTest方法都返回nil,则当前视图的hitTest方法返回当前视图本身,最终由该对象处理触摸事件

上面的流程,看着可能有点绕,我们来看下面一个例子


例子

上图中有5个View,红点为手指点击区域,ViewA为父视图,ViewBViewCViewA的子视图,ViewDViewEViewC的子视图。
(这里假设所有View都可以响应点击事件,而且ViewBViewC上层,ViewDViewE上层,即ViewBaddSubView:执行在ViewC之后,ViewDaddSubView:执行在ViewE之后)

当点击ViewE时,hitTest执行顺序如下:
先看看点击大致走向图如下,其中,✅部分为执行pointInsideYES部分,X部分执行pointInsideNO部分,最终hitTest返回ViewE

hitTest走向图

  1. 首先调用ViewAhitTest方法,由于触摸点在其范围内,pointInside返回YES,遍历其子视图,依次调用ViewBViewChitTest方法
  2. 执行ViewBhitTest方法,由于触摸点是不在ViewB内,其pointInside方法返回NOhitTest返回nil
  3. 执行ViewChitTest方法,由于触摸点是在ViewC内,其pointInside方法返回YES,遍历其子视图,依次调用ViewDViewEhitTest方法
  4. 执行ViewDhitTest方法,由于触摸点是不在ViewD内,其pointInside方法返回NO,所以其hitTest返回nil
  5. 执行ViewEhitTest方法,由于触摸点是在 ViewE内,其pointInside方法返回YES,由于其没有子视图了,其hitTest返回其本身
  6. 最终,由ViewE来响应该点击事件

3. hitTest和事件传递有什么关系

事件传递的的顺序和hitTestpointInside返回为YES的视图的执行顺序是相反的。事件传递是从最上层的视图开始传递的,直到UIApplication

拿我们上面的例子来说,hitTest执行的结果是ViewE来响应事件,但是如果ViewE并不处理该事件,则其需要把该事件进行传递给下一个响应者,这个时候,它会将事件抛给ViewC,如果ViewC也不处理事件,则其会将事件传递给ViewA,如果ViewA也不处理,则该事件就不响应了。

以下由苹果官方文档提供的事件传递图


苹果官方提供的事件传递图

上图事件的传递流程如下:

  1. 首先,由initial view尝试来处理事件,如果它处理不了,则会将事件传递给他的父视图View
  2. View尝试处理该事件,如果其也处理不了,再传递给它的父视图UIViewController.view
  3. UIViewController.view尝试来处理该事件,如果处理不了,将把该事件传递给UIViewController
  4. UIViewController尝试处理该事件,如果处理不了,将把该事件传递给主窗口Window
  5. 主窗口Window尝试来处理该事件,如果处理不了,将传递给应用单例Application
  6. 如果应用单例Application也处理不了,则该事件将会被丢弃

4. hitTest是如何解决子视图超出其视图范围还是能响应触摸事件的

我们来看看下面的图,下图中中间按钮超出了TabBar的区域

中间按钮超出了`TabBar`的区域效果图

我们通过Xcode中下图红框按钮来查看该页面的层级关系
Xcode中层级查看按钮

我来看下这个图的层级关系

层级结构图

从以上图可以看出,TabBarUITableView,共同的父类为UILayoutContainerView,而TabBar的层级,相对于UITableView高些,它和UITransitionView是同级的。

当我们点击中间按钮超出TabBar部分(“中间按钮超出了TabBar
的区域效果图”红框部分),系统是如何处理的呢?我们跳过UIWindow,直接从UILayoutContainerView开始调用hitTest

先看看大致走向图,其中,✅部分为执行pointInsideYES部分,X部分执行pointInsideNO部分

hitTest走向图
  1. 调用UILayoutContainerViewhitTest方法,由于是在其区域内,pointInside返回YES,再遍历其子视图,调用hitTest
  2. 先调用TabBarhitTest方法,由于点击区域是在TabBar之外的,所以pointInside返回NOhitTest返回nilTabBar并不响应该事件
  3. 再调用UITransitionViewhitTest方法,在其区域内,递归调用子视图hitTest方法,直到调用UITableView在突出按钮后的UITableViewCellhitTest返回,返回该Cell,最终由Cell响应该事件

所以,系统默认的处理方式,超出TabBar区域,中间按钮是不响应该事件的,而是由其后视图响应。

想要超出父视图区域响应点击事件,必须将走向图该为如下所示(其中,✅部分为执行pointInsideYES部分,X部分执行pointInsideNO部分):

修改后的hitTest走向图

要让中间按钮响应点击超出TabBar按钮部分的点击事件,则需要重写TabBarhitTest方法了,在执行hitTest方法时,判断点击区域在中间按钮的区域,则返回中间按钮,响应该事件,代码如下:

//重写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];
}

童鞋的疑问

这里,之前童鞋有一个疑问:
问:直接在中间按钮中事件hitTest直接来响应点击事件,行不行呢?
答:答案当然是不行的,如果你看懂了这篇文章,那就知道答案了。如果不在TabBar中重写hitTest方法,系统是先调用TabBarhitTest方法的,在调用该hitTest方法时,判断点击超出TabBar部分,不在其区域内,pointInside就返回NO了,hitTest直接返回nilTabBar不能响应该事件,其子视图(中间按钮)也就没机会执行hitTest方法了。所以是不行的。

参考文章

如果觉得该文章对你有帮助,请帮忙点赞,如果发现有错误,请帮忙指出,谢谢!

推荐阅读更多精彩内容