CheckBox选择Or不选,是个问题!

CheckBox选择Or不选,是个问题!

前言

前面咱们讲过了RadioButtonRadioGroup,利用单选按钮组的属性来实现仿微信底部Tab切换的效果。对比记忆一下,今天咱们来说解第二个相似的控件CheckBox,按照惯例先看下它的类继承关系以下:php

public class CheckBox extends CompoundButton java.lang.Objectandroid.view.Viewandroid.widget.TextViewandroid.widget.Buttonandroid.widget.CompoundButtonandroid.widget.CheckBox 复制代码

咱们发现CheckBoxRadioButton有相同的继承关系,因此CheckBox也是一个具备选中效果的控件,一般咱们称它为**复选框**。java

基本使用

先来展现一段代码,展现下效果。android

<?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》微信

实现效果如图所示:app

img

这里默认设置CheckBoxchecked属性为true,则表示默认选中,那么在页面中如何获取这个控件是否被选中呢?固然是经过设置监听器,这里附上代码:ide

/** * 演示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 ? "已选中" : "未选中");
            }
        });
    }
}

复制代码

实现效果如图所示:布局

img

实践

实际效果中,咱们通常不会使用自带的样式,一样的咱们参照RadioButton的方式来给它设置一个UI样式。一般在注册界面总会看到是否赞成《用户注册协议》的复选框,若是要实现下图的样式,咱们怎么作呢?学习

img

咱们来仿照这个效果实现一下界面布局。spa

咱们准备选中和未选中2个图片ic_login_agreement_check.pngic_login_agreement_uncheck.pngcode

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>
复制代码

设置CheckBoxButton样式,完整代码以下:

<?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>
复制代码

最终实现效果如图所示:

img

结语

今天咱们的CheckBox分享就到此结束啦,但愿各位小伙伴在学习Android基础控件的时候,可以触类旁通,多思考、多练习。坚持下去,相信你必定会从小白变成大牛的!也欢迎各位小伙伴加入咱们的微信技术交流群,在公众号中回复微信群,就能够加入其中,也能够在公众号中回复视频,里面有一些初学者视频哦~

PS:若是还有未看懂的小伙伴,欢迎加入咱们的QQ技术交流群:892271582,里面有各类大神回答小伙伴们遇到的问题,咱们的微信群立刻也将要和你们见面啦,届时但愿你们踊跃加入其中~~