Android中关于按钮点击范围的优化

开发过程中经常会遇到UI设计的按钮范围偏小，会影响到用户的点击范围类似如下图中的按钮，我们通常会通过RadioGroup 嵌套RadioButton的方式来实现，通常我们实现下来的实际点击范围为红色边框内。当我们想扩大点击范围的时候一般会想到给RadioButton设置padding属性来实现，可是这样会让我们的效果跟UI产生出入。那么有没有一种方法即扩大了点击范围也完美实现了UI的设计。

image.png
image.png
当然是有这样的实现方案的。我们知道Android可以自定义Drawable 关于Drawable可以查看http://blog.csdn.net/feather_wch/article/details/79124608
Drawable其中包含一个子类LayerDrawable ,LayerDrawable 通过xml定义的 layer-list 其中 layer-list的item 可以设置上下左右的边距。哈哈，可以设置边距 那。。。这不就可以解决我们的需求了吗！！！！来试一下吧！

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<layer-list>
<item android:bottom="@dimen/padding_l" android:drawable="@drawable/shape_corner_left_max_right_0_ffffff_bg" android:top="@dimen/padding_l" />
</layer-list>
</item>
<item android:state_checked="true">
<layer-list>
<item android:bottom="@dimen/padding_l" android:drawable="@drawable/shape_corner_left_max_right_0_ff8c30_bg" android:top="@dimen/padding_l" />
</layer-list>
</item>
</selector>

image.png
image.png

当然这只是一种实现方案 我们知道Drawable还有一种InsetDrawable 他可以将其他Drawable内嵌到自身，并在四周留出间距。哈哈，四周留出间距 那。。。这不就又可以解决我们的需求了吗！！！！再来试一下吧！

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<inset android:drawable="@drawable/shape_corner_left_max_right_0_ffffff_bg" android:insetTop="@dimen/padding_l" android:insetBottom="@dimen/padding_l" />
</item>
<item android:state_checked="true">
<inset android:drawable="@drawable/shape_corner_left_max_right_0_ff8c30_bg" android:insetTop="@dimen/padding_l" android:insetBottom="@dimen/padding_l" />
</item>
</selector>

不出意外 同样可以实现！最终效果如下：

image.png