AI 助理
备案控制台
开发者社区 人工智能 文章 正文

RadioGroup 自动换行且保留点击事件

2022-01-19 426
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： RadioGroup 自动换行且保留点击事件

相信用过RadioGroup的同学都踩过很多坑，其中之一就是这个控件设计的不是很合理，不能设置里面的radiobutton的 排列方式（几行几列），导致我们开发的时候要调整里面的布局很是麻烦。


另外一个坑是 动态new 的时候选默认值的问题，这个在之前的一篇文章 RadioGroup中RadioButton默认选中问题  这个里面已经提到过了，就不再细说了。今天主要说说这个radiogroup怎么调整布局为自动换行的问题。


当我们自己写完RadioGroup 后，里面写好radiobutton，非常简单，一通复制粘贴，一大排就出来了，运行一下 ，非常棒，单选等功能都很好用。就像这样

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.myradiogroup.MainActivity" >
   <RadioGroup
        android:id="@+id/rg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="0dp">
        <RadioButton
            android:id="@+id/rb_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="红色" />
        <RadioButton
            android:id="@+id/rb_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="橙色" />
        <RadioButton
            android:id="@+id/rb_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="黄色" />
        <RadioButton
            android:id="@+id/rb_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="绿色" />
        <RadioButton
            android:id="@+id/rb_5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="蓝色" />
        <RadioButton
            android:id="@+id/rb_6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="靛色" />
        <RadioButton
            android:id="@+id/rb_7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="紫色" />
        <RadioButton
            android:id="@+id/rb_8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="黑色" />
        <RadioButton
            android:id="@+id/rb_9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="灰色" />
        <RadioButton
            android:id="@+id/rb_10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="白色" />
        <RadioButton
            android:id="@+id/rb_11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="七彩色" />
        <RadioButton
            android:id="@+id/rb_12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="粉色" />
    </RadioGroup>
</RelativeLayout>

对应的界面展示效果：

image.png

默认选中了第一个，然后 ，产品经理过来了，你这么放肯定是不行的，能不能改成4行3列的。


然后你心想，小儿科，去查了一下RadioGroup的属性，发现并没有原生支持的属性，可以设置内部RadioButton的几行几列的属性。


继续想一下 ，这还能难道我？ 然后写了几个LinearLayout   把RadioButton套起来。


于是代码被你改成了这样

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.myradiogroup.MainActivity" >
    <RadioGroup
        android:id="@+id/rg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="0dp" >
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
            <RadioButton
                android:id="@+id/rb_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="红色" />
            <RadioButton
                android:id="@+id/rb_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="橙色" />
            <RadioButton
                android:id="@+id/rb_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="黄色" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
            <RadioButton
                android:id="@+id/rb_4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="绿色" />
            <RadioButton
                android:id="@+id/rb_5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="蓝色" />
            <RadioButton
                android:id="@+id/rb_6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="靛色" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
            <RadioButton
                android:id="@+id/rb_7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="紫色" />
            <RadioButton
                android:id="@+id/rb_8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="黑色" />
            <RadioButton
                android:id="@+id/rb_9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="灰色" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
            <RadioButton
                android:id="@+id/rb_10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="白色" />
            <RadioButton
                android:id="@+id/rb_11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="七彩色" />
            <RadioButton
                android:id="@+id/rb_12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="粉色" />
        </LinearLayout>
    </RadioGroup>
</RelativeLayout>

对应的界面展示效果

image.png

完美实现  6不6 ，嘴角浮起了轻蔑的微笑...


然后运行，点击选一下试试，woc,不对啊，这点击效果不对啊 ，发现原来默认选中的 没有取消选中啊，点击事件不对了啊，分分钟懵逼了...


所以其实原生的RadioGroup 存在的问题：


1. 如果不结合其他布局，例如LinearLayout, 则只能实现单行多个按钮组，或者单列多个按钮组。

2. 如果结合其他布局， 虽然可以实现多行多列的RadioButton布局，但是，如果不通过一些互斥算法，也无法实现按钮组的单选操作。


所以要对其进行改写：

