Android扩大View点击区域

1、前言

开发过程中经常会遇到如下这种场景，对于CheckBox而言，整体较小，然后为了用户体验--“好点”，往往需要扩大点击区域。通常的做法就是给CheckBox增加Padding以达到扩大点击区域的目的，但是为了对齐UI，往往需要一通计算跟调整才能“如愿以偿”，可谓哭笑不得。那怎么样可以优雅的解决这个问题呢？

image.png

可以配合BindingAdapter实现在xml上的直接处理。

2、解决方案

2.1、直接上代码

@BindingAdapter("expandTouchArea")
fun expandTouchArea(view: View, size: String) {
    view.postDelayed({
        val bounds = Rect()
        view.getHitRect(bounds)
        var left = 0
        var top = 0
        var right = 0
        var bottom = 0
        /*
        *  size 举例 `2` or `2 4` or `2 4 6 8`
         */
        val mSize = size.trim()
        val ss = mSize.split(" ")
        when (ss.size) {
            1 -> {
                val sdp = (ss[0].toIntOrNull() ?: 0).idp()
                left = sdp
                top = sdp
                right = sdp
                bottom = sdp
            }
            2 -> {
                val sdp = (ss[0].toIntOrNull() ?: 0).idp()
                val sdp1 = (ss[1].toIntOrNull() ?: 0).idp()
                left = sdp
                top = sdp1
                right = sdp
                bottom = sdp1
            }
            4 -> {
                left = (ss[0].toIntOrNull() ?: 0).idp()
                top = (ss[1].toIntOrNull() ?: 0).idp()
                right = (ss[2].toIntOrNull() ?: 0).idp()
                bottom = (ss[3].toIntOrNull() ?: 0).idp()
            }
            else -> {
                return@postDelayed
            }
        }
        bounds.left -= left
        bounds.top -= top
        bounds.right += right
        bounds.bottom += bottom
        val mTouchDelegate = TouchDelegate(bounds, view);
        val p = view.parent
        if (p is ViewGroup) {
            p.touchDelegate = mTouchDelegate;
        }
    }, 100)
}

其中idp()是dp转px的转换函数(Kotlin扩展)，实际使用时请替换。

2.2、使用示例:

<CheckBox
    android:layout_width="14dp"
    android:layout_height="14dp"
    android:background="@drawable/ic_cb_common"
    android:button="@null"
    android:checked="false"
    app:expandTouchArea="@{`20 10 50 20`}"/>

2.3、参数解析

//表示在View原有范围的基础上在四周增加20dp的区域
app:expandTouchArea="@{`20`}

//表示在View原有范围的基础上左右增加20dp, 上下增加10dp的区域
app:expandTouchArea="@{`20 10`}

//表示在View原有范围的基础上, 左上右下分别增加20dp 10dp 50dp 20dp的区域
app:expandTouchArea="@{`20 10 50 20`}

2.4、注意事项

1、若View的自定义触摸范围超出View.parent的大小，则超出的那部分无效。
2、一个ViewGroup里只能设置一个，设置多个时只有最后设置的那个有效。（也可以多个，需要自定义ViewGroup）
3、只有设置那个View的View.parent接收到点击事件时才能触发，也就是说这个区域是可以被其他View遮挡的，so被遮挡时也无效。

如果本文对你有帮助就点个赞支持下吧~~~