RadioGroup只能横向和垂直展示RadioButton,然后设计师们就经常要求我们网格展示。比如要实现如下的效果:
那要怎么做呢,采用继承RadioGroup,重新绘制里面的内容,上代码:
定义所需属性 attrs:
<declare-styleable name="GridRadioGroup"><attr name="numColumns" format="integer" /><attr name="horizontalSpacing" format="dimension" /><attr name="verticalSpacing" format="dimension" /></declare-styleable>
重写RadioGroup
public class GridRadioGroup extends RadioGroup {private static final int VERTICAL_SPACING_DIP = 15;private static final int HORIZONTAL_SPACING_DIP = 10;private float verticalSpacing = 20;private float horizontalSpacing = 12;private int numColumns = 3;public GridRadioGroup(Context context) {this(context, null);}public GridRadioGroup(Context context, AttributeSet attrs) {super(context, attrs);TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.GridRadioGroup);numColumns = attributes.getInt(R.styleable.GridRadioGroup_numColumns, numColumns);int tempHorSpacing = (int) (HORIZONTAL_SPACING_DIP * context.getResources().getDisplayMetrics().density);horizontalSpacing = attributes.getDimension(R.styleable.GridRadioGroup_horizontalSpacing, tempHorSpacing);int tempVerSpacing = (int) (VERTICAL_SPACING_DIP * context.getResources().getDisplayMetrics().density);verticalSpacing = attributes.getDimension(R.styleable.GridRadioGroup_verticalSpacing, (int) tempVerSpacing);attributes.recycle();}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {int childCount = getChildCount();int contentWidth = r - l - getPaddingRight() - getPaddingLeft();int itemWidth = (int) (contentWidth - horizontalSpacing * (numColumns - 1)) / numColumns;int x = getPaddingLeft();// 横坐标开始int y = 0;//纵坐标开始int rows = 0;for (int i = 0; i < childCount; i++) {View view = getChildAt(i);int height = view.getMeasuredHeight();x += itemWidth;if (i % numColumns == 0) {x = getPaddingLeft() + itemWidth;rows++;}y = rows * height + (rows - 1) * (int) verticalSpacing + getPaddingTop();view.layout(x - itemWidth, y - height, x, y);x += horizontalSpacing;}}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int childCount = getChildCount();int specWidth = MeasureSpec.getSize(widthMeasureSpec);int contentWidth = specWidth - getPaddingRight() - getPaddingLeft();int itemWidth = (int) (contentWidth - horizontalSpacing * (numColumns - 1)) / numColumns;int y = 0;//纵坐标开始int rows = 0;for (int i = 0; i < childCount; i++) {View child = getChildAt(i);child.measure(MeasureSpec.makeMeasureSpec(itemWidth, MeasureSpec.EXACTLY), MeasureSpec.UNSPECIFIED);int height = child.getMeasuredHeight();if (i % numColumns == 0) {rows++;}y = rows * height + (rows - 1) * (int) verticalSpacing + getPaddingTop() + getPaddingBottom();}setMeasuredDimension(specWidth, y);}
}
文字相关选中和未选中效果:
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><!-- 没有焦点时字体颜色 --><itemandroid:state_checked="false"android:color="@color/color_888888"/><!--选中时的字体颜色 --><itemandroid:state_checked="true"android:color="@color/white"/>
</selector>
图片选中和未选中效果:
具体图片自己替换
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/bg_circle_radus_f3f4f6_text" android:state_checked="false" /><item android:drawable="@drawable/bg_circle_radus_1993ff_text" android:state_checked="true" />
</selector>
在布局中应用
<com.snxun.xmrchc.widget.GridRadioGroupandroid:id="@+id/rg_xzly"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:layout_marginLeft="5dp"android:layout_marginStart="5dp"app:numColumns="2"app:horizontalSpacing="10dp"app:verticalSpacing="12dp"><RadioButtonandroid:id="@+id/rbtn_xzly_qxxc"android:layout_width="150dp"android:layout_height="wrap_content"android:padding="8dp"android:button="@null"android:gravity="center"android:textColor="@drawable/selector_text_blue"android:background="@drawable/radio_select"android:textSize="13sp"android:text="取消行程" /><RadioButtonandroid:id="@+id/rbtn_xzly_wjg"android:layout_width="150dp"android:layout_height="wrap_content"android:padding="8dp"android:button="@null"android:gravity="center"android:textColor="@drawable/selector_text_blue"android:background="@drawable/radio_select"android:textSize="13sp"android:text="线路经过未停留" /><RadioButtonandroid:id="@+id/rbtn_xzly_fbr"android:layout_width="150dp"android:layout_height="wrap_content"android:padding="8dp"android:button="@null"android:gravity="center"android:textColor="@drawable/selector_text_blue"android:background="@drawable/radio_select"android:textSize="13sp"android:text="非本人通讯工具" /><RadioButtonandroid:id="@+id/rbtn_xzly_lkyq"android:layout_width="150dp"android:layout_height="wrap_content"android:padding="8dp"android:button="@null"android:gravity="center"android:textColor="@drawable/selector_text_blue"android:background="@drawable/radio_select"android:textSize="13sp"android:text="离开疫区超过14天" /><RadioButtonandroid:id="@+id/rbtn_xzly_qt"android:layout_width="150dp"android:layout_height="wrap_content"android:padding="8dp"android:button="@null"android:gravity="center"android:textColor="@drawable/selector_text_blue"android:background="@drawable/radio_select"android:textSize="13sp"android:text="其他" /></com.snxun.xmrchc.widget.GridRadioGroup>
Activity中的使用,纯属为了以后能黏贴复制
/**** 修正理由*/@BindView(R.id.rg_xzly)RadioGroup mRgXzly;//修正理由mRgXzly.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {edit_xzly_qt.setVisibility(View.GONE);if(checkedId==rbtn_xzly_qxxc.getId()){}if(checkedId==rbtn_xzly_wjg.getId()){}if(checkedId==rbtn_xzly_fbr.getId()){}if(checkedId==rbtn_xzly_lkyq.getId()){}if(checkedId==rbtn_xzly_qt.getId()){}}});
ok,大工告成!!!