Android CheckBox控件去除圖標 樣式改造

有個UI需要實現下面這種效果,但我之前是使用的CheckBox,本着能改就改的原則,還是把CheckBox改造一份,終於是實現了圖中的效果

過程

1.去除CheckBox的左側圖標

CheckBox默認左側會有個正方形的小框框,來展示勾選的狀態,我們得先把這個去除了,去除的代碼其實只需要在xml布局文件中,將button設置為null即可

android:button="@null"

代碼:

<CheckBox
	android:layout_weight="1"
	android:id="@+id/cb1"
	android:layout_width="400dp"
	android:layout_height="0dp"
	android:background="@drawable/selector_checkbox"
	android:button="@null"
	android:text="需提供辦事指南之外的申報材料" />

2.設置背景

這里選擇使用Android中的selector作為背景,可以設置CheckBox選中和未選中的狀態

選中狀態:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="5dp"/>
    <solid android:color="#3791e0"/>
</shape>

默認狀態:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="5dp"/>
    <solid android:color="@color/white"/>
</shape>

selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true"  android:drawable="@drawable/shape_checkbox_checked"/>

    <item android:state_checked="false" android:drawable="@drawable/shape_checkbox_normal"/>
</selector>

設置背景:

<CheckBox
	android:layout_weight="1"
	android:id="@+id/cb1"
	android:layout_width="400dp"
	android:layout_height="0dp"
	android:button="@null"
	android:background="@drawable/selector_checkbox"
	android:text="需提供辦事指南之外的申報材料" />

3.設置文字顏色

由於上面的背景選擇並不能應用到文字上去,設置文字顏色我們只能通過代碼來設置

CheckBox提供了一個狀態改變的監聽器,通過這個監聽器,我們可以動態對CheckBox的文字進行修改,代碼如下:

checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
	@SuppressLint("ResourceAsColor")
	@Override
	public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
		if (b) {
			checkBox.setTextColor(getResColor(R.color.white));
		} else {
			checkBox.setTextColor(getResColor(R.color.black));
		}
	}
});

private int getResColor(int resColor) {
	int color;
	if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.M) {
		color = getColor(resColor);
	} else {
		color = getResources().getColor(resColor);
	}
	return color;
}

PS:getResColor是封裝的方法,主要用來獲取顏色的二進制

4.調整文字偏移

調整文字偏移的話其實很簡單,使用padding的屬性即可,自己看着調整即可

<CheckBox
	android:layout_weight="1"
	android:id="@+id/cb1"
	android:layout_width="400dp"
	android:layout_height="0dp"
	android:paddingLeft="20dp"
	android:paddingStart="30dp"
	android:paddingBottom="10dp"
	android:paddingTop="10dp"
	android:layout_marginBottom="8dp"
	android:background="@drawable/selector_checkbox"
	android:button="@null"
	android:text="需提供辦事指南之外的申報材料" />

代碼示例

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="5dp"/>
    <solid android:color="#3791e0"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="5dp"/>
    <solid android:color="@color/white"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true"  android:drawable="@drawable/shape_checkbox_checked"/>

    <item android:state_checked="false" android:drawable="@drawable/shape_checkbox_normal"/>
</selector>

<CheckBox
	android:layout_weight="1"
	android:id="@+id/cb1"
	android:layout_width="400dp"
	android:layout_height="0dp"
	android:paddingLeft="20dp"
	android:paddingStart="30dp"
	android:paddingBottom="10dp"
	android:paddingTop="10dp"
	android:layout_marginBottom="8dp"
	android:background="@drawable/selector_checkbox"
	android:button="@null"
	android:text="需提供辦事指南之外的申報材料" />