经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » Android » 查看文章
Android控件与布局——基础控件RadioButton
来源：cnblogs　　作者：yooooooo　　时间：2020/12/8 8:44:55　　对本文有异议

今天，我们的主题是基础控件RadioButton。在开始之前，我们还是以官方文档为开端来开始我们的讲解，下面是Android文档中对RadioButton的简介：

看过上一篇文章的应该可以了解到，这个和我们的CheckBox是十分类似的，不同的点在于，这个控件可以由非选中状态通过点击事件转为选中状态，但是不能通过点击实现逆向的状态转换，一个默认样式RadioButton控件的非选中和选中状态如下：

image

其组成和CheckBox一样，我们同样可以分别对其中的字体和Button进行设置，实现达到和CheckBox一样的效果。在上面我们在简介中得知，这个控件能通过点击事件实现的效果如下（不能逆向改变状态）：

image

接下来，我们对其基本属性进行设置，改变一下它的样式：

image

下面我们就结合一个小例子来实际的应用一下，这个小例子就是实现多项单选功能，运行的效果如下：

image

布局文件与控制逻辑如下：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:orientation="vertical"
  8.     tools:context="aoto.com.commonwidgetandlayout.basic_widget.radioButton.RadioButtonActivity">
  9.  
  10. <TextView
  11.     android:layout_marginTop="20dp"
  12.     android:textSize="20sp"
  13.     android:text="请选择您最爱的职业："
  14.     android:layout_width="match_parent"
  15.     android:layout_height="wrap_content" />
  16.     <RadioButton
  17.         android:textSize="25sp"
  18.         android:id="@+id/radio_button1"
  19.         android:layout_width="wrap_content"
  20.         android:layout_height="wrap_content"
  21.         android:textColor="@color/colorPrimaryDark"
  22.         android:layout_marginStart="16dp"
  23.         android:layout_marginTop="20dp"
  24.         android:text="程序员" />
  25.  
  26.     <RadioButton
  27.         android:textSize="25sp"
  28.         android:id="@+id/radio_button2"
  29.         android:layout_width="wrap_content"
  30.         android:layout_height="wrap_content"
  31.         android:textColor="@color/colorPrimaryDark"
  32.         android:layout_marginStart="16dp"
  33.         android:layout_marginTop="11dp"
  34.         android:text="政治家" />
  35.     <RadioButton
  36.         android:textSize="25sp"
  37.         android:id="@+id/radio_button3"
  38.         android:layout_width="wrap_content"
  39.         android:layout_height="wrap_content"
  40.         android:textColor="@color/colorPrimaryDark"
  41.         android:layout_marginStart="16dp"
  42.         android:layout_marginTop="11dp"
  43.         android:text="富二代" />
  44. </LinearLayout>
  1. package aoto.com.commonwidgetandlayout.basic_widget.radioButton;
  2.  
  3. import android.graphics.Color;
  4. import android.support.v7.app.AppCompatActivity;
  5. import android.os.Bundle;
  6. import android.util.Log;
  7. import android.widget.CompoundButton;
  8. import android.widget.RadioButton;
  9.  
  10. import aoto.com.commonwidgetandlayout.R;
  11.  
  12. /**
  13.  * @author why
  14.  * @date 2019-5-13 20:44:28
  15.  */
  16. public class RadioButtonActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {
  17.  
  18.     private static final String TAG = "RadioButtonActivityWhy";
  19.     RadioButton radioButton1;
  20.     RadioButton radioButton2;
  21.     RadioButton radioButton3;
  22.     @Override
  23.     protected void onCreate(Bundle savedInstanceState) {
  24.         super.onCreate(savedInstanceState);
  25.         setContentView(R.layout.activity_radio_button);
  26.         radioButton1=findViewById(R.id.radio_button1);
  27.         radioButton2=findViewById(R.id.radio_button2);
  28.         radioButton3=findViewById(R.id.radio_button3);
  29.  
  30.         radioButton1.setOnCheckedChangeListener(this);
  31.         radioButton2.setOnCheckedChangeListener(this);
  32.         radioButton3.setOnCheckedChangeListener(this);
  33.     }
  34.  
  35.     @Override
  36.     public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
  37.         if(isChecked){
  38.             disableOthers(buttonView.getId());
  39.             Log.e(TAG, "您最喜欢的职业是: "+buttonView.getText().toString() );
  40.             buttonView.setTextColor(getResources().getColor(R.color.colorPrimary));
  41.         }
  42.         else {
  43.             buttonView.setTextColor(Color.BLACK);
  44.         }
  45.     }
  46.  
  47.     private void disableOthers(int viewId) {
  48.         if(R.id.radio_button1!=viewId&&radioButton1.isChecked()){
  49.             radioButton1.setChecked(false);
  50.         }
  51.         if(R.id.radio_button2!=viewId&&radioButton2.isChecked()){
  52.             radioButton2.setChecked(false);
  53.         }
  54.         if(R.id.radio_button3!=viewId&&radioButton3.isChecked()){
  55.             radioButton3.setChecked(false);
  56.         }
  57.     }
  58. }

