Fork me on GitHub

CheckBox改变样式

Android 自定义CheckBox样式

一、修改checkbox选项框样式

首先我们要找到两张checkbox选项框的图片:

1
2
3
normal.png

checked.png

然后我们设置一个背景选择器checkbox_style.xml:

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/checked" android:state_checked="true"/>
<item android:drawable="@drawable/normal" android:state_checked="false"/>
<item android:drawable="@drawable/normal"/>

</selector>

到这里,在往下有两种方案,一种是直接在布局文件的android:button属性中设置:

1
2
3
4
5
6
7
<CheckBox
android:id="@+id/checkbox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@strings/check_text"
android:button="@drawable/checkbox_style"
android:checked="true"/>

还有一种是在style.xml文件中添加样式MyCheckboxStyle,并在布局文件中的style属性中设置:

1
2
3
4
5
6
7
8
9
<style name="MyCheckboxStyle" parent="@android:style/Widget.CompoundButton.CheckBox">
<item name="android:button">@drawable/checkbox_style</item>
</style>

<CheckBox
android:id="@+id/checkbox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/MyCheckboxStyle" />

二、去掉选项框,自定义类Button样式

同样,我们需要来一个selector checkbox_style.xml,但是这里的图片就不是选项框的图片了,而是整个checkbox的背景图片

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/checked" android:state_checked="true"/>
<item android:drawable="@drawable/normal" android:state_checked="false"/>
<item android:drawable="@drawable/normal"/>

然后,我们可以在布局文件中将android:button属性设置为“@null”来去掉选项框,并且在android:background属性中设置:

1
2
3
4
5
6
7
<CheckBox
android:id="@+id/checkbox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/checkbox_style"
android:button="@null"
android:checked="true"/>

文章链接

Android知识整理(3) 两种自定义样式的Checkbox
Android 自定义CheckBox样式