Android學習筆記（三）android studio中CheckBox自定義樣式（更換複選框左側的勾選圖像）

複選框CheckBox
在android體系中，CompoundButton類是抽象的複合按鈕，因爲是抽象類，所有不能直接使用。而在實際的開發過程中用的是CompoundButton類的幾個派生類，主要有複選框CheckBox、單選按鈕RadioButton、開關按鈕Switch。
CompoundButton在佈局文件中常常使用的屬性：

• checked:設定按鈕的勾選狀態，true是勾選，false是未勾選。默認是未勾選的狀態。

勾選狀態：
 android:checked="true"

• button:指定左側勾選圖標的圖形。不指定的話，使用的是系統的默認圖標。（下面的例子主要使用了這個屬性進行了設置）

下面主要介紹自己定義複選框左側的勾選圖像：
1）首先準備了選中、未選中的兩個圖像。
注：圖標可以去https://www.iconfont.cn/下載。
check_unchoose.png

check_choose.png

把圖像放到項目的res的drawable文件夾中。
2）在項目的res的drawable文件夾下創建checkbox_selector.xml文件：
如果是勾選狀態，就顯示圖形check_choose；如果取消勾選，就顯示圖形check_unchoose。

<?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/check_choose"/>
    <item android:drawable="@drawable/check_unchoose"/>
</selector>

3）在layout文件中設置：android:button="@drawable/checkbox_selector"

下面僅僅是一個測試的例子：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="cn.edu.hznu.relativelayout_text1.MainActivity">
    <TextView
        android:text="選擇你喜歡的科目"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="55dp"
        android:id="@+id/textView2" />
    <CheckBox
        android:text="語文"
        android:button="@drawable/checkbox_selector"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="13dp"
        android:id="@+id/ck_system" />

    <CheckBox
        android:button="@drawable/checkbox_selector"
        android:text="數學"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ck_custom"
        android:layout_below="@+id/ck_system"
        android:layout_alignLeft="@+id/ck_system"
        android:layout_alignStart="@+id/ck_system"
        />
</RelativeLayout>

4）效果如下：

當我選中的時候：

CheckBox通過setOnCheckedChangeListener方法設置勾選監聽器，對應的監聽器要實現CompoundButton.OnCheckedChangeListener 下面是針對上面的測試例子自定義勾選監聽器的代碼：

package cn.edu.hznu.relativelayout_text1;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        CheckBox ck_system = (CheckBox) findViewById(R.id.ck_system);
        CheckBox ck_custom = (CheckBox) findViewById(R.id.ck_custom);
        ck_system.setOnCheckedChangeListener(this);
        ck_custom.setOnCheckedChangeListener(this);
        /**（1）、setChecked（true）:設置爲勾選狀態
         */
        ck_system.setChecked(true);
    }
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        String desc=String.format("你勾選了控件%d,狀態爲%b",buttonView.getId(),isChecked);
        Toast.makeText(MainActivity.this,desc,Toast.LENGTH_LONG).show();
    }
}

上面的代碼主要實現了當CheckBox勾選的時候，顯示此時的狀態情況。
效果：