Android中级控件-选择按钮

一、复选框CheckBox

简单使用
系统复选框和自定义复选框
layout/activity_check_box.xml

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".CheckBoxActivity">

//系统复选框
    <CheckBox
        android:id="@+id/ck_system"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:text="这是系统的CheckBox"
        />
// 自定义复选框
    <CheckBox
        android:id="@+id/ck_custom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:button="@drawable/checkbox_selector"
        android:checked="true"
        android:padding="5dp"
        android:text="这个CheckBox换了图标(选中是一个图标，未选中是另一个)"
        />

</LinearLayout>

自定义复选框样式
drawable/checkbox_selector.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/checkbox_yes"/>
    <item android:state_checked="false" android:drawable="@drawable/checkbox_no"/>

</selector>

运行效果：

设置复选框的勾选监听器
CompoundButton.OnCheckedChangeListener(CompoundButton 是CheckBox的父类)

public class CheckBoxActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {

    private CheckBox ck_system;
    private CheckBox ck_custom;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_check_box);

        CheckBox ck_system = findViewById(R.id.ck_system);
        CheckBox ck_custom = findViewById(R.id.ck_custom);

        ck_system.setOnCheckedChangeListener(this);
        ck_custom.setOnCheckedChangeListener(this);
    }

    // 监听checbox, CompoundButton 为CheckBox的父类
    // buttonView为当前checkbox
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        String format = String.format("您%s了当前复选框", isChecked ? "勾选" : "取消勾选");
        buttonView.setText(format);
    }
}

运行效果：

二、开关按钮Switch

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

• textOn:设置右侧开启时的文本
• textOff:设置左侧开启时的文本
• track:设置开关轨道的背景
  thumb:设置开关表示的图标

实现：
布局：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".SwitchDefaultActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="Switch开关"
            android:layout_gravity="start"
            />

        <Switch
            android:id="@+id/sw_status"
            android:layout_width="80dp"
            android:layout_height="30dp"
            android:padding="5dp"
            android:layout_gravity="end"
            />

    </LinearLayout>

    <TextView
        android:id="@+id/tv_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_gravity="start"
        />

</LinearLayout>

效果展示：

监听按钮switch开关状态：

public class SwitchDefaultActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {


    private Switch sw_status;
    private TextView tv_result;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_switch_default);

        sw_status = findViewById(R.id.sw_status);
        tv_result = findViewById(R.id.tv_result);

        sw_status.setOnCheckedChangeListener(this);

    }

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        String format = String.format("Switch按钮的状态是%s", isChecked ? "开" : "关");
        tv_result.setText(format);
    }
}

效果展示：

仿IOS的开关按钮：
借助状态列表图形StateListDrawable，分别定义已选中时"开"图形，以及未选中时”关“图形。
然后把CheckBox控件的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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".SwitchDefaultActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:padding="5dp"
            android:text="Switch开关"
            android:layout_gravity="start"
            />

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

    </LinearLayout>

    <TextView
        android:id="@+id/tv_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_gravity="start"
        />

</LinearLayout>

switch_selector.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>

业务代码：

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);
        setContentView(R.layout.activity_switch_iosactivity);

        ck_status = findViewById(R.id.ck_status);
        tv_result = findViewById(R.id.tv_result);

        ck_status.setOnCheckedChangeListener(this);
    }

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        String format = String.format("仿IOS按钮的状态是%s", isChecked ? "开" : "关");
        tv_result.setText(format);
    }
}

效果展示：

三、单选按钮RadioButton

单选按钮要在一组按钮中选择其中一项，并且不能多选，这要求有个容器确定这组按钮的范围，这个容器便是单选组RadioGroup。
RadioGroup实质上是个布局，同一组RadioButton都要放在同一个RadioGroup节点下。除了RadioButton，也允许放置其他控件。

实现：
布局：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".SwitchDefaultActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="请选择您的性别"
        />

    <RadioGroup
        android:id="@+id/rg_gender"
        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_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="xxxx"
        />

</LinearLayout>

public class RadioHorizontalActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {

    RadioGroup rg_gender;
    TextView tv_result;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_radio_horizontal);

        rg_gender = findViewById(R.id.rg_gender);
        tv_result = findViewById(R.id.tv_result);

        rg_gender.setOnCheckedChangeListener(this);
    }

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        switch (checkedId) {
            case R.id.rb_male:
                tv_result.setText("哇哦，你是一个帅气的男孩");
                break;
            case R.id.rb_female:
                tv_result.setText("哇哦，你是一个漂亮的女孩");
                break;
        }
    }
}