可见，我们为了实现一个单选功能做了很多逻辑控制，而这样的场景又非常多，没有关系，我们接着官方文档关于对其的介绍继续向下看：

  1. * <p>
  2. * Radio buttons are normally used together in a
  3. * {@link android.widget.RadioGroup}. When several radio buttons live inside
  4. * a radio group, checking one radio button unchecks all the others.</p>

说这个RadioButton经常会结合RadioGroup一起使用，实现的功能正是我们上面所要实现的多项单选功能的操作。那下面就来看看如何使用RadioGroup实现上述例子的功能：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:orientation="vertical"
  8.     tools:context="aoto.com.commonwidgetandlayout.basic_widget.radioButton.RadioButton2Activity">
  9.  
  10.     <TextView
  11.         android:layout_marginLeft="40dp"
  12.         android:layout_width="match_parent"
  13.         android:layout_height="wrap_content"
  14.         android:layout_marginTop="20dp"
  15.         android:text="请选择您最爱的职业："
  16.         android:textSize="20sp" />
  17.  
  18.     <RadioGroup
  19.         android:id="@+id/job_list"
  20.         android:layout_width="match_parent"
  21.         android:layout_height="wrap_content"
  22.         android:gravity="center_horizontal">
  23.  
  24.         <RadioButton
  25.             android:id="@+id/radio_button1"
  26.             android:layout_width="wrap_content"
  27.             android:layout_height="wrap_content"
  28.             android:layout_marginStart="16dp"
  29.             android:layout_marginTop="20dp"
  30.             android:text="程序员"
  31.             android:textColor="@color/colorPrimaryDark"
  32.             android:textSize="25sp" />
  33.  
  34.         <RadioButton
  35.             android:id="@+id/radio_button2"
  36.             android:layout_width="wrap_content"
  37.             android:layout_height="wrap_content"
  38.             android:layout_marginStart="16dp"
  39.             android:layout_marginTop="11dp"
  40.             android:text="政治家"
  41.             android:textColor="@color/colorPrimaryDark"
  42.             android:textSize="25sp" />
  43.  
  44.         <RadioButton
  45.             android:id="@+id/radio_button3"
  46.             android:layout_width="wrap_content"
  47.             android:layout_height="wrap_content"
  48.             android:layout_marginStart="16dp"
  49.             android:layout_marginTop="11dp"
  50.             android:text="富二代"
  51.             android:textColor="@color/colorPrimaryDark"
  52.             android:textSize="25sp" />
  53.     </RadioGroup>
  54.     <Button
  55.         android:id="@+id/clear_all"
  56.         android:text="都不喜欢"
  57.         android:onClick="clearAll"
  58.         android:layout_width="match_parent"
  59.         android:layout_height="wrap_content" />
  60. </LinearLayout>

