RadioButton——下划线效果

---

1、需求

在开发中，我们经常会要实现一个RadioGroup（一个RadioGroup中包含多个RadioButton）中点击某个按钮，然后去实现某个操作。
这个时候要一个选中状态的标示，很多时候是在下面加一个横线，效果如下：

---

2、实现

通过xml文件来实现这个效果：

首先，我们肯定需要一个selector，关键是怎么在selector来实现下面的横线;
（1）首先我们需要给radiobutton一个固定的高度，比如48dp;
（2）然后要使用到layer-list，layer-list是用来叠加多个效果的，这里我们只有一个效果，在layer-list中，我们使用shape来实现横条，并且让他距离top44dp，这样横线的高度就是4dp，并且在下方显示。

最终整个xml文件代码如下：

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

    <item android:state_checked="true">
        <layer-list>
            <item android:top="44dp">
                <shape android:shape="rectangle" >
                    <solid android:color="#ff0000" />
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:drawable="@color/transparent"></item>

</selector>

最后在radiobutton中设置android:background即可。

<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" >

<RadioGroup
    android:id="@+id/radioGroup1"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:orientation="horizontal" >

    <RadioButton
        android:id="@+id/radio0"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/button_underlin"
        android:button="@null"
        android:checked="true"
        android:gravity="center"
        android:text="咨询" />

    <RadioButton
        android:id="@+id/radio1"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/button_underlin"
        android:button="@null"
        android:gravity="center"
        android:text="热点" />

    <RadioButton
        android:id="@+id/radio2"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/button_underlin"
        android:button="@null"
        android:gravity="center"
        android:text="博客" />

    <RadioButton
        android:id="@+id/radio3"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/button_underlin"
        android:button="@null"
        android:gravity="center"
        android:text="推荐" />
</RadioGroup>

<FrameLayout
    android:id="@+id/fragment"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
</FrameLayout>
</LinearLayout>

---

3、参考文献

1、RadioButton点击带下划线效果
2、RadioButton下划线效果的使用