devbox
码创造者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

自定义适配单选和多选情况的RadioButton和RadioGroup_安卓开发利用radio button实现单选

作者：码创造者 | 2024-07-22 15:36:23

赞

踩

安卓开发利用radio button实现单选

一、效果展示

 

        在 Android 应用程序开发中，按钮是常见的 UI 元素。虽然 Android 提供了各种默认的按钮样式，但有时您可能需要自定义按钮以满足特定的设计需求。为此，我创建了一个自定义 RadioButton 类 CustomRadioButton，它继承自 AndroidX 中的 AppCompatTextView，实现单选题和多选题的效果，如上图所示。       

        在左侧的多选题中，如果选择了ABD三个选项但未提交，选中的文字、背景和边框会呈现棕色，未选中的则会呈现灰色。

        右侧的单选题中，如果选择了A选项但正确答案是C选项，你会看到正确选项和错误选项有不同的效果。正确选项会显示一个绿色的勾，而错误选项则会显示一个红色的叉，它们的文字、背景和边框颜色也是有区别的。

以下是在xml中使用的代码：

  1. <com.noblel.baselibrary.view.CustomRadioButtonGroup
  2.             android:id="@+id/rgOptions"
  3.             android:layout_width="match_parent"
  4.             android:layout_height="wrap_content"
  5.             android:layout_marginLeft="10dp"
  6.             android:layout_marginRight="10dp"
  7.             android:orientation="vertical">
  8.             <com.noblel.baselibrary.view.CustomRadioButton
  9.                 android:id="@+id/cb_choice1"
  10.                 android:padding="8dp"
  11.                 android:layout_width="match_parent"
  12.                 android:minHeight="48dp"
  13.                 android:layout_height="wrap_content"/>
  14.             <com.noblel.baselibrary.view.CustomRadioButton
  15.                 android:id="@+id/cb_choice2"
  16.                 android:layout_marginTop="10dp"
  17.                 android:padding="8dp"
  18.                 android:layout_width="match_parent"
  19.                 android:minHeight="48dp"
  20.                 android:layout_height="wrap_content"/>
  21.             <com.noblel.baselibrary.view.CustomRadioButton
  22.                 android:id="@+id/cb_choice3"
  23.                 android:layout_marginTop="10dp"
  24.                 android:padding="8dp"
  25.                 android:layout_width="match_parent"
  26.                 android:minHeight="48dp"
  27.                 android:layout_height="wrap_content"/>
  28.             <com.noblel.baselibrary.view.CustomRadioButton
  29.                 android:id="@+id/cb_choice4"
  30.                 android:layout_marginTop="10dp"
  31.                 android:padding="8dp"
  32.                 android:layout_width="match_parent"
  33.                 android:minHeight="48dp"
  34.                 android:layout_height="wrap_content"/>
  35.         </com.noblel.baselibrary.view.CustomRadioButtonGroup>

        那么，应该如何实现这种效果呢？

