读源码长知识 | 原来可以这样扩大 View 点击区域-一一网

App 界面中，有一些控件尺寸很小，不容易点到。我总是通过加 padding 来解决这个问题。这样容易牵一发动全身，特别对于复杂界面，往往改变了一个控件的大小，其他控件的位置也随之而动。有没有更好的办法解决办法？在阅读触摸事件源码中，无意间发现了一种更解耦的方式。

读源码长知识系列文章如下，该系列从源码中汲取精华并运用于实战项目中。

读源码长知识 | 更好的RecyclerView点击监听器

Android自定义控件 | 源码里有宝藏之自动换行控件

Android自定义控件 | 小红点的三种实现（下）

读源码长知识 | 动态扩展类并绑定生命周期的新方式

读源码长知识 | Android卡顿真的是因为”掉帧“？

读源码长知识 | 原来可以这样扩大点击区域

引子

触摸事件源码分析可以点击这里, 现援引结论如下:

Activity接收到触摸事件后，会传递给PhoneWindow，再传递给DecorView，由DecorView调用ViewGroup.dispatchTouchEvent()自顶向下分发ACTION_DOWN触摸事件。
ACTION_DOWN事件通过ViewGroup.dispatchTouchEvent()从DecorView经过若干个ViewGroup层层传递下去，最终到达View。View.dispatchTouchEvent()被调用。
View.dispatchTouchEvent()是传递事件的终点，消费事件的起点。它会调用onTouchEvent()或OnTouchListener.onTouch()来消费事件。
每个层次都可以通过在onTouchEvent()或OnTouchListener.onTouch()返回true，来告诉自己的父控件触摸事件被消费。只有当下层控件不消费触摸事件时，其父控件才有机会自己消费。
触摸事件的传递是从根视图自顶向下“递”的过程，触摸事件的消费是自下而上“归”的过程。

触摸代理

View 对触摸事件的消费逻辑都集中在onTouchEvent()中，它是触摸事件传递的终点，消费的起点。但其中居然将触摸事件又传递给了别人：

public class View {
    // 触摸代理
    private TouchDelegate mTouchDelegate = null;
    public boolean onTouchEvent(MotionEvent event) {
        final float x = event.getX();
        final float y = event.getY();
        final int viewFlags = mViewFlags;
        final int action = event.getAction();
        ...
        // 将触摸事件分发给触摸代理
        if (mTouchDelegate != null) {
            if (mTouchDelegate.onTouchEvent(event)) {
                return true;
            }
        }
    }
}
复制代码

在onTouchEvent()中，触摸事件在被消费之前先传递给了mTouchDelegate。它是一个触摸代理实例：

public class TouchDelegate {
    // 代理控件
    private View mDelegateView;
    // 代理控件响应触摸事件的区域
    private Rect mBounds;
    
    // 构造函数
    public TouchDelegate(Rect bounds, View delegateView) {
        mBounds = bounds;
        mDelegateView = delegateView;
        ...
    }
    
    // 处理触摸事件
    public boolean onTouchEvent(@NonNull MotionEvent event) {
        int x = (int)event.getX();
        int y = (int)event.getY();
        // 是否将触摸事件传递给代理
        boolean sendToDelegate = false;
        boolean handled = false;

        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                // 若 DOWN 事件发生在设定区域内，则将所有事件都传递给它。
                sendToDelegate = mBounds.contains(x, y);
                ...
                break;
            ...
        }
        if (sendToDelegate) {
            // 改变触摸事件的位置，假装它发生在代理控件的中心
            event.setLocation(mDelegateView.getWidth() / 2, mDelegateView.getHeight() / 2);  
            // 将触摸事件传递给代理控件
            handled = mDelegateView.dispatchTouchEvent(event);
        }
        return handled;
    }
}
复制代码

触摸代理的构造函数中需传入代理控件及其响应触摸事件的区域。若触摸事件落在该区域内则将事件传递给代理控件消费。

所以只需将代理控件的响应区域人为地增大即可实现点击区域的扩大：

val viewGroup: ViewGroup
val childView: View

// 为了获取子控件相对于父控件的位置, 必须 psot 
viewGroup.post {
    val rect = Rect()
    // 获取子控件相对于父控件位置并记录在 rect 中
    ViewGroupUtils.getDescendantRect(viewGroup, childView, rect)
    // 将 rect 横向和纵向都往外扩 100 像素
    rect.inset(- 100, - 100)
    // 为父控件设置触摸代理
    viewGroup.touchDelegate = TouchDelegate(childView, rect)
}
复制代码

触摸代理得设置在父控件上，因为子控件的触摸事件经由父控件传递过来的，只有父控件中的触摸代理才能优先处理事件。

若用上述代码连续为两个控件扩大点击区域，就不奏效了。。。

自定义触摸代理

因为View中只有一个TouchDelegate成员，且TouchDelegate中只有一个代理控件。

为了让触摸代理能服务多个控件，就不得不通过继承扩展它：

