第3章 中级控件 3.2 选择按钮

        本节介绍几个常用的特殊控制按钮，包括：如何使用复选框CheckBox及其勾选监听器、如何使用开关按钮Switch、如何借助状态列表图形实现仿iOS的开关按钮、如何使用单选按钮RadioButton和单选组RadioGroup及其选中监听器。

3.2.1    复选框 CheckBox

        在学习复选框之前，先了解一下CompoundButton类。在Android体系中，CompoundButton类是抽象的复合按钮，因为是抽象类，所以它不能直接使用。在实际开发中用的是CompoundButton的几个派生类，主要有复选框CheckBox、单选按钮RadioButton以及开关按钮Switch，这些派生类均可使用CompoundButton的属性和方法。加之CompoundButton本身继承了Button类，故以上几种按钮同时具备Button的属性和方法，它们之间的继承关系如图所示。

        CompoundButton在XML文件中主要使用下面两个属性。

        ●  checked：指定按钮的勾选状态，true表示勾选，false则表示未勾选。默认为未勾选。

        ●  button：指定左侧勾选图标的图形资源，如果不指定就使用系统的默认图标。

        CompoundButton在Java代码中主要使用下列4个方法。

        ●  setChecked：设置按钮的勾选状态。

        ●  setButtonDrawable：设置左侧勾选图标的图形资源。

        ●  setOnCheckedChangeListener：设置勾选状态变化的监听器。

        ●  isChecked：判断按钮是否勾选。

        复选框CheckBox是CompoundButton一个最简单的实现控件，点击复选框将它勾选，再次点击取消勾选。复选框对象调用setOnCheckedChangeListener方法设置勾选监听器，这样在勾选和取消勾选时就会触发监听器的勾选事件。

        接下来演示复选框的操作过程，首先编写活动页面的XML文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/main"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".CheckBoxActivity">
    <CheckBox
        android:id="@+id/ck_system"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:checked="false"
        android:text="这是系统的CheckBox" />
</LinearLayout>

        接着编写对应的Java代码，主要是如何处理勾选监听器，具体代码如下：

package com.example.chapter05;

import android.os.Bundle;
import android.widget.CheckBox;
import android.widget.CompoundButton;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

public class CheckBoxActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_check_box);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });
        // 从布局文件中获取名叫ck_system的复选框
        CheckBox ck_system = findViewById(R.id.ck_system);
        // 给ck_system设置勾选监听器，一旦用户点击复选框，就触发监听器的onCheckedChanged方法
        ck_system.setOnCheckedChangeListener(this);
    }

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        String desc = String.format("您%s了这个CheckBox",isChecked ? "勾选":"取消勾选");
        buttonView.setText(desc);
    }
}

        然后运行测试App，一开始的演示界面如图所示，此时复选框默认未勾选。

 

首次点击复选框，此时复选框的图标及文字均发生变化，如图所示；

再次点击复选框，此时复选框的图标及文字又发生变化，如图所示，可见先后触发了勾选与取消勾选事件。

3.2.2    开关按钮  Switch

        Switch是开关按钮，它像一个高级版本的CheckBox，在选中与取消选中时可展现的界面元素比复选框丰富。Switch控件新添加的XML属性说明如下：

        ●  textOn：设置右侧开启时的文本。

        ●  textOff：设置左侧关闭时的文本。

        ●  track：设置开关轨道的背景

        ●  thumb：设置开关标识的图标。

        虽然开关按钮是升级版的复选框，但它在实际开发中用得不多。原因之一是大家觉得Switch的默认界面不够大气，如图所示，小巧的开关图标显得有些拘谨；原因之二是大家觉得iPhone的界面很漂亮，无论用户还是客户，都希望App实现iOS那样的控件风格，于是iOS的开关按钮UISwitch就成了安卓开发者仿照的对象。

        现在要让Android实现类似iOS的开关按钮，主要思路是借助状态列表图形，首先创建一个图形专用的XML文件，给状态列表指定选中与未选中时的开关图标，代码如下：

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

        然后把CheckBox标签的background属性设置为@drawable/switch_selector，同时将button属性设置为@null。完整的CheckBox标签内容示例如下：

<CheckBox
    android:id="@+id/ck_status"
    android:layout_width="60dp"
    android:layout_height="30dp"
    android:background="@drawable/switch_selector"
    android:button="@null" />

        为什么这里修改background属性，而不直接修改button属性呢？因为button属性有局限，无论多大的图片，都只显示一个小小的图标，可是小小的图标一点都不大气，所以这里必须使用background属性，要它多大就能有多大，这样才够炫酷。

 

