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被遮挡时也无效。
