关于 CheckBox 你或许不知道的一些知识点

CheckBox 的默认效果是文字在右边,如下所示



但是我们经常是有文字在左边的需求.可以按照下面的方式进行处理

<CheckBox
android:text="CheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/checkBox"
android:button="@null"
android:drawableRight="?android:attr/listChoiceIndicatorMultiple"
android:drawableEnd="?android:attr/listChoiceIndicatorMultiple"
android:checked="true"
android:layout_centerInParent="true"
android:layout_marginBottom="32dp" />

重点是 android:button=”@null” 和 android:drawableRight=”?android:attr/listChoiceIndicatorMultiple” 的使用drawableRight这里直接是引用了系统自带的图片.当然大家可以自定义自己样式,方法如下:

在drawable目录下新建如下文件,在 android:drawableRight属性中引用即可

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

但是假使你只是对选中的样式不满,而且希望整个App都保持统一的风格,对每个CheckBox单独设置同一的style,这样是可行的的.但是每一个都进行设置有些麻烦,我们可以在 APP 的 theme 中进行处理.注意checkboxStyle的使用.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="checkboxStyle">@style/MyCheckBox</item>
</style>

<style name="MyCheckBox" parent="android:Widget.CompoundButton.CheckBox">
<item name="android:button">@drawable/my_check_box</item>
<item name="android:background">?attr/controlBackground</item>
</style>

drawable目录下新建如下文件(这里选中的图片我还是选择了系统自带的一个,大家按需更改)

abc_btn_check_to_on_mtrl_015所对应的图片

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

在工程中应用了AppTheme该theme,大家正常写CheckBox不用设置样式,即可有效果,而且是全局统一的.

<CheckBox
android:text="CheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/checkBox"
android:checked="true"
android:layout_centerInParent="true"
android:layout_marginBottom="32dp" />

可以看到我并没有对样式有任何的设置,但是默认的效果已经更改了.



而且其他的控件也是同理的,比如更改EditText的默认 hint 色值等.只要在theme中找到控件对应的style进行一下配置,全局就可以有统一的效果.

我们经常有如下的需求:



一般我们都是利用线性布局或者相对布局包裹 TextView 和 ImageView 来完成,其实用一个 CheckBox (上面提到的文字在左的形式)就可以替代上面三个控件所达到的效果,而且某种意义上更方便点.但是如果你不加任何处理可能在真机出现如下问题:



水波纹会跑出控件的范围,虚拟机上是没有这样的问题,具体原因本人还尚不清楚,若有知道的望告知一下.

解决这个问题的办法,可以随便设置一个背景色或者引用系统的水波纹或者自定义的背景效果.这里引用系统的效果.

android:background="?android:attr/selectableItemBackground"

效果如下:



题外话:截取这些效果图还真不容易,稍纵即逝.

关于适配的一个问题,我要在这里提下.避免大家踩坑.如果你想要的效果是选中有类似’勾’号的效果,未选中不出现任何图标.下面这种的做法都是不可行的.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/abc_btn_check_to_on_mtrl_015" />
<item android:state_checked="false" android:drawable="@null" /><!--@null或者不写这句话都是不可行的-->
</selector>

解决的办法 android:state_checked=”false” 状态下引用一张’选中效果’同大小的透明图片或者与背景色相同的图片.注意必须相同大小,否则的话两种效果的图片会以最小图片的尺寸为标准展示出来,这会影响你的适配效果.