使用RadioGroup做简单的按钮下划线切换效果

有时候我们使用简单的按钮切换，大多数都用button通过设置他们自身的属性来展示按钮的切换效果，这样会出现很多set方法，在代码里显示的很臃肿，并且不能直观的通过xml展现出来,记录一下通过RadioGroup实现单行按钮的切换，主要是通过设置RadioButton的background的属性来显示下划线的效果，方便实用，如图：

1598584265(1).jpg

具体实现：

<RelativeLayout
        android:background="#3B4EAF"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_marginTop="60dp">
        <View
            android:layout_alignParentBottom="true"
            android:background="#000000"
            android:layout_width="match_parent"
            android:layout_height="3dp"/>
        <RadioGroup
            android:id="@+id/radioGroup"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/rb_first"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/selector_radiobutton"
                android:button="@null"
                android:checked="true"
                android:gravity="center"
                android:padding="8dp"
                android:text="first"
                android:textColor="@drawable/selector_title_color"
                android:textSize="24sp"/>

            <RadioButton
                android:id="@+id/rb_second"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/selector_radiobutton"
                android:button="@null"
                android:gravity="center"
                android:padding="8dp"
                android:text="second"
                android:textColor="@drawable/selector_title_color"
                android:textSize="24sp"/>

            <RadioButton
                android:id="@+id/rb_third"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/selector_radiobutton"
                android:button="@null"
                android:gravity="center"
                android:padding="8dp"
                android:text="third"
                android:textColor="@drawable/selector_title_color"
                android:textSize="24sp"/>
        </RadioGroup>

    </RelativeLayout>

selector_radiobutton.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>
                <shape>
                    <solid android:color="#ffffff"/>
                </shape>
            </item>
            <!--上面覆盖一层距离底层的底部3dp,填充白色。两层叠加一起就形成了一条下划线效果，原理自行脑补-->
            <item android:bottom="3dp">
                <shape>
                    <solid android:color="#ff0000"/>
                </shape>
            </item>
        </layer-list>
    </item>
    <item
        android:drawable="@android:color/transparent">
    </item>
</selector>

selector_title_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:color="#ffffff" android:state_checked="true">
    </item>

    <item
        android:color="#000000" android:state_pressed="true">
    </item>

    <item
        android:color="#000000">
    </item>

</selector>

更复杂的效果还要根据具体情况来实现