首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CheckBox,选择Or不选,这是个问题!

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

作者头像
下码看花
发布2019-09-02 17:08:07
8970
发布2019-09-02 17:08:07
举报
文章被收录于专栏:AndroidStudio初识AndroidStudio初识
前言

前面我们讲过了 RadioButtonRadioGroup,利用单选按钮组的属性来实现仿微信底部 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

我们发现 CheckBoxRadioButton有相同的继承关系,所以 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》

实现效果如图所示:

这里默认设置 CheckBoxchecked属性为 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.pngic_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>

设置 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>

最终实现效果如图所示:

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-08-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 下码看花 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 基本使用
  • 实践
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档