package com.example.myradiogroup;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.RadioGroup;
public class MyRadioGroup extends RadioGroup {
    private static final String TAG = "RadioGroupEx";
    public MyRadioGroup(Context context) {
        super(context);
    }
    public MyRadioGroup(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        //调用ViewGroup的方法，测量子view
        measureChildren(widthMeasureSpec, heightMeasureSpec);
        //最大的宽
        int maxWidth = 0;
        //累计的高
        int totalHeight = 0;
        //当前这一行的累计行宽
        int lineWidth = 0;
        //当前这行的最大行高
        int maxLineHeight = 0;
        //用于记录换行前的行宽和行高
        int oldHeight;
        int oldWidth;
        int count = getChildCount();
        //假设 widthMode和heightMode都是AT_MOST
        for (int i = 0; i < count; i++) {
            View child = getChildAt(i);
            MarginLayoutParams params = (MarginLayoutParams) child.getLayoutParams();
            //得到这一行的最高
            oldHeight = maxLineHeight;
            //当前最大宽度
            oldWidth = maxWidth;
            int deltaX = child.getMeasuredWidth() + params.leftMargin + params.rightMargin;
            if (lineWidth + deltaX + getPaddingLeft() + getPaddingRight() > widthSize) {//如果折行,height增加
                //和目前最大的宽度比较,得到最宽。不能加上当前的child的宽,所以用的是oldWidth
                maxWidth = Math.max(lineWidth, oldWidth);
                //重置宽度
                lineWidth = deltaX;
                //累加高度
                totalHeight += oldHeight;
                //重置行高,当前这个View，属于下一行，因此当前最大行高为这个child的高度加上margin
                maxLineHeight = child.getMeasuredHeight() + params.topMargin + params.bottomMargin;
                Log.v(TAG, "maxHeight:" + totalHeight + "---" + "maxWidth:" + maxWidth);
            } else {
                //不换行，累加宽度
                lineWidth += deltaX;
                //不换行，计算行最高
                int deltaY = child.getMeasuredHeight() + params.topMargin + params.bottomMargin;
                maxLineHeight = Math.max(maxLineHeight, deltaY);
            }
            if (i == count - 1) {
                //前面没有加上下一行的搞，如果是最后一行，还要再叠加上最后一行的最高的值
                totalHeight += maxLineHeight;
                //计算最后一行和前面的最宽的一行比较
                maxWidth = Math.max(lineWidth, oldWidth);
            }
        }
        //加上当前容器的padding值
        maxWidth += getPaddingLeft() + getPaddingRight();
        totalHeight += getPaddingTop() + getPaddingBottom();
        setMeasuredDimension(widthMode == MeasureSpec.EXACTLY ? widthSize : maxWidth,
                heightMode == MeasureSpec.EXACTLY ? heightSize : totalHeight);
    }
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int count = getChildCount();
        //pre为前面所有的child的相加后的位置
        int preLeft = getPaddingLeft();
        int preTop = getPaddingTop();
        //记录每一行的最高值
        int maxHeight = 0;
        for (int i = 0; i < count; i++) {
            View child = getChildAt(i);
            MarginLayoutParams params = (MarginLayoutParams) child.getLayoutParams();
            //r-l为当前容器的宽度。如果子view的累积宽度大于容器宽度，就换行。
            if (preLeft + params.leftMargin + child.getMeasuredWidth() + params.rightMargin + getPaddingRight() > (r - l)) {
                //重置
                preLeft = getPaddingLeft();
                //要选择child的height最大的作为设置
                preTop = preTop + maxHeight;
                maxHeight = getChildAt(i).getMeasuredHeight() + params.topMargin + params.bottomMargin;
            } else { //不换行,计算最大高度
                maxHeight = Math.max(maxHeight, child.getMeasuredHeight() + params.topMargin + params.bottomMargin);
            }
            //left坐标
            int left = preLeft + params.leftMargin;
            //top坐标
            int top = preTop + params.topMargin;
            int right = left + child.getMeasuredWidth();
            int bottom = top + child.getMeasuredHeight();
            //为子view布局
            child.layout(left, top, right, bottom);
            //计算布局结束后，preLeft的值
            preLeft += params.leftMargin + child.getMeasuredWidth() + params.rightMargin;
        }
    }
}

然后将布局文件RadioGroup改为 自定义的MyRadioGroup

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.myradiogroup.MainActivity" >
    <com.example.myradiogroup.MyRadioGroup
        android:id="@+id/rg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="0dp" >
        <RadioButton
            android:id="@+id/rb_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="红色" />
        <RadioButton
            android:id="@+id/rb_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="橙色" />
        <RadioButton
            android:id="@+id/rb_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="黄色" />
        <RadioButton
            android:id="@+id/rb_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="绿色" />
        <RadioButton
            android:id="@+id/rb_5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="蓝色" />
        <RadioButton
            android:id="@+id/rb_6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="靛色" />
        <RadioButton
            android:id="@+id/rb_7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="紫色" />
        <RadioButton
            android:id="@+id/rb_8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="黑色" />
        <RadioButton
            android:id="@+id/rb_9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="灰色" />
        <RadioButton
            android:id="@+id/rb_10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="白色" />
        <RadioButton
            android:id="@+id/rb_11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="七彩色" />
        <RadioButton
            android:id="@+id/rb_12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="粉色" />
    </com.example.myradiogroup.MyRadioGroup>