完整代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/main"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SwitchIosActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="left|center_vertical"
            android:text="仿iOS的开关："
            android:layout_marginLeft="20dp"
            android:textColor="@color/black"
            android:textSize="17sp" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_marginRight="20dp">

            <CheckBox
                android:id="@+id/ck_status"
                android:layout_width="60dp"
                android:layout_height="30dp"
                android:background="@drawable/switch_selector"
                android:button="@null" />
        </LinearLayout>
    </LinearLayout>

    <TextView
        android:id="@+id/tv_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="5dp"
        android:gravity="left"
        android:layout_marginLeft="20dp"
        android:textColor="@color/black"
        android:textSize="17sp" />

</LinearLayout>

package com.example.chapter05;

import android.os.Bundle;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.TextView;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

public class SwitchIosActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {
    private CheckBox ck_status; // 声明一个复选框对象
    private TextView tv_result; // 声明一个文本视图对象
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_switch_ios);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });
        // 从布局文件中获取名叫ck_status的开关按钮
        ck_status = findViewById(R.id.ck_status);
        // 从布局文件中获取名叫tv_result的文本视图
        tv_result = findViewById(R.id.tv_result);
        // 给开关按钮设置选择监听器，一旦用户点击它，就触发监听器的onCheckedChanged方法
        ck_status.setOnCheckedChangeListener(this);
        refreshResult(); // 刷新仿iOS按钮的开关说明
    }

    // 刷新仿iOS按钮的开关说明
    private void refreshResult() {
        String result = String.format("仿iOS开关的状态是%s",
                (ck_status.isChecked()) ? "开" : "关");
        tv_result.setText(result);
    }

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        refreshResult();
    }
}

3.2.3    单选按钮  RadioButton

        所谓单选按钮，指的是在一组按钮中选择其中一项，并且不能多选，这要求有个容器确定这组按钮的范围，这个容器便是单选组RadioGroup。单选组实质上是个布局，同一组RadioButton都要放在同一个RadioGroup节点下。RadioGroup提供了orientation属性指定下级控件的排列方向，该属性为horizontal时，单选按钮在水平方向排列；该属性为vertical时，单选按钮在垂直方向排列。RadioGroup下面除了RadioButton，还可以挂载其他子控件（如TextView、ImageView等）。如此看来，单选组相当于特殊的线性布局，它们主要有以下两个区别：

        （1）单选组多了管理单选按钮的功能，而线性布局不具备该功能。

        （2）如果不指定orientation属性，那么单选组默认垂直排列，而线性布局默认水平排列。

        下面是RadioRroup在Java代码中的3个常用方法。

        ●  check：选中指定资源编号的单选按钮。

        ●  getCheckedRadioButtonId：获取已选中单选按钮的资源编号。

        ●  setOnCheckedChangeListener：设置单选按钮勾选变化的监听器。

        与CheckBox不同的是，RadioButton默认未选中，点击后显示选中，但是再次点击不会取消选中，只有点击同组的其他单选按钮时，原来选中的单选按钮才会取消选中。另需注意，单选按钮的选中事件不是由RadioButton处理，而是由RadioGroup处理。

        接下来演示单选按钮的操作过程，首先编写活动页面的XML文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/main"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".RadioHorizontalActivity">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="请选择您的性别" />
    <RadioGroup
        android:id="@+id/rg_sex"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <RadioButton
            android:id="@+id/rb_male"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="男" />
        <RadioButton
            android:id="@+id/rb_female"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="女" />
    </RadioGroup>
    <TextView
        android:id="@+id/tv_sex"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

        接着编写对应的Java代码，主要是如何处理选中监听器，具体代码如下： 

package com.example.chapter05;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.widget.RadioGroup;
import android.widget.TextView;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

public class RadioHorizontalActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
    private TextView tv_sex;//声明一个文本视图对象
    @SuppressLint("MissingInflatedId")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_radio_horizontal);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });
        //从布局文件中获取名为tv_sex的文本视图
        tv_sex = findViewById(R.id.tv_sex);
        //从布局文件中获取名为rg_sex的单选组
        RadioGroup rg_sex = findViewById(R.id.rg_sex);
        //设置单选监听器，一旦点击组内的单选按钮，就触发监听器的onCheckedChanged方法
        rg_sex.setOnCheckedChangeListener(this);
    }

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        if (checkedId==R.id.rb_male){
            tv_sex.setText("哇哦，你是个帅气的男孩");
        } else if (checkedId==R.id.rb_female) {
            tv_sex.setText("哇哦，你是个漂亮的女孩");
        }
    }
}

        然后运行测试App，一开始的演示界面如图所示，此时两个单选按钮均未选中。

 

先点击左边的单选按钮，此时左边按钮显示选中状态，如图所示；

再点击右边的单选按钮，此时右边按钮显示选中状态，同时左边按钮取消选中，如图所示；可见果然实现了组内只能选中唯一按钮的单选功能。