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图片,然后选择“图像”–“画布大小”,然后输入新的大小就可以了。

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

(0)

相关推荐

  • Android中ListView + CheckBox实现单选、多选效果

    还是先来看看是不是你想要的效果: 不废话,直接上代码,很简单,代码里都有注释 1 单选 public class SingleActivity extends AppCompatActivity { private ListView listView; private ArrayList<String> groups; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInsta

  • Android开发中CheckBox的简单用法示例

    本文实例讲述了Android开发中CheckBox的简单用法.分享给大家供大家参考,具体如下: CheckBox是一种在界面开发中比较常见的控件,Android中UI开发也有CheckBox,简单的说下它的使用,每个CheckBox都要设置监听,设置的监听为CompouButton.OnCheckedChangedListener(). package com.zhuguangwei; import android.app.Activity; import android.os.Bundle;

  • Android中CheckBox复选框控件使用方法详解

    CheckBox复选框控件使用方法,具体内容如下 一.简介 1. 2.类结构图 二.CheckBox复选框控件使用方法 这里是使用java代码在LinearLayout里面添加控件 1.新建LinearLayout布局 2.建立CheckBox的XML的Layout文件 3.通过View.inflate()方法创建CheckBox CheckBox checkBox=(CheckBox) View.inflate(this, R.layout.checkbox, null); 4.通过Linea

  • Android中ListView绑定CheckBox实现全选增加和删除功能(DEMO)

    ListView控件还是挺复杂的,也是项目中应该算是比较常用的了,所以写了一个小Demo来讲讲,主要是自定义adapter的用法,加了很多的判断等等等等-.我们先来看看实现的效果吧! 好的,我们新建一个项目LvCheckBox 我们事先先把这两个布局写好吧,一个是主布局,还有一个listview的item.xml,相信不用多说 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/

  • Android开发之CheckBox的简单使用与监听功能示例

    本文实例讲述了Android开发之CheckBox的简单使用与监听功能.分享给大家供大家参考,具体如下: activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_

  • Android实现炫酷的CheckBox效果

    首先贴出实现的效果图: gif的效果可能有点过快,在真机上运行的效果会更好一些.我们主要的思路就是利用属性动画来动态地画出选中状态以及对勾的绘制过程.看到上面的效果图,相信大家都迫不及待地要跃跃欲试了,那就让我们开始吧. 自定义View的第一步:自定义属性. <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="SmoothChe

  • Android 中CheckBox多项选择当前的position信息提交的示例代码

    先给大家展示下效果图: 废话不多说了,下面通过示例代码给大家介绍checkbox 多项选择当前的position信息提交,具体代码如下所示: package com.dplustours.b2c.View.activity; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import andro

  • Android RecycleView使用(CheckBox全选、反选、单选)

    本文实例为大家分享了CheckBox全选.反选.单选的具体代码,供大家参考,具体内容如下 MainActiivity package com.bwie.day06; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.Recyc

  • Android中自定义Checkbox组件实例

    在Android中,Checkbox是一个很重要的UI组件,而且在Android中,它展现的形式越来越好看,这就说明有些系统,比如4.0以下,checkbox还是比较不好看,或者跟软件的风格不协调,就需要我们自定义这个组件. 自定义这个组件很简单,简单的增加修改xml文件即可. 准备工作 准备好两张图片,一个是选中的图片,另一个是未选中的图片.本文以checked.png和unchecked.png为例. 设置选择框 在drawable下新建文件custom_checkbox.xml 复制代码

  • 详解Android Checkbox的使用方法

    0和1是计算机的基础,数理逻辑中0和1代表两种状态,真与假.0和1看似简单,其实变化无穷. 今天我就来聊聊android控件中拥有着0和1这种特性的魔力控件checkbox. 先来讲讲Checkbox的基本使用.在XML中定义. <?xml version="1.0" encoding="utf-8"?> <CheckBox xmlns:android="http://schemas.android.com/apk/res/android

随机推荐