使用TouchDelegate扩大View的点击区域

使用TouchDelegate扩大View的点击区域

在日常开发中，经常会遇到View的触摸区域过小要求放大触摸区域的需求。
虽然在很多时候可以设置padding或者通过嵌套Layout来完成，但是这两种并非很完美的解决方案，本文介绍如何通过TouchDelegate来完成此功能。

效果图

什么是TouchDelegate

TouchDelegate官网介绍为

Helper class to handle situations where you want a view to have a larger touch area than its actual view bounds. The view whose touch area is changed is called the delegate view. This class should be used by an ancestor of the delegate. To use a TouchDelegate, first create an instance that specifies the bounds that should be mapped to the delegate and the delegate view itself.

大致理解为：一个用于帮助扩大触摸区域的帮助类

TouchDelegate工作原理简单分析

构建一个TouchDelegate对象

  /**
     * Constructor
     * 
     * @param bounds Bounds in local coordinates of the containing view that should be mapped to
     *        the delegate view
     * @param delegateView The view that should receive motion events
     */
    public TouchDelegate(Rect bounds, View delegateView) {
        mBounds = bounds;

        mSlop = ViewConfiguration.get(delegateView.getContext()).getScaledTouchSlop();
        mSlopBounds = new Rect(bounds);
        mSlopBounds.inset(-mSlop, -mSlop);
        mDelegateView = delegateView;
    }

在构建TouchDelegate的时候需要传入两个参数,Rect、View
Rect 用于判断触摸的x,y坐标是否在这个Rect区域
View 代表其TouchEvent需要被代理的View对象

TouchEvent处理

 /**
     * Will forward touch events to the delegate view if the event is within the bounds
     * specified in the constructor.
     * 
     * @param event The touch event to forward
     * @return True if the event was forwarded to the delegate, false otherwise.
     */
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int)event.getX();
        int y = (int)event.getY();
        boolean sendToDelegate = false;
        boolean hit = true;
        boolean handled = false;

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            Rect bounds = mBounds;//我们传入的Rect

            if (bounds.contains(x, y)) {//如果我们的触摸区域在这个范围
                mDelegateTargeted = true;
                sendToDelegate = true;
            }
            break;
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_MOVE:
            sendToDelegate = mDelegateTargeted;
            if (sendToDelegate) {
                Rect slopBounds = mSlopBounds;
                if (!slopBounds.contains(x, y)) {
                    hit = false;
                }
            }
            break;
        case MotionEvent.ACTION_CANCEL:
            sendToDelegate = mDelegateTargeted;
            mDelegateTargeted = false;
            break;
        }
        if (sendToDelegate) {
            final View delegateView = mDelegateView;

            if (hit) {
                // Offset event coordinates to be inside the target view
                event.setLocation(delegateView.getWidth() / 2, delegateView.getHeight() / 2);//强制重置手势的位置
            } else {
                // Offset event coordinates to be outside the target view (in case it does
                // something like tracking pressed state)
                int slop = mSlop;
                event.setLocation(-(slop * 2), -(slop * 2));
            }
            //调用代理View的dispatchTouchEvent让代理View自行处理
            handled = delegateView.dispatchTouchEvent(event);
        }
        return handled;
    }

TouchDelegate在何处被调用?

TouchDelegate的调用在源码View的onTouchEvent中

  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 ((viewFlags & ENABLED_MASK) == DISABLED) {
            if (action == MotionEvent.ACTION_UP && (mPrivateFlags & PFLAG_PRESSED) != 0) {
                setPressed(false);
            }
            // A disabled view that is clickable still consumes the touch
            // events, it just doesn't respond to them.
            return (((viewFlags & CLICKABLE) == CLICKABLE
                    || (viewFlags & LONG_CLICKABLE) == LONG_CLICKABLE)
                    || (viewFlags & CONTEXT_CLICKABLE) == CONTEXT_CLICKABLE);
        }
        //在此处调用了View的TouchDelegate的onTouchEvent方法
        if (mTouchDelegate != null) {
            if (mTouchDelegate.onTouchEvent(event)) {
                return true;
            }
        }
        xxx
    }

Sample

跟效果图一样,扩大TextView的点击区域,sample让TextView的点击区域扩大了200,代码如下:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final TextView testTextView = (TextView) findViewById(R.id.tv_test);
        testTextView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "you clicked me", Toast.LENGTH_SHORT).show();
            }
        });
        final View parent = (View) testTextView.getParent();
        testTextView.post(new Runnable() {
            @Override
            public void run() {
                Rect bounds = new Rect();
                testTextView.getHitRect(bounds);
                bounds.left -= 200;
                bounds.top -= 200;
                bounds.right += 200;
                bounds.bottom += 200;
                TouchDelegate mTouchDelegate = new TouchDelegate(bounds,testTextView);
                //设置parent的TouchDelegate,parent执行TouchDelegate的onTouchEvent方法会去调用代理的TextView的dispatchTouchEvent方法
                parent.setTouchDelegate(mTouchDelegate);
            }
        });
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_test"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:background="#e8e8e8"
        android:gravity="center"
        android:layout_centerInParent="true"
        android:text="Hello World" />

</RelativeLayout>

或者稍微封装一下

/**
     * 用于扩大View的点击范围
     *
     * @param delegateView 需要扩大点击范围的View
     * @param l          left
     * @param t          top
     * @param r          right
     * @param b          bottom
     */
    public static void largerViewBounds(final View delegateView, final int l, final int t, final int r, final int b) {
        final View parent = (View) delegateView.getParent();
        if (parent != null) {
            parent.post(new Runnable() {
                @Override
                public void run() {
                    Rect mRect = new Rect();
                    delegateView.getHitRect(mRect);
                    mRect.left += l;
                    mRect.top += t;
                    mRect.right += r;
                    mRect.bottom += b;
                    TouchDelegate mTouchDelegate = new TouchDelegate(mRect, delegateView);
                    parent.setTouchDelegate(mTouchDelegate);
                }
            });
        }
    }