二、CustomRadioButton 实现

        CustomRadioButton 中包含了多种状态，如普通状态、选中状态、正确状态和错误状态。它还包含了 isChecked 和 isCorrect 属性来标记当前是否选中和是否为正确答案。以下是         CustomRadioButton 类的代码：

  1. public class CustomRadioButton extends androidx.appcompat.widget.AppCompatTextView {
  2.     //当前状态
  3.     private State mState;
  4.     //普通状态
  5.     NormalState normalState;
  6.     //选中状态
  7.     CheckedState checkedState;
  8.     //正确状态
  9.     CorrectState correctState;
  10.     //错误状态
  11.     WrongState wrongState;
  12.     //是否选中
  13.     private boolean isChecked = false;
  14.     //是否正确
  15.     private boolean isCorrect = false;
  16.  
  17.     public CustomRadioButton(Context context) {
  18.         super(context);
  19.         init(context);
  20.     }
  21.  
  22.     public CustomRadioButton(Context context, AttributeSet attrs) {
  23.         super(context, attrs);
  24.         init(context, attrs);
  25.     }
  26.  
  27.     public CustomRadioButton(Context context, AttributeSet attrs, int defStyle) {
  28.         super(context, attrs, defStyle);
  29.         init(context, attrs);
  30.     }
  31.  
  32.     // 设置状态方法
  33.     private void setState(State state, TypedArray styleAttrs) {
  34.         mState = state;
  35.         mState.applyStyle(this);
  36.         mState.setMargin(this, styleAttrs);
  37.         mState.setPadding(this, styleAttrs);
  38.     }
  39.  
  40.     @Override
  41.     public void setText(CharSequence text, BufferType type) {
  42.         // 调用父类方法设置文字
  43.         super.setText(text, type);
  44.         // 如果状态对象不为空，则应用状态样式
  45.         if (mState != null) {
  46.             mState.applyStyle(this);
  47.         }
  48.     }
  49.  
  50.     private void setState(State state) {
  51.         mState = state;
  52.         mState.applyStyle(this);
  53.     }
  54.  
  55.     private void init(Context context, AttributeSet attrs) {
  56.         TypedArray styleAttrs = context.obtainStyledAttributes(attrs, R.styleable.CustomRadioButton);
  57.         try {
  58.             //普通样式
  59.             normalState = new NormalState(context, styleAttrs);
  60.             //选中样式
  61.             checkedState = new CheckedState(context, styleAttrs);
  62.             //正确样式
  63.             correctState = new CorrectState(context, styleAttrs);
  64.             //错误样式
  65.             wrongState = new WrongState(context, styleAttrs);
  66.             setState(normalState, styleAttrs);
  67.         } finally {
  68.             styleAttrs.recycle();
  69.         }
  70.     }
  71.  
  72.     private void init(Context context) {
  73.         normalState = new NormalState(context);
  74.         checkedState = new CheckedState(context);
  75.         correctState = new CorrectState(context);
  76.         wrongState = new WrongState(context);
  77.         setState(normalState);
  78.  
  79.     }
  80.  
  81.     void setTextSize(int size) {
  82.         // 设置文字大小
  83.         setTextSize(TypedValue.COMPLEX_UNIT_PX, size);
  84.     }
  85.  
  86.     void setIcon(Drawable drawable) {
  87.         // 设置左侧图标
  88.         setCompoundDrawablesWithIntrinsicBounds(drawable, null, null, null);
  89.     }
  90.  
  91.     public boolean isChecked() {
  92.         return isChecked;
  93.     }
  94.  
  95.     public void setChecked(boolean doCheckOrNot) {
  96.         isChecked = doCheckOrNot;
  97.         // 更新当前选中的选项
  98.         //还可以点击
  99.         if (isEnabled()) {
  100.             if (isChecked) {
  101.                 setState(checkedState);
  102.             } else {
  103.                 setState(normalState);
  104.             }
  105.         }
  106.     }
  107.  
  108.     public boolean isCorrect() {
  109.         return isCorrect;
  110.     }
  111.  
  112.     public void setCorrect(boolean correct) {
  113.         isCorrect = correct;
  114.     }
  115.  
  116.     public void setAfterSubmit() {
  117.         if (isCorrect) {
  118.             setState(correctState);
  119.         } else {
  120.             if (isChecked) {
  121.                 setState(wrongState);
  122.             } else {
  123.                 setState(normalState);
  124.             }
  125.         }
  126.     }
  127. }

        CustomRadioButton是一个自定义的RadioButton，继承自AppCompatTextView，通过设置不同的状态，可以实现不同的按钮样式。

        其中，CustomRadioButton包含四种状态：NormalState（普通状态）、CheckedState（选中状态）、CorrectState（正确状态）和WrongState（错误状态），分别表示四种不同的按钮状态。

        在CustomRadioButton中，定义了以下方法：

  • setState(State state)：设置CustomRadioButton的状态，参数为State类型，表示要设置的状态。
  • setTextSize(int size)：设置CustomRadioButton的文本大小。
  • setIcon(Drawable drawable)：设置CustomRadioButton的左侧图标。
  • isChecked()：获取CustomRadioButton是否被选中。
  • setChecked(boolean doCheckOrNot)：设置CustomRadioButton是否被选中，参数为boolean类型，表示是否被选中。
  • isCorrect()：获取CustomRadioButton是否为正确选项。
  • setCorrect(boolean correct)：设置CustomRadioButton是否为正确选项，参数为boolean类型，表示是否为正确选项。
  • setAfterSubmit()：设置CustomRadioButton的状态，表示用户提交答案后的状态。

        CustomRadioButton使用了状态模式来管理不同状态下的样式。

        状态模式是一种行为型设计模式，它允许对象在内部状态改变时改变其行为。状态模式将状态封装到单独的类中，并将对象的行为委托给当前状态的对象。

        在CustomRadioButton中，状态对象被封装到不同的类中，包括NormalState、CheckedState、CorrectState和WrongState。每个状态都继承了State父类，它包含了在状态改变时需要执行的操作。

        当CustomRadioButton被创建时，它会初始化所有状态，并将初始状态设置为NormalState。当CustomRadioButton的状态发生变化时，它会调用setState方法来设置新的状态。在setState方法中，CustomRadioButton会将新状态应用于当前View，并更新视图的外观和行为。

        通过使用状态模式，CustomRadioButton能够更好地管理不同状态下的样式，并且能够更加灵活地处理状态变化，使得代码更加简洁和易于维护。

