這個是我非常久曾經實現的了，當時記錄到我有道雲筆記裏面，翻閱筆記的時候，發現了這個東西的存在，打算分享給大家，可能對大家來說已經不是什麽新奇貨了。可是能夠幫助新學的了解一下android xml相關的知識。

首先我來看兩張效果圖：

看到這兩張圖片，可能對於非常多新學Android的同學來說，第一時間想到的可能就是RadioGroup裏面包裹兩個RadioButton按鈕，然後分別設置其背景圖片。由於當時我接手的幾個殘缺項目（別人沒有做完就跑了）大概都是這樣實現的。

由於這種原因，我才認為事實上xml+RadioGroup全然能夠實現相同的效果（當然還有其它非常多方式哈）。

第一步，我們先分析下這個界面，盡管非常easy，可是還是有值得註意的地方。

（1）整個RadioGroup的背景是白色的，選中的時候RadioButton的背景是黃色，字體顏色為白色

（2）當未選中的時候背景為白色。字體顏色為黃色

（3）最外面的RadioGroup的弧度和RadioButton的弧度保持一致

（4）裏面RadioButton與RadioGroup之間存在一定的距離

第二步。通過上面簡單的分析，我們大體在心中知道了應該怎麽樣做了吧，如今我們就來簡單的實現一下。

首先書寫我們的布局：RadioGroup包裹兩個RadioButton按鈕

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height
 
="wrap_content"
        android:background="#ff6d00" >

        <RadioGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_margin="5dp"
            android:background="#ffffff"
            android:orientation="horizontal" >

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RadioGroup>
    </RelativeLayout>

</LinearLayout>

通過以上簡單的代碼。我們能夠實現下面的效果：

是不是非常醜？沒事後面我會具體的一步一步的解說。

1.我們先來實現RadioGroup的弧度，
在res->drawable下新建shape_radiogroup_bg.xml,寫入下面代碼:

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

    <!-- 設置弧度 -->

    <corners android:radius="100dp" />
    <!-- 設置顏色 -->
    <solid android:color="#ffffff" />

</shape>

然後將 RadioGroup的android:background=”#ffffff”。這個屬性

改動成android:[email protected]/shape_radiogroup_bg”

即，引用我們剛剛寫好的shape_radiogroup_bg.xml

2.如今我須要對RadioButton做一些手腳了在我們的res->values下新建style_radiobutton_left.xml，style_radiobutton_right.xml ,寫入下面代碼：

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

    <style name="radiobutton_left">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">40dp</item>
        <item name="android:layout_marginLeft">2dp</item>
        <item name="android:layout_marginRight">0dp</item>
        <item name="android:layout_marginTop">2dp</item>
        <item name="android:layout_marginBottom">2dp</item>
        <item name="android:gravity">center</item>
        <item name="android:button">@null</item>
        <item name="android:textSize">18sp</item>
        <item name="android:width">70dp</item>
    </style>

</resources>

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

    <style name="radiobutton_right">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">40dp</item>
        <item name="android:layout_marginLeft">0dp</item>
        <item name="android:layout_marginRight">2dp</item>
        <item name="android:layout_marginTop">2dp</item>
        <item name="android:layout_marginBottom">2dp</item>
        <item name="android:gravity">center</item>
        <item name="android:button">@null</item>
        <item name="android:textSize">18sp</item>
        <item name="android:width">70dp</item>
    </style>

</resources>

然後分別在RadioButton去引用這個兩個xml, [email protected]/radiobutton_left”,[email protected]/radiobutton_left”。如今的效果圖為：

接下來。我們就須要給每個RadioButton去選中和未選中的背景顏色，在我們的res->drawable下分別新建下面xml:

/res/drawable/selector_radiobutton_bg_left.xml
/res/drawable/selector_radiobutton_bg_right.xml
/res/drawable/shape_radiobutton_left_.xml
/res/drawable/shape_radiobutton_left.xml
/res/drawable/shape_radiobutton_right_.xml
/res/drawable/shape_radiobutton_right.xml

一共六個，是不是有點多？事實上非常多都是一樣的，
代碼分別為：

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

    <item android:drawable="@drawable/shape_radiobutton_left" android:state_checked="true"></item>
    <item android:drawable="@drawable/shape_radiobutton_left_" android:state_checked="false"></item>
</selector>

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

    <item android:drawable="@drawable/shape_radiobutton_right" android:state_checked="true"></item>
    <item android:drawable="@drawable/shape_radiobutton_right_" android:state_checked="false"></item>
</selector>

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

    <!-- 填充的顏色 -->
    <solid android:color="#ffffff" />
    <!-- 設置按鈕的四個角為弧形 -->
    <!-- android:radius 弧形的半徑 -->
    <corners android:radius="100dip" />

</shape>

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

    <!-- 填充的顏色 -->
    <solid android:color="#Ff6d00" />
    <!-- 設置按鈕的四個角為弧形 -->
    <!-- android:radius 弧形的半徑 -->
    <corners android:bottomLeftRadius="20dp" android:bottomRightRadius="0dp" android:topLeftRadius="20dp" android:topRightRadius="0dp" />

</shape>

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

    <!-- 填充的顏色 -->
    <solid android:color="#ffffff" />
    <!-- 設置按鈕的四個角為弧形 -->
    <!-- android:radius 弧形的半徑 -->
    <corners android:radius="100dip" />

</shape>

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

    <!-- 填充的顏色 -->
    <solid android:color="#Ff6d00" />
    <!-- 設置按鈕的四個角為弧形 -->
    <!-- android:radius 弧形的半徑 -->
    <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="20dp" android:topLeftRadius="0dp" android:topRightRadius="20dp" />

</shape>

然後分別在RadioButton去引用這個兩個xml,

android:[email protected]/selector_radiobutton_bg_left”,

android:[email protected]/selector_radiobutton_bg_right”

之後便是給我們的文字設置顏色了，新建：/res/drawable/radiobutton_text_selector.xml

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


    <item android:state_checked="false" android:color="#ff6d00"></item>  
    <item android:state_checked="true" android:color="#ffffff"></item>  
</selector>

之後使用android:[email protected]/radiobutton_text_selector” 引用我們的radiobutton_text_selector.xml文件，到此。就完畢了全部的代碼了。小夥伴趕快也試一試吧。

仿QQ切換button，純代碼實現，告別圖片