Android扩大View点击区域

新方案: Android扩大View点击区域[支持同时扩展多个子View]

1、前言

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

image.png

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

2、解决方案

2.1、直接上代码

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

其中dpToPx()是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里只能设置一个，设置多个时只有最后设置的那个有效。（有此需求请使用此方案: Android扩大View点击区域[支持同时扩展多个子View]）
3、只有设置那个View的View.parent接收到点击事件时才能触发，也就是说这个区域是可以被其他View遮挡的，so被遮挡时也无效。

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