【Android开发笔记】——选项组件 Radio Button和 CheckBox 的使用和监听

客官°小女子只卖身不卖艺 2022-11-17 14:40 432阅读 0赞

既然是 “组件”，那么其实 Radio Button和Check Box相比于 Button 也基本上是大同小异。实现起来也非常简单。但重点是后面如何监听：即我们如何知道用户是否选择了这个选项。

【UI实现 —— Radio Button】  
首先，我们打算在主页面设置一个 Button，用户点击该 Button 之后就进入到 Radio Button的演示界面。具体Button的跳转在前一篇博客中有详细介绍，本文主要针对 Radio Button 和 Check Box两种组件的解析。

假设我们现在已经完成了点击 Button 跳转到新页面的步骤，那么我们就需要新建一个空的 Activity.

在新产生的 .xml 文件下我们就可以开始写 Radio Button的UI了：

在上面的程序中，和之前 Button 组件有所不同，我们首先写了一个 RadioGroup 框架，这是为什么呢？

因为我们知道 Radio Button一般是单选的，如果你只是在这个 .xml 文件里面写了好几个 RadioButton 组件的话，那么其实运行起来就是每一个 RadioButton 都可以被选中，这明显不符合我们设计的希望。因此，我们就需要把一些 Radio Button 构建成一个组，那么在这个组里面，我们一次只能选取一个 Radio Button。

至此，我们就完成了 Radio Button的设计。至于监听我们会在本文最后给出解释。

--------------------

下面是CheckBox的实现：  
在UI上还是和 Radio Button差不多的。我们还行秉持这样的思路：在主界面建立一个Button，点击该 Button就会跳转到 CheckBox的演示界面。

假设我们现在已经完成了点击 Button 跳转到新页面的步骤，那么我们就需要新建一个空的 Activity.

在新产生的 .xml 文件下我们就可以开始写 CheckBox 的UI了：

在手机上运行就是这样的：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4NjQ3Mw_size_16_color_FFFFFF_t_70]选中的效果是这样的：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4NjQ3Mw_size_16_color_FFFFFF_t_70 1]

这个未选中和选中的效果是这一版本的Android自带的，那么如果我们想要换称自己的 icon 怎么办呢？

首先我们需要在百度上找到一张未选择效果的图片和一张已经选中的效果图，我选择的是：  
![在这里插入图片描述][2021041013495118.png_pic_center]

（PS: 我们需要自己修改一下分辨率）  
接下来，我们在 drawable 下新建一个文件夹专门用来存图片：  
![在这里插入图片描述][20210410135135174.png_pic_center]  
下面我们在 drawable 下新建一个 .xml 文件，用来控制选中的状态和未选中的状态：

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:state_checked="false"  android:drawable="@drawable/uncheck"/> 
        <item android:state_checked="true"  android:drawable="@drawable/check"/>
    </selector>

其中，

说明如果点击的状态没有改变，即 “false”，那么就显示 uncheck图片。

因此，checkbox.xml的完整UI代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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=".CheckBoxActivity"
        android:padding="15dp">
    
        <TextView
            android:id="@+id/tv_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="你会哪些编程语言？"
            android:textSize="20sp"
            />
    
        <CheckBox
            android:id="@+id/cb_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="C++"
            android:textSize="20sp"
            android:layout_below="@+id/tv_1"
            android:layout_marginTop="10dp"/>
    
        <CheckBox
            android:id="@+id/cb_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Java"
            android:textSize="20sp"
            android:layout_below="@+id/cb_1"
            />
    
        <CheckBox
            android:id="@+id/cb_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Python"
            android:textSize="20sp"
            android:layout_below="@+id/cb_2"
            />
    
        <CheckBox
            android:id="@+id/cb_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Matlab"
            android:textSize="20sp"
            android:layout_below="@+id/cb_3"
            />
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_below="@+id/cb_4">
    
            <TextView
                android:id="@+id/tv_cb_1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="你的兴趣:"
                android:textSize="20sp"
                android:layout_marginTop="20dp"
                />
    
            <CheckBox
                android:id="@+id/cb_5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="5G/6G通信"
                android:textSize="20sp"
                android:layout_marginTop="10dp"
                android:button="@drawable/bg_checkbox"
                android:paddingLeft="10dp"
                />
    
            <CheckBox
                android:id="@+id/cb_6"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="射频微波技术"
                android:textSize="20sp"
                android:button="@drawable/bg_checkbox"
                android:paddingLeft="10dp"
                />
    
            <CheckBox
                android:id="@+id/cb_7"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="嵌入式开发"
                android:textSize="20sp"
                />
    
        </LinearLayout>
    
    </RelativeLayout>

演示效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4NjQ3Mw_size_16_color_FFFFFF_t_70 2]

我们可以看到 5G/6G通信和射频微波技术两个选项的图标已经变成了我们想要的。

最后，就是我们一开始想讨论的问题—— 如何监听用户到底有没有选择这个选项？

那么我们就要去 CheckBox.java里面写函数了：

package com.example.helloworld;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.os.Bundle;
    import android.view.View;
    import android.widget.CheckBox;
    import android.widget.CompoundButton;
    import android.widget.RadioGroup;
    import android.widget.Toast;
    
    public class CheckBoxActivity extends AppCompatActivity {
        
    
        //在checkbox里面,如何知道用户选中了那写选项呢?就需要在次文件下监听
        private CheckBox mcb_1, mcb_2;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_check_box);
    
            mcb_1 = (CheckBox) findViewById(R.id.cb_1);
            mcb_2 = (CheckBox) findViewById(R.id.cb_2);
    
            //下面开始设置监听事件
            mcb_1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener(){
        
                @Override
                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        
                    Toast.makeText(CheckBoxActivity.this, isChecked?"C++被选中":"C++没有选中", Toast.LENGTH_SHORT).show();
                }
            });
    
            mcb_2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener(){
        
                @Override
                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        
                    Toast.makeText(CheckBoxActivity.this, isChecked?"Java被选中":"Java没有选中", Toast.LENGTH_SHORT).show();
                }
            });
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4NjQ3Mw_size_16_color_FFFFFF_t_70]: /images/20221022/abab23d70ffe47ae8c0a0babe4aa1683.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4NjQ3Mw_size_16_color_FFFFFF_t_70 1]: /images/20221022/57068f8098114f10879cce0b9d157641.png
[2021041013495118.png_pic_center]: /images/20221022/ad53e57b2a174ed7b06492302462160a.png
[20210410135135174.png_pic_center]: /images/20221022/b499feae328f482ab59524c002efa70b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4NjQ3Mw_size_16_color_FFFFFF_t_70 2]: /images/20221022/9bc6f5fcbe584751922e340631db39e3.png