仿QQ切换按钮，纯代码实现，告别图片
这个是我很久以前实现的了，当时记录到我有道云笔记里面，翻阅笔记的时候，发现了这个东西的存在，打算分享给大家，可能对大家来说已经不是什么新鲜货了，但是可以帮助新学的了解一下android xml相关的知识。
首先我来看两张效果图：
看到这两张图片，可能对于很多新学Android的同学来说，第一时间想到的可能就是RadioGroup里面包裹两个RadioButton按钮，然后分别设置其背景图片。因为当时我接手的几个残缺项目（别人没有做完就跑了）大概都是这样实现的。因为这样的原因，我才觉得其实xml+RadioGroup完全可以实现同样的效果（当然还有其他很多方式哈）。
第一步，我们先分析下这个界面，虽然很简单，但是还是有值得注意的地方。
（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:background=”@drawable/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, style=”@style/radiobutton_left”,style=”@style/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:background=”@drawable/selector_radiobutton_bg_left”,
android:background=”@drawable/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:textColor=”@drawable/radiobutton_text_selector” 引用我们的radiobutton_text_selector.xml文件，到此，就完成了所有的代码了。小伙伴赶快也试一试吧。