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>

最终实现效果如图所示：