</RelativeLayout>

看下效果和 上面套用linearlayout的效果是一样的，而且不影响RadioGroup的点击事件。


但是这个仅仅是实现了自动换行的效果，没有真正实现可以设置 RadioGroup几行几列的效果。但是可以通过设置RadioButton的宽度就调这个每行的个数，怎么直接在自定义的RadioGroup直接写两个 设置行列的方法，也是没有搞定！如果大家有搞定的 或者有好的方法，可以分享一下！技术就是用来分享的！


文章标签：
算法
再见孙悟空_
目录
相关文章
程序三两行
|
7月前
|
XML Java Android开发
Android控件之基础控件——进度条类的view——TextView、Checkbox复选控件、RadioButton单选控件、ToggleButton开关、SeekBar拖动条、menu、弹窗
Android控件之基础控件——进度条类的view——TextView、Checkbox复选控件、RadioButton单选控件、ToggleButton开关、SeekBar拖动条、menu、弹窗
程序三两行
730 1
程序三两行
|
7月前
|
Android开发
Android控件——Checkbox复选框、RadioButton单选、ToggleButton开关、SeekBar拖动条
Android控件——Checkbox复选框、RadioButton单选、ToggleButton开关、SeekBar拖动条
程序三两行
60 0
张继群
|
7月前
toolbar设置返回键以及点击事件
toolbar设置返回键以及点击事件
张继群
102 0
多加点香菜85
|
7月前
element-plus：el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
element-plus：el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
多加点香菜85
250 0
petterp
|
XML 数据格式
简单的TextView滚动跑马灯效果
今天遇到一个需求，需要TextVeiw 滚动显示，于是简单记录一下。
petterp
133 0
简单的TextView滚动跑马灯效果
初学者-Study
|
Android开发
Android CheckBox修改选中颜色并去除选中时的水波纹效果
Android CheckBox修改选中颜色并去除选中时的水波纹效果
初学者-Study
709 0
Android CheckBox修改选中颜色并去除选中时的水波纹效果
再见孙悟空_
RadioGroup中RadioButton默认选中问题
RadioGroup中RadioButton默认选中问题
再见孙悟空_
446 0
桃子红了呐
|
C#
C#中如何让ListView控件点击选中整行
桃子红了呐
1691 0
一叶飘舟
|
Android开发 编解码 UED
Android ListView监听上下滑动(判断是否显示返回顶部按钮)
一叶飘舟
3178 0
无名公子
|
Android开发 数据格式 XML
Android ListView批量选择（全选、反选、全不选）
无名公子
1979 0

热门文章

最新文章

  • 1
    手把手教你用Python实践深度学习
  • 2
    新手阿里云服务器操作指南（图文教程）
  • 3
    Maven之多模块打包成一个jar包及assembly
  • 4
    使用let's encrypt申请免费的SSL证书
  • 5
    3种在Linux命令行查看图像的方法
  • 6
    Node.js 中流操作实践
  • 7
    [Spark][Python]Spark Python 索引页
  • 8
    How-to: 利用Visual Studio升级Windows Phone 7工程
  • 9
    vagrant初始登录失败的一般性解决方案
  • 10
    NFS Volume Provider（Part I） - 每天5分钟玩转 OpenStack（62）
  • 1
    技术实践 | 使用 PAI+LLaMA Factory 微调 Qwen2-VL 模型快速搭建专业领域知识问答机器人
    36
  • 2
    使用PaliGemma2构建多模态目标检测系统：从架构设计到性能优化的技术实践指南
    96
  • 3
    pyenv 管理多个 Python 版本(1)
    109
  • 4
    百度 SEO：不是玄学，是科学与艺术的 “恋爱”
    49
  • 5
    《C++与 MXNet：分布式训练与移动端部署的卓越融合》
    51
  • 6
    《C++：智能家居系统智能化跃升的强力助推器》
    37
  • 7
    《C++：自动驾驶车辆环境感知与决策控制的核心引擎》
    34
  • 8
    《docker高级篇（大厂进阶）：5.Docker-compose容器编排》包括是什么能干嘛去哪下、Compose核心概念、Compose使用三个步骤、Compose常用命令、Compose编排微服务
    42
  • 9
    SEO：网站的“流量秘籍”大公开
    29
  • 10
    《C++赋能自然语言处理：词向量模型的构建与应用》
    27

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云对象存储OSS收费标准：存储、流量和请求等多个计费项详解