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();
}
@Override
protected 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;
}
}
@Override
protected 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">
<!-- 沒有焦點時字體顏色 -->
<item
android:state_checked="false"
android:color="@color/color_888888"/>
<!--選中時的字體顏色 -->
<item
android: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.GridRadioGroup
android: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">
<RadioButton
android: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="取消行程" />
<RadioButton
android: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="線路經過未停留" />
<RadioButton
android: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="非本人通訊工具" />
<RadioButton
android: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天" />
<RadioButton
android: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() {
@Override
public 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，大工告成！！！
