关于定制RadioGroup样式之填坑记，记录而已

最新推荐文章于 2024-11-11 09:15:00 发布

原创最新推荐文章于 2024-11-11 09:15:00 发布 · 4.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#radio button #RadioGroup

安卓同时被 2 个专栏收录

16 篇文章

订阅专栏

记录

15 篇文章

订阅专栏

本文记录了在Android开发中自定义RadioGroup和RadioButton样式的全过程，包括遇到的问题及解决方案。从创建selector和shape，到动态添加RadioButton，再到解决点击显示圆点的问题，最终实现了符合UI风格的单选按钮组件。

由于某种业务需要，需要动态添加几个按钮，然后它们必须是单选的，毫无疑问，很自然就选择了安卓自带控件RadioGroup+RadioButton，然而，默认的样式是如此的美腻这里写图片描述，不符合我们的UI风格。所以，我们需要自定义它的样式。
接下来，一步一步实现（填坑）….
不就是RadioGroup吗？还能不会用？然后就开始码了，首先，自定义一个selector选择器及shape

<!-- selector -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/shape_nor" android:state_checked="false" ></item>
    <item android:drawable="@drawable/shape_spec" android:state_checked="true"></item>

</selector>

<!-- 下面是shape_nor文件 -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <corners android:radius="15dp" />

    <solid android:color="#440000ff" />

    <stroke
        android:width="1dp"
        android:color="@android:color/white" />

</shape>
<!-- 接下来是shape_spec文件 -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <corners android:radius="15dp" />

    <solid android:color="#990000ff" />

    <stroke
        android:width="1dp"
        android:color="@android:color/white" />

</shape>

一切就是这么顺利，好了，选择器写好了就应该写布局文件了，于是开始…

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:scrollbars="none" >

    <RadioGroup
        android:id="@+id/id_radiogroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信支付"
            android:padding="10dp"
            android:background="@drawable/selector_radio"
            />
        <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="银联支付"
            android:padding="10dp"
            android:background="@drawable/selector_radio"
            />
        <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="现金支付"
            android:padding="10dp"
            android:background="@drawable/selector_radio"
            />
        <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="货到付款"
            android:padding="10dp"
            android:background="@drawable/selector_radio"
            />

    </RadioGroup>

</HorizontalScrollView>

可以看到，我们写了一个RadioGroup里面包含了4个子RadioButton，so easy！运行
这里写图片描述
卧槽，什么鬼…于是找度娘，搜搜索索，原来只要在RadioButton添加个属性就解决啦，so easy…

<RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/selector_radio"
            android:button="@null"<!--添加这句代码，去除圆点-->
            android:padding="10dp"
            android:text="银联支付" />

再次运行
这里写图片描述

PERFECT!!!哈哈，完成鸟，没坑！！
…
….
…..
喂喂喂，回来，前面说要动态添加！
这里写图片描述
好吧，还不是一样！码起，于是把布局文件里RadioGroup的子RadioButton删去，因为我已经不需要他们了，我要动！态！添！加！

看我的MainActivity代码：

package com.lin.logindemo;

import butterknife.Bind;
import butterknife.ButterKnife;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;
import android.widget.RadioGroup.OnCheckedChangeListener;

public class MainActivity extends ActionBarActivity {

    @Bind(R.id.id_radiogroup)
    RadioGroup mGroup;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initBtns();
    }

    private void initBtns() {
        RadioButton button = null;
        for (int i = 1; i < 7; i++) {
            button = new RadioButton(getApplicationContext());
            button.setText("button" + i);
            button.setTag(i);
            button.setBackgroundResource(R.drawable.selector_radio);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            button.setLayoutParams(params);
            button.setButtonDrawable(getResources().getDrawable(android.R.color.transparent));
            mGroup.addView(button);
        }

        mGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                Toast.makeText(getApplicationContext(), "" + findViewById(checkedId).getTag(),
                        Toast.LENGTH_SHORT).show();
            }
        });
    }
}

等等，发现radiobutton死活点不出setButton这个属性，我*，算了，先运行试试… 这里写图片描述

卧槽，果不其然，圆点又来了…..麻溜找度娘啊，有人说加上这句：

button.setButtonDrawable(getResources().getDrawable(android.R.color.transparent));

把背景设为透明，运行
这里写图片描述
……圆点是没了，蓝而还是占着茅坑…继续找度娘，又试了几种方法，皆无果….

剧终！！…..

.
..
..

等等，由于对ui的强迫症，我想把它们的padding调一下，不然好难看，于是加了一句代码：

button.setPadding(20, 10, 20, 10);

这里写图片描述
运行一下

果然好看多了嘛！
咦，突蓝发现，圆点没了，也没占着屎坑了。我擦，居然这样被解决了….

全剧终…..

.
.
.
..

最后贴一下完整的initBtns()方法：

private void initBtns() {
        RadioButton button = null;
        for (int i = 1; i < 7; i++) {
            button = new RadioButton(getApplicationContext());
            button.setText("button" + i);
            button.setTag(i);
            button.setBackgroundResource(R.drawable.selector_radio);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            button.setLayoutParams(params);
            button.setPadding(20, 10, 20, 10);
            button.setButtonDrawable(getResources().getDrawable(android.R.color.transparent));
            mGroup.addView(button);
        }

        mGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                Toast.makeText(getApplicationContext(), "" + findViewById(checkedId).getTag(),
                        Toast.LENGTH_SHORT).show();
            }
        });
    }

记录。