三、RadioButtonGroup实现

        这是自定义的 RadioButtonGroup 类，可以和 CustomRadioButton 配合使用，实现单选或多选功能。该类继承自 LinearLayout，可以在布局中直接使用。该类主要包含以下成员变量和方法：

  1. public class CustomRadioButtonGroup extends LinearLayout {
  2.     private OnCheckedChangeListener mCheckedChangeListener;
  3.     //选中了哪些按钮
  4.     private List<CustomRadioButton> mSelectedRadioButtonList;
  5.     //是否为单选
  6.     private boolean singleChoose = false;
  7.  
  8.     public boolean isSingleChoose() {
  9.         return singleChoose;
  10.     }
  11.  
  12.     public void setSingleChoose(boolean singleChoose) {
  13.         this.singleChoose = singleChoose;
  14.     }
  15.  
  16.     // 设置选中状态变化的监听器
  17.     public void setOnCheckedChangeListener(OnCheckedChangeListener listener) {
  18.         mCheckedChangeListener = listener;
  19.     }
  20.  
  21.     // 定义一个选中状态变化的监听器接口
  22.     public interface OnCheckedChangeListener {
  23.         void onCheckedChanged(CustomRadioButtonGroup group, int checkedId);
  24.     }
  25.  
  26.     private void init() {
  27.  
  28.     }
  29.  
  30.     @Override
  31.     protected void onFinishInflate() {
  32.         super.onFinishInflate();
  33.  
  34.         // 使用 Handler 添加一个延时任务
  35.         new Handler().postDelayed(new Runnable() {
  36.             @Override
  37.             public void run() {
  38.                 // 在延时任务中获取子视图的数量
  39.                 // 这里可以对子视图进行操作，例如获取子视图的属性或者进行其他逻辑处理
  40.                 // ...
  41.                 int count = getChildCount();
  42.                 for (int i = 0; i < count; i++) {
  43.                     View child = getChildAt(i);
  44.                     if (child instanceof CustomRadioButton) {
  45.                         final CustomRadioButton radioButton = (CustomRadioButton) child;
  46.                         radioButton.setOnClickListener(new OnClickListener() {
  47.                             @Override
  48.                             public void onClick(View view) {
  49.                                 selectRadioButton(radioButton);
  50.                             }
  51.                         });
  52.                     }
  53.                 }
  54.             }
  55.         }, 150); // 这里的延时时间可以根据实际情况进行调整，单位为毫秒
  56.     }
  57.  
  58.     /**
  59.      * 设置按钮的点击事件
  60.      *
  61.      * @param radioButton 按钮
  62.      */
  63.     private void selectRadioButton(CustomRadioButton radioButton) {
  64.         //判断是否已经选中
  65.         boolean checked = radioButton.isChecked();
  66.  
  67.         if (singleChoose) {
  68.             // 如果是单选模式，先清除之前选中的按钮
  69.             clearSelectedRadioButtons();
  70.         }
  71.  
  72.         //设置选中或者未选中状态转变
  73.         radioButton.setChecked(!checked);
  74.  
  75.         //选中按钮list集合
  76.         if (mSelectedRadioButtonList == null) {
  77.             mSelectedRadioButtonList = new ArrayList<>();
  78.         }
  79.  
  80.         //如何当前按钮是选中了
  81.         if (radioButton.isChecked()) {
  82.             //将当前按钮添加到list集合
  83.             if (!mSelectedRadioButtonList.contains(radioButton)) {
  84.                 mSelectedRadioButtonList.add(radioButton);
  85.             }
  86.         } else {
  87.             //从list集合中移除按钮
  88.             mSelectedRadioButtonList.remove(radioButton);
  89.         }
  90.  
  91.         //通知点击状态已经改变
  92.         if (mCheckedChangeListener != null) {
  93.             mCheckedChangeListener.onCheckedChanged(this, radioButton.getId());
  94.         }
  95.     }
  96.  
  97.     private void clearSelectedRadioButtons() {
  98.         if (mSelectedRadioButtonList != null) {
  99.             for (CustomRadioButton radioButton : mSelectedRadioButtonList) {
  100.                 radioButton.setChecked(false);
  101.             }
  102.             mSelectedRadioButtonList.clear();
  103.         }
  104.     }
  105.  
  106.     //获取选择的button
  107.     public List<CustomRadioButton> getSelectedIndex() {
  108.         List<CustomRadioButton> selectedCheckBoxes = new ArrayList<>();
  109.         if (mSelectedRadioButtonList != null) {
  110.             for (CustomRadioButton cb : mSelectedRadioButtonList) {
  111.                 if (cb.isChecked()) {
  112.                     selectedCheckBoxes.add(cb);
  113.                     cb.setChecked(true);
  114.                 }
  115.             }
  116.         }
  117.         return selectedCheckBoxes;
  118.     }
  119.  
  120.     public void setShowAnswer() {
  121.         int count = getChildCount();
  122.         for (int i = 0; i < count; i++) {
  123.             View child = getChildAt(i);
  124.             if (child instanceof CustomRadioButton) {
  125.                 final CustomRadioButton radioButton = (CustomRadioButton) child;
  126.                 radioButton.setEnabled(false);
  127.                 radioButton.setAfterSubmit();
  128.             }
  129.         }
  130.     }
  131.  
  132.     public CustomRadioButtonGroup(Context context) {
  133.         super(context);
  134.         init();
  135.     }
  136.  
  137.     public CustomRadioButtonGroup(Context context, AttributeSet attrs) {
  138.         super(context, attrs);
  139.         init();
  140.     }
  141.  
  142.     public CustomRadioButtonGroup(Context context, AttributeSet attrs, int defStyle) {
  143.         super(context, attrs, defStyle);
  144.         init();
  145.     }
  146.  
  147. }

        RadioButtonGroup 是一种自定义的 View 组，可以用于组合多个 CustomRadioButton 控件，从而实现单选或多选的功能。其主要作用是方便用户在一组选项中进行选择，使得用户可以在多个选项中选择一个或多个，从而满足用户不同的需求，提升用户体验。同时，通过在 RadioButtonGroup 中设置 OnCheckedChangeListener 接口，可以监听 RadioButton 的选中状态变化，从而实现相应的逻辑操作。

完整代码见：https://gitee.com/liuhaikang/custom-radio-button.git

使用的位置在：

  • question/app/src/main/java/com/lidan/xiao/danquestion/activity/QuestionActivity.java
  • question/app/src/main/res/layout/queitem.xml

定义的位置在：

  • question/baselibrary/src/main/java/com/noblel/baselibrary/view/CustomRadioButton.java
  • question/baselibrary/src/main/java/com/noblel/baselibrary/view/CustomRadioButtonGroup.java

直接按关键字全局搜索一下就能找到。

最后，对此篇文章有任何疑问欢迎在评论区提出。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/码创造者/article/detail/865853
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号