RadioGroup 自动换行且保留点击事件
【摘要】
相信用过RadioGroup的同学都踩过很多坑，其中之一就是这个控件设计的不是很合理，不能设置里面的radiobutton的 排列方式（几行几列），导致我们开发的时候要调整里面的布局很是麻烦。
另外一个坑是 动态new 的时候选默认值的问题，这个在之前的一篇文章 RadioGroup中RadioButton默认选中问题&nb...
相信用过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>
对应的界面展示效果：
默认选中了第一个，然后 ，产品经理过来了，你这么放肯定是不行的，能不能改成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>
对应的界面展示效果
完美实现 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直接写两个 设置行列的方法，也是没有搞定！如果大家有搞定的 或者有好的方法，可以分享一下！技术就是用来分享的！
如果还有其他问题，可以加入我们的qq群讨论交流：
开发一群：415275066 开发二群：537532956
文章来源: wukong.blog.csdn.net，作者：再见孙悟空_，版权归原作者所有，如需转载，请联系作者。
原文链接：wukong.blog.csdn.net/article/details/75278001
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）