说这个RadioButton经常会结合RadioGroup一起使用，实现的功能正是我们上面所要实现的多项单选功能的操作。那下面就来看看如何使用RadioGroup实现上述例子的功能：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:orientation="vertical"
  8.     tools:context="aoto.com.commonwidgetandlayout.basic_widget.radioButton.RadioButton2Activity">
  9.  
  10.     <TextView
  11.         android:layout_marginLeft="40dp"
  12.         android:layout_width="match_parent"
  13.         android:layout_height="wrap_content"
  14.         android:layout_marginTop="20dp"
  15.         android:text="请选择您最爱的职业："
  16.         android:textSize="20sp" />
  17.  
  18.     <RadioGroup
  19.         android:id="@+id/job_list"
  20.         android:layout_width="match_parent"
  21.         android:layout_height="wrap_content"
  22.         android:gravity="center_horizontal">
  23.  
  24.         <RadioButton
  25.             android:id="@+id/radio_button1"
  26.             android:layout_width="wrap_content"
  27.             android:layout_height="wrap_content"
  28.             android:layout_marginStart="16dp"
  29.             android:layout_marginTop="20dp"
  30.             android:text="程序员"
  31.             android:textColor="@color/colorPrimaryDark"
  32.             android:textSize="25sp" />
  33.  
  34.         <RadioButton
  35.             android:id="@+id/radio_button2"
  36.             android:layout_width="wrap_content"
  37.             android:layout_height="wrap_content"
  38.             android:layout_marginStart="16dp"
  39.             android:layout_marginTop="11dp"
  40.             android:text="政治家"
  41.             android:textColor="@color/colorPrimaryDark"
  42.             android:textSize="25sp" />
  43.  
  44.         <RadioButton
  45.             android:id="@+id/radio_button3"
  46.             android:layout_width="wrap_content"
  47.             android:layout_height="wrap_content"
  48.             android:layout_marginStart="16dp"
  49.             android:layout_marginTop="11dp"
  50.             android:text="富二代"
  51.             android:textColor="@color/colorPrimaryDark"
  52.             android:textSize="25sp" />
  53.     </RadioGroup>
  54.     <Button
  55.         android:id="@+id/clear_all"
  56.         android:text="都不喜欢"
  57.         android:onClick="clearAll"
  58.         android:layout_width="match_parent"
  59.         android:layout_height="wrap_content" />
  60. </LinearLayout>

逻辑部分：

  1. package aoto.com.commonwidgetandlayout.basic_widget.radioButton;
  2.  
  3. import android.support.v7.app.AppCompatActivity;
  4. import android.os.Bundle;
  5. import android.util.Log;
  6. import android.view.View;
  7. import android.widget.RadioButton;
  8. import android.widget.RadioGroup;
  9.  
  10. import aoto.com.commonwidgetandlayout.R;
  11.  
  12. /**
  13.  * @author why
  14.  * @date 2019-5-13 21:43:42
  15.  */
  16. public class RadioButton2Activity extends AppCompatActivity {
  17.  
  18.     private static final String TAG = "RadioButton2ActivityWhy";
  19.     RadioGroup radioGroup;
  20.     RadioButton radioButton1;
  21.     RadioButton radioButton2;
  22.     RadioButton radioButton3;
  23.     @Override
  24.     protected void onCreate(Bundle savedInstanceState) {
  25.         super.onCreate(savedInstanceState);
  26.         setContentView(R.layout.activity_radio_button2);
  27.         radioGroup=findViewById(R.id.job_list);
  28.         radioButton1=findViewById(R.id.radio_button1);
  29.         radioButton2=findViewById(R.id.radio_button2);
  30.         radioButton3=findViewById(R.id.radio_button3);
  31.         radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
  32.             @Override
  33.             public void onCheckedChanged(RadioGroup group, int checkedId) {
  34.                 getYourFavorite(checkedId);
  35.             }
  36.         });
  37.     }
  38.  
  39.     /**
  40.      * 根据ID,执行相应的逻辑
  41.      * @param buttonId
  42.      */
  43.     private void getYourFavorite(int buttonId){
  44.         switch (buttonId){
  45.             case R.id.radio_button1:
  46.                 if(radioButton1.isChecked()) {
  47.                     Log.e(TAG, "你最爱的职业是: " + radioButton1.getText().toString());
  48.                 }
  49.                 break;
  50.             case R.id.radio_button2:
  51.                 if(radioButton2.isChecked()) {
  52.                     Log.e(TAG, "你最爱的职业是: " + radioButton2.getText().toString());
  53.                 }
  54.                 break;
  55.             case R.id.radio_button3:
  56.                 if(radioButton3.isChecked()) {
  57.                     Log.e(TAG, "你最爱的职业是: " + radioButton3.getText().toString());
  58.                 }
  59.                 break;
  60.         }
  61.     }
  62.  
  63.     /**
  64.      * 清除选型
  65.      * @param view
  66.      */
  67.     public void clearAll(View view){
  68.       radioGroup.clearCheck();
  69.     }
  70. }

