Android CheckBox中设置padding无效解决办法

android checkbox中设置padding无效解决办法

checkbox使用本地图片资源

checkbox是android中用的比较多的一个控件，不过它自带的button样式比较丑，通常都会替换成本地的资源图片。使用本地资源图片很简单，设置android:button属性为一个自定义的包含selector的drawable文件即可。

例如android:button=”@drawable/radio_style”。radio_style.xml定义如下。checked和unchecked分别是选中和未选中时使用的图片资源。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:drawable="@drawable/checked"></item>
  <item android:state_checked="false" android:drawable="@drawable/unchecked"></item>
</selector>

checkbox点击响应问题

当checkbox使用本地的图片资源后，如果本地图片很小（图片大小需要和布局搭配，很多时候为了界面的美观不能使用太大的图片），而且右侧没有文字时，会导致checkbox很难被点中。增加点击区域，通常的做法是增加padding值，扩大控件的外部范围。我们希望可以通过设置checkbox的padding值，让图片的上下左右四个方向都增加一定的范围，这样用户点击图片的响应上就不会有问题了。

checkbox padding失效问题

checkbox分别设置上、下、左、右和全部四个方向各20dp的padding后实际显示效果如图所示。这里为了看得清楚，为checkbox设置了背景色，并且添加了文字。

从图示可以看出，checkbox设置padding值影响的是实际上文字到checkbox边界的距离，图片始终在左侧垂直居中的位置。
先看上下padding，当设置上下padding时，由于文字本身距离上下边界就有一定的距离，如果padding值设置的不够，整个checkbox区域根本不会变化，通过设置较大的padding值可以实现扩大checkbox上下区域的目的。最后一张图上下各20dp的padding，这时可以看到checkbox高度增加了。但由于中间文字距离上下边界的距离和checkbox图片高度，文字字号，文字内部padding等很多因素有关，很难通过对上下padding设置精确控制checkbox区域，很可能出现在这个手机上高度被拉的很大，而另一个手机上根本没有效果。

再看左右padding，当设置左右padding时，无论是左padding还是右padding，影响的只是文字的位置。图片始终都在整个checkbox的左侧，对图片来说，增大的都是右侧区域。所以设置的左右padding不能解决checkbox点击响应的问题，不仅会导致图片位置偏左，还会出现点击左侧区域无法点中的情况。

标题中所说的padding无效问题，实际上是有效的，只是设置paddingleft增加的是右边区域，paddingtop和paddingbottom只有设置较大的值才能看到效果。

checkbox padding失效问题原因

要想知道checkbox padding失效问题原因，得要查看android源码，checkbox是继承自compoundbutton，checkbox左侧的图片是在compoundbutton的ondraw()方法中绘制的，ondraw()方法代码如下，mbuttondrawable就是要绘制的图片对应的drawable对象，可以看到left始终为0，而top位置和grivity有关（上述例子中gravity是居中的）。

@override
protected void ondraw(canvas canvas) {
  super.ondraw(canvas);

  final drawable buttondrawable = mbuttondrawable;
  if (buttondrawable != null) {
    final int verticalgravity = getgravity() & gravity.vertical_gravity_mask;
    final int drawableheight = buttondrawable.getintrinsicheight();
    final int drawablewidth = buttondrawable.getintrinsicwidth();

    int top = 0;
    switch (verticalgravity) {
      case gravity.bottom:
        top = getheight() - drawableheight;
        break;
      case gravity.center_vertical:
        top = (getheight() - drawableheight) / 2;
        break;
    }
    int bottom = top + drawableheight;
    int left = islayoutrtl() ? getwidth() - drawablewidth : 0;
    int right = islayoutrtl() ? getwidth() : drawablewidth;

    buttondrawable.setbounds(left, top, right, bottom);
    buttondrawable.draw(canvas);
  }
}

解决checkbox点击响应问题

由于checkbox和compoundbutton没有提供任何方法设置图片的位置，要想解决checkbox点击响应的问题似乎唯一的方法就是重写一个新的控件，然后在ondraw方法中确定图片位置时把padding也考虑进去。不过这样做实在是太麻烦了。

这里给出另外一种简单的方法，那就是将图片扩大。checkbox点击响应问题本身是由于图片过小，如果将图片扩大就不存在这个问题了，但前面说之所以用小的图片是为了布局搭配和界面美观，如果将图片扩大不是又回到最开始的问题了吗！
其实这里说的图片扩大，不是将图片整体放大，而是图片内容不变，在原先的图片外围增加透明像素，由于透明像素不可见，图片看起来的实际大小仍然和以前一样，但由于透明像素的存在，checkbox的区域也会随之增大。

要在图片外网增加透明像素前提是图片必须是png格式的，不过这并不是问题，通常资源文件都是png格式的，即使不是png格式的图片，也可以先转换成png格式，然后再增加透明像素。

增加透明像素的方法也很简单，用photoshop打开png图片，然后选择“图像”–“画布大小”，然后输入新的大小就可以了。

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！