CheckBox選擇Or不選，是個問題！

CheckBox選擇Or不選，是個問題！

前言

前面咱們講過了RadioButton與RadioGroup，利用單選按鈕組的屬性來實現仿微信底部Tab切換的效果。對比記憶一下，今天咱們來說解第二個相似的控件CheckBox，按照慣例先看下它的類繼承關係以下：

public class CheckBox extends CompoundButton java.lang.Object ↳ android.view.View ↳ android.widget.TextView ↳ android.widget.Button ↳ android.widget.CompoundButton ↳ android.widget.CheckBox 複製代碼

咱們發現CheckBox與RadioButton有相同的繼承關係，因此CheckBox也是一個具備選中效果的控件，一般咱們稱它爲**複選框**。

基本使用

先來展現一段代碼，展現下效果。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent">
	
    <CheckBox app:layout_constraintHorizontal_chainStyle="packed" android:id="@+id/cb_hobby" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" app:layout_constraintRight_toLeftOf="@id/tv_hobby" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" />

    <TextView android:id="@+id/tv_hobby" android:layout_width="wrap_content" android:layout_marginLeft="5dp" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toRightOf="@id/cb_hobby" android:text="游泳" app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
複製代碼

這裏咱們使用了前面博文內容講到的ConstraintLayout，實現了CheckBox和TextView一塊兒居中整個父佈局的效果。若是你還不是很熟悉這個約束佈局如何使用，能夠查看以前博文內容《佈局"大殺器"—ConstraintLayout》

實現效果如圖所示：

這裏默認設置CheckBox的checked屬性爲true，則表示默認選中，那麼在頁面中如何獲取這個控件是否被選中呢？固然是經過設置監聽器，這裏附上代碼：

/** * 演示CheckBox等用法 * * @author xmkh */
public class CheckActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_check);
        CheckBox cbHobby = findViewById(R.id.cb_hobby);
        final TextView tvHobby = findViewById(R.id.tv_hobby);
        //設置複選框的勾選狀態監聽器
        cbHobby.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean isChecked) {
                tvHobby.setText(isChecked ? "已選中" : "未選中");
            }
        });
    }
}

複製代碼

實現效果如圖所示：

實踐

實際效果中，咱們通常不會使用自帶的樣式，一樣的咱們參照RadioButton的方式來給它設置一個UI樣式。一般在註冊界面總會看到是否贊成《用戶註冊協議》的複選框，若是要實現下圖的樣式，咱們怎麼作呢？

咱們來仿照這個效果實現一下界面佈局。

咱們準備選中和未選中2個圖片ic_login_agreement_check.png和ic_login_agreement_uncheck.png

在res/drawable/文件夾下新建一個樣式文件，selector_cb_login_agreement.xml， 附上樣式文件代碼

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@mipmap/ic_login_agreement_check" android:state_checked="true"/>
 <item android:drawable="@mipmap/ic_login_agreement_uncheck" />
</selector>
複製代碼

設置CheckBox的Button樣式，完整代碼以下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".RegisterCheckActivity">
	<!--主要設置CheckBox的button樣式爲自定義的selector_cb_login_agreement便可-->
    <CheckBox android:id="@+id/cb_login_agreement" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:button="@drawable/selector_cb_login_agreement" app:layout_constraintEnd_toStartOf="@+id/tv_login_agreement" app:layout_constraintHorizontal_chainStyle="packed" app:layout_constraintStart_toStartOf="parent" />

    <TextView android:textColor="#A6600C" android:id="@+id/tv_login_agreement" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="我已閱讀並贊成《XX用戶註冊協議》" android:textSize="18sp" app:layout_constraintBottom_toBottomOf="@id/cb_login_agreement" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@id/cb_login_agreement" app:layout_constraintTop_toTopOf="@id/cb_login_agreement" />
</android.support.constraint.ConstraintLayout>
複製代碼

最終實現效果如圖所示：

結語

今天咱們的CheckBox分享就到此結束啦，但願各位小夥伴在學習Android基礎控件的時候，可以觸類旁通，多思考、多練習。堅持下去，相信你必定會從小白變成大牛的！也歡迎各位小夥伴加入咱們的微信技術交流羣，在公衆號中回覆微信羣，就能夠加入其中，也能夠在公衆號中回覆視頻，裏面有一些初學者視頻哦~

PS:若是還有未看懂的小夥伴，歡迎加入咱們的QQ技術交流羣：892271582，裏面有各類大神回答小夥伴們遇到的問題，咱們的微信羣立刻也將要和你們見面啦，屆時但願你們踊躍加入其中~~