在布局部分，我们只需要把之前放置在布局中的RadioButton放置在RadioGroup中即可：

  1. <RadioGroup
  2.         android:id="@+id/job_list"
  3.         android:layout_width="match_parent"
  4.         android:layout_height="wrap_content"
  5.         android:gravity="center_horizontal">
  6.  
  7.         <RadioButton
  8.             android:id="@+id/radio_button1"
  9.             android:layout_width="wrap_content"
  10.             android:layout_height="wrap_content"
  11.             android:layout_marginStart="16dp"
  12.             android:layout_marginTop="20dp"
  13.             android:text="程序员"
  14.             android:textColor="@color/colorPrimaryDark"
  15.             android:textSize="25sp" />
  16.  
  17.         <RadioButton
  18.             android:id="@+id/radio_button2"
  19.             android:layout_width="wrap_content"
  20.             android:layout_height="wrap_content"
  21.             android:layout_marginStart="16dp"
  22.             android:layout_marginTop="11dp"
  23.             android:text="政治家"
  24.             android:textColor="@color/colorPrimaryDark"
  25.             android:textSize="25sp" />
  26.  
  27.         <RadioButton
  28.             android:id="@+id/radio_button3"
  29.             android:layout_width="wrap_content"
  30.             android:layout_height="wrap_content"
  31.             android:layout_marginStart="16dp"
  32.             android:layout_marginTop="11dp"
  33.             android:text="富二代"
  34.             android:textColor="@color/colorPrimaryDark"
  35.             android:textSize="25sp" />
  36.     </RadioGroup>

逻辑部分我们首先为RadioGroup设置状态变化监听：

  1. radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
  2.             @Override
  3.             public void onCheckedChanged(RadioGroup group, int checkedId) {
  4.                 getYourFavorite(checkedId);
  5.             }
  6.         });

根据选择的RadioButton的ID执行具体的逻辑代码：

  1.  /**
  2.      * 根据ID,执行相应的逻辑
  3.      * @param buttonId
  4.      */
  5.     private void getYourFavorite(int buttonId){
  6.         switch (buttonId){
  7.             case R.id.radio_button1:
  8.                 if(radioButton1.isChecked()) {
  9.                     Log.e(TAG, "你最爱的职业是: " + radioButton1.getText().toString());
  10.                 }
  11.                 break;
  12.             case R.id.radio_button2:
  13.                 if(radioButton2.isChecked()) {
  14.                     Log.e(TAG, "你最爱的职业是: " + radioButton2.getText().toString());
  15.                 }
  16.                 break;
  17.             case R.id.radio_button3:
  18.                 if(radioButton3.isChecked()) {
  19.                     Log.e(TAG, "你最爱的职业是: " + radioButton3.getText().toString());
  20.                 }
  21.                 break;
  22.         }
  23.     }