// 多重触摸代理
class MultiTouchDelegate(bound: Rect? = null, delegateView: View) 
    : TouchDelegate(bound, delegateView) {
    // 保存多个代理控件及其触摸区域的容器
    val delegateViewMap = mutableMapOf<View, Rect>()
    // 当前的代理控件
    private var delegateView: View? = null
    
    // 新增代理控件
    fun addDelegateView(delegateView: View, rect: Rect) {
        delegateViewMap[delegateView] = rect
    }
    
    // 完全重写, 以屏蔽父类逻辑
    override fun onTouchEvent(event: MotionEvent): Boolean {
        val x = event.x.toInt()
        val y = event.y.toInt()
        var handled = false
        when (event.actionMasked) {
            MotionEvent.ACTION_DOWN -> {
                // DOWN 发生时找到对应坐标下的代理控件
                delegateView = findDelegateViewUnder(x, y)
            }
            MotionEvent.ACTION_CANCEL -> {
                delegateView = null
            }
        }
        // 若找到代理控件，则将所有事件都传递给它消费
        delegateView?.let {
            event.setLocation(it.width / 2f, it.height / 2f)
            handled = it.dispatchTouchEvent(event)
        }
        return handled
    }

    // 遍历代理控件，返回其触摸区域包含指定坐标的那一个代理控件
    private fun findDelegateViewUnder(x: Int, y: Int): View? {
        delegateViewMap.forEach { entry -> if (entry.value.contains(x, y)) return entry.key }
        return null
    }
}
复制代码

然后就可以像这样为多个控件扩大点击区域：

val viewGroup: ViewGroup
val childView1: View
val childView2: View
val multiTouchDelegate = MultiTouchDelegate(childView1)
viewGroup.touchDelegate = multiTouchDelegate

viewGroup.post {
    val rect1 = Rect()
    ViewGroupUtils.getDescendantRect(viewGroup, childView1, rect1)
    rect1.inset(- 100, - 100)
    multiTouchDelegate.addDelegateView(childView1, rect1)
    
    val rect2 = Rect()
    ViewGroupUtils.getDescendantRect(viewGroup, childView2, rect2)
    rect2.inset(- 200, - 200)
    multiTouchDelegate.addDelegateView(childView2, rect2)
}
复制代码

Kotlin 语法糖重构

这样的使用成本还是太高了，对于业务层最友好的方式应该是只传递扩大的像素值，而无需关心“Rect对象创建”，“触摸代理对象创建”这些实现细节。

那就运用 Kotlin 的扩展方法重构一下：

// 为 View 新增 expand 扩展方法
fun View.expand(dx: Int, dy: Int) {
    // 将刚才定义代理类放到方法内部，调用方不需要了解这些细节
    class MultiTouchDelegate(bound: Rect? = null, delegateView: View) : TouchDelegate(bound, delegateView) {
        val delegateViewMap = mutableMapOf<View, Rect>()
        private var delegateView: View? = null

        override fun onTouchEvent(event: MotionEvent): Boolean {
            val x = event.x.toInt()
            val y = event.y.toInt()
            var handled = false
            when (event.actionMasked) {
                MotionEvent.ACTION_DOWN -> {
                    delegateView = findDelegateViewUnder(x, y)
                }
                MotionEvent.ACTION_CANCEL -> {
                    delegateView = null
                }
            }
            delegateView?.let {
                event.setLocation(it.width / 2f, it.height / 2f)
                handled = it.dispatchTouchEvent(event)
            }
            return handled
        }

        private fun findDelegateViewUnder(x: Int, y: Int): View? {
            delegateViewMap.forEach { entry -> if (entry.value.contains(x, y)) return entry.key }
            return null
        }
    }

    // 获取当前控件的父控件
    val parentView = parent as? ViewGroup
    // 若父控件不是 ViewGroup, 则直接返回
    parentView ?: return

    // 若父控件未设置触摸代理，则构建 MultiTouchDelegate 并设置给它
    if (parentView.touchDelegate == null) parentView.touchDelegate = MultiTouchDelegate(delegateView = this)
    post {
        val rect = Rect()
        // 获取子控件在父控件中的区域
        ViewGroupUtils.getDescendantRect(parentView, this, rect)
        // 将响应区域扩大
        rect.inset(- dx, - dy)
        // 将子控件作为代理控件添加到 MultiTouchDelegate 中
        (parentView.touchDelegate as? MultiTouchDelegate)?.delegateViewMap?.put(this, rect)
    }
}
复制代码

然后业务层就可以像这样轻松的扩大点击区域：

val childView1: View
val childView2: View

childView1.expand(100, 100)
childView2.expand(200, 200)
复制代码

talk is cheap, show me the code

View.expand()在这个仓库的Layout.kt文件中

服务频繁发生YoungGC的处理过程（合理压测）

Apple iTunes WebKit 任意代码执行漏洞

STM32F407入门开发: GPIO口输入配置

【学习笔记】树莓派4B简单方便地使用温湿度传感器DHT11/22

Uapplication Uguestbook信息泄露漏洞

Novell Data Synchronizer Mobility Pack WebAdmin加密问题漏洞

读源码长知识 | 原来可以这样扩大 View 点击区域

引子

触摸代理

自定义触摸代理

Kotlin 语法糖重构

talk is cheap, show me the code

推荐阅读