一步一步学android之基本控件——RadioGroup组件

最新推荐文章于 2025-06-29 14:45:18 发布

原创最新推荐文章于 2025-06-29 14:45:18 发布 · 3.5k 阅读

3 ·

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

标签

#Android #RadioButton #自定义控件

一步一步学Android 同时被 2 个专栏收录

20 篇文章

订阅专栏

一步一步学android之控件篇(包含自定义组件样式）上

7 篇文章

订阅专栏

本文介绍了Android中单选按钮组件RadioGroup的使用，包括其与LinearLayout的关系、RadioButton的定义及其与Button的相似性。通过示例展示了RadioGroup的基本用法，并探讨了如何自定义RadioButton的样式，提供了两种替换图片的方法，最后提到了代码规范，建议将相同样式代码抽象为style。

单选按钮在开发中提供了一种多选一的操作模式，也是比较常见的一种组件，例如在选择性别的时候，在Android中可以使用<RadioGroup>标签来定义单选按钮组件，它的定义如下（http://developer.android.com/reference/android/widget/RadioGroup.html）：

我们可以看见他继承于LinearLayout（这个后面会说到），所以RadioGroup也可以使用LinearLayout的属性，如orientation属性（控制内部子组件的显示方向），这里要注意的是RadioGroup提供的只是一个容器，需要在里面加RadioButton才可以出现单选按钮，RadioButton的定义如下（http://developer.android.com/reference/android/widget/RadioButton.html）：

发现他继承于CompoundButton（继承于Button），所以RadioButton的使用可以说和Button是类似的，只是RadioButton在定义时候必须放进容器RadioGroup中（切记），同样下面写个例子来说明。

运行效果图：

main.xml：

<LinearLayout 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:orientation="vertical" >

    <TextView
        android:id="@+id/colortv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="你喜欢什么颜色：" />

    <RadioGroup
        android:id="@+id/color"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkedButton="@+id/red"
        android:orientation="vertical" >

        <RadioButton
            android:id="@+id/red"
            android:text="红色"
            android:textColor="#ff0000" />

        <RadioButton
            android:id="@+id/black"
            android:text="黑色" />

        <RadioButton
            android:id="@+id/green"
            android:text="绿色"
            android:textColor="#00ff00" />
    </RadioGroup>

    <TextView
        android:id="@+id/sextv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="你的性别是：" />

    <RadioGroup
        android:id="@+id/sex"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkedButton="@+id/male"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/male"
            android:text="男" />

        <RadioButton
            android:id="@+id/female"
            android:text="女" />
    </RadioGroup>

</LinearLayout>

我们可以看见RadioButton的属性和Button都差不多使用方法，这里要注意的一个地方是在每个RadioGroup中都有android:checkedButton这个属性，它的作用是默认选择下面几个里面中的哪个，还有一个属性就是刚刚说的android:orientation，在LinearLayout中很常见，作用就是设置内部组件显示方式，可选值为vertical和horizontal两个，分别代表的意思是垂直显示和横向显示，别的属性都讲过了，这里也就不说了。

同样今天还是要自定义这个组件，毕竟自带的很难看啊，没办法，同样这里有两张图片check_down.png，check_normal.png，和自定义Button时候的步骤一样，这里就不再说了，直接给出selector的文件源码。

这里有两个方法可以实现替换radiobutton前面的图片，下面是第一种：

radio_selector.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true"
        android:state_enabled="true"
        android:drawable="@drawable/check_down"></item>
     <item android:state_checked="false"
         android:state_enabled="true"
        android:drawable="@drawable/check_normal"></item>
</selector>

然后再在main.xml中添加android:button="@drawable/radio_selector"，修改后代码如下：

<LinearLayout 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:orientation="vertical">

    <TextView
        android:id="@+id/colortv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="你喜欢什么颜色：" />
    <RadioGroup 
        android:id="@+id/color"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkedButton="@+id/red">
        <RadioButton 
            android:id="@+id/red"
            android:text="红色"
            android:button="@drawable/radio_selector"
            android:textColor="#ff0000"/>
        <RadioButton 
            android:id="@+id/black"
            android:button="@drawable/radio_selector"
            android:text="黑色"/>
        <RadioButton 
            android:id="@+id/green"
            android:button="@drawable/radio_selector"
            android:text="绿色"
            android:textColor="#00ff00"/>
    </RadioGroup>
	 <TextView
        android:id="@+id/sextv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="你的性别是：" />
    <RadioGroup 
        android:id="@+id/sex"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkedButton="@+id/male"
        android:orientation="horizontal">
        <RadioButton 
            android:id="@+id/male"
            android:button="@drawable/radio_selector"
            android:text="男"/>
        <RadioButton 
            android:id="@+id/female"
            android:button="@drawable/radio_selector"
            android:text="女"/>
    </RadioGroup>
</LinearLayout>

运行后的效果如下：

注意看按钮和字体间的距离，很宽，而且不可以调（设置组件的padding值就可以调里面内容的距离）。主要是因为系统已经帮你调了间距，所以这个方法不好。

第二种：

radio_selector.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true"
        android:state_enabled="true"
        android:drawable="@drawable/check_down"></item>
     <item android:state_checked="false"
         android:state_enabled="true"
        android:drawable="@drawable/check_normal"></item>
     <item android:drawable="@drawable/check_normal"></item>
</selector>

main.xml：

<LinearLayout 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:orientation="vertical">

    <TextView
        android:id="@+id/colortv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="你喜欢什么颜色：" />
    <RadioGroup 
        android:id="@+id/color"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkedButton="@+id/red">
        <RadioButton 
            android:id="@+id/red"
            android:text="红色"
            android:button="@null"
            android:drawableLeft="@drawable/radio_selector"
            android:textColor="#ff0000"/>
        <RadioButton 
            android:id="@+id/black"
            android:button="@null"
            android:drawableLeft="@drawable/radio_selector"
            android:text="黑色"/>
        <RadioButton 
            android:id="@+id/green"
            android:button="@null"
            android:drawableLeft="@drawable/radio_selector"
            android:text="绿色"
            android:textColor="#00ff00"/>
    </RadioGroup>
	 <TextView
        android:id="@+id/sextv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="你的性别是：" />
    <RadioGroup 
        android:id="@+id/sex"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkedButton="@+id/male"
        android:orientation="horizontal">
        <RadioButton 
            android:id="@+id/male"
            android:button="@null"
            android:drawableLeft="@drawable/radio_selector"
            android:text="男"/>
        <RadioButton 
            android:id="@+id/female"
            android:button="@null"
            android:drawableLeft="@drawable/radio_selector"
            android:text="女"/>
    </RadioGroup>
</LinearLayout>

运行效果：

发现偏离了（背景还是占位），把背景去掉。

main.xml：

<LinearLayout 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:orientation="vertical">


    <TextView
        android:id="@+id/colortv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="你喜欢什么颜色：" />
    <RadioGroup 
        android:id="@+id/color"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkedButton="@+id/red">
        <RadioButton 
            android:id="@+id/red"
            android:text="红色"
           android:button="@null"
           android:drawableLeft="@drawable/radio_selector"
            android:drawablePadding="5dp"
            android:background="@null"
            android:textColor="#ff0000"/>
        <RadioButton 
            android:id="@+id/black"
           android:button="@null"
           android:drawableLeft="@drawable/radio_selector"
            android:drawablePadding="5dp"
            android:background="@null"
            android:text="黑色"/>
        <RadioButton 
            android:id="@+id/green"
            android:button="@null"
           android:drawableLeft="@drawable/radio_selector"
            android:drawablePadding="5dp"
            android:background="@null"
            android:text="绿色"
            android:textColor="#00ff00"/>
    </RadioGroup>
	 <TextView
        android:id="@+id/sextv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="你的性别是：" />
    <RadioGroup 
        android:id="@+id/sex"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checkedButton="@+id/male"
        android:orientation="horizontal">
        <RadioButton 
            android:id="@+id/male"
            android:button="@null"
            android:drawableLeft="@drawable/radio_selector"
            android:background="@null"
            android:drawablePadding="5dp"
            android:text="男"/>
        <RadioButton 
            android:id="@+id/female"
             android:button="@null"
            android:drawableLeft="@drawable/radio_selector"
            android:background="@null"
            android:drawablePadding="5dp"
            android:text="女"/>
    </RadioGroup>
</LinearLayout>

和没调整距离之前的main.xml多了两行代码

android:drawablePadding="5dp"     //调整图片与字体的距离

android:background="@null"        //去除系统图片占位

这里说个开发规范的事情，就是我们可以发现radiobutton有很多一样的代码，所以我们可以把他写成一个style，便于维护。

上面两个方法各位可以根据自己的需求选择，今天就说到这里。