注意到在这里我们只实现了数据的获取（RadioButton的文本内容），RadioGroup中的RadioButton之间的状态管理（单选）是RadioGroup内部自己管理的，这为我们节省很多的开发逻辑，也是我们用它的主要目的。此外，这里，我们还可以通过调用clearCheck()实现清除选择状态。

  1.  /**
  2.      * 根据ID,执行相应的逻辑
  3.      * @param buttonId
  4.      */
  5.     private void getYourFavorite(int buttonId){
  6.         switch (buttonId){
  7.             case R.id.radio_button1:
  8.                 if(radioButton1.isChecked()) {
  9.                     Log.e(TAG, "你最爱的职业是: " + radioButton1.getText().toString());
  10.                 }
  11.                 break;
  12.             case R.id.radio_button2:
  13.                 if(radioButton2.isChecked()) {
  14.                     Log.e(TAG, "你最爱的职业是: " + radioButton2.getText().toString());
  15.                 }
  16.                 break;
  17.             case R.id.radio_button3:
  18.                 if(radioButton3.isChecked()) {
  19.                     Log.e(TAG, "你最爱的职业是: " + radioButton3.getText().toString());
  20.                 }
  21.                 break;
  22.         }
  23.     }

注意到在这里我们只实现了数据的获取（RadioButton的文本内容），RadioGroup中的RadioButton之间的状态管理（单选）是RadioGroup内部自己管理的，这为我们节省很多的开发逻辑，也是我们用它的主要目的。此外，这里，我们还可以通过调用clearCheck()实现清除选择状态。

  1. radioGroup.clearCheck()

运行结果如下所示：

image

同样，如果你觉得RadioButton中的Button样式不好看，你可以自定义一种，这里，我们还是选用上一篇中的样式代码，执行效果如下：

image

修改按钮样式是通过android:button属性：

  1.  <RadioButton
  2.             android:id="@+id/radio_button1"
  3.             android:button="@drawable/check_box_back"
  4.             android:layout_width="wrap_content"
  5.             android:layout_height="wrap_content"
  6.             android:layout_marginStart="16dp"
  7.             android:layout_marginTop="20dp"
  8.             android:text="程序员"
  9.             android:textColor="@color/colorPrimaryDark"
  10.             android:textSize="25sp" />

其中的check_box_back.xml代码如下：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <item android:state_checked="true" android:drawable="@drawable/chosen"></item>
  4.     <item android:state_checked="false" android:drawable="@drawable/non_chosen_big"></item>
  5. </selector>

该控件的开源项目在网上找了一下，感觉没有什么比较好的，主要是因为它的封装程度已经很高了，如果只是想改动一下显示样式和逻辑，我们自己完全可以实现。好了，关于RadioButton到这里的简单介绍就介绍了。

原文链接：http://www.cnblogs.com/linhaostudy/p/14068975.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Android热门文章

  • 安卓虚拟定位实现与反作弊思路
  • Android之Activity启动流程详解（基于api28）
  • MAUI开发Android程序使PDA扫码广播消息转发至Web页面
  • android开发技巧杂谈
  • 高通CSR8675蓝牙音频芯片介绍
  • Android Studio列表用法之一：ListView图文列表显示（实例）
  • 分析Android 11.0Settings源码之主界面加载
  • 联发科MT6731 4G智能功能手机处理器芯片介绍
  • android 请求接口报错 org.apache.http.conn.HttpHostConnectException: Connection to http://192.168.1.90:9090 refused
  • GSYVideoPlayer使用记录

    • Android推荐文章

  • Jetpack Compose(7)——触摸反馈
  • 安卓开发日志采集和分析面面谈
  • Android桌面Launcher源码浅析
  • Android启动过程-万字长文(Android14)
  • Android Studio制作简单登录界面
  • FFmpeg开发笔记（九）Linux交叉编译Android的x265库
  • 在Android开发中如何使用OpenSL ES库播放解码后的pcm音频文件？
  • Android 开机流程介绍
  • 安卓端出现https请求失败的一次问题排查
  • Android 编译介绍

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号