Android RadioButton 的点击效果

效果图

控件

<RadioGroup
    android:divider="@drawable/wosim_rg_divider"
    android:showDividers="middle"
    android:background="@drawable/wosim_rg_bg"
    android:id="@+id/wosim_traffic_enjoy_package_rg"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:orientation="horizontal">

    <RadioButton
        android:id="@+id/wosim_traffic_enjoy_package_unicom_rb"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/wosim_selector_rb_left"
        android:button="@null"
        android:checked="true"
        android:gravity="center"
        android:text="@string/wosim_china_unicom"
        android:textColor="@drawable/wosim_selector_rb_text_color"
        android:textSize="13sp"/>

    <RadioButton
        android:id="@+id/wosim_traffic_enjoy_package_telecom_rb"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/wosim_selector_rb_middle"
        android:button="@null"
        android:gravity="center"
        android:text="@string/wosim_china_telecom"
        android:textColor="@drawable/wosim_selector_rb_text_color"
        android:textSize="13sp"/>

    <RadioButton
        android:id="@+id/wosim_traffic_enjoy_package_mobile_rb"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/wosim_selector_rb_right"
        android:button="@null"
        android:gravity="center"
        android:text="@string/wosim_china_mobile"
        android:textColor="@drawable/wosim_selector_rb_text_color"
        android:textSize="13sp"/>
</RadioGroup>

样式

• rb_left_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <corners
        android:bottomLeftRadius="4dp"
        android:topLeftRadius="4dp"/>
    <solid android:color="#ff71a8f4"/>
</shape>

• rb_middle_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#ff71a8f4"/>
</shape>

• rb_right_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <corners
        android:bottomRightRadius="4dp"
        android:topRightRadius="4dp"/>
    <solid android:color="#ff71a8f4"/>
</shape>

• rg_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <corners android:radius="4dp"/>
    <stroke
        android:width="0.5dp"
        android:color="#ff71a8f4"/>
</shape>

• rg_divider.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <size android:width="0.5dp"/>
    <solid android:color="#ff71a8f4"/>
</shape>

• selector_rb_left.xml

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

• selector_rb_middle.xml

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

• selector_rb_right.xml

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

• selector_rb_text_color.xml

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