使用RadioButton自定义样式实现喜马拉雅底部的切换功能

效果展示

布局文件的书写

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
        >

    <RadioGroup
            android:id="@+id/radiogroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true"
            android:background="#ffffff"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            >
        <RadioButton
                android:id="@+id/rabt01"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableTop="@drawable/selector_radionbutton01_bg"
                android:text="@string/search_name"
                android:textColor="#272727"
                android:gravity="center"
                android:paddingLeft="5dp"

                />

        <RadioButton
                android:id="@+id/rabt02"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableTop="@drawable/selector_radionbutton02_bg"
                android:gravity="center"
                android:paddingLeft="5dp"
                android:text="@string/down_name"
                android:textColor="#272727"
                />
        <RadioButton
                android:id="@+id/rabt03"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableTop="@drawable/selector_radionbutton03_bg"
                android:gravity="center"
                android:paddingLeft="5dp"
                android:text="@string/ting_name"
                android:textColor="#272727"
                />

        <RadioButton
                android:id="@+id/rabt04"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:button="@null"
                android:drawableTop="@drawable/selector_radionbutton04_bg"
                android:gravity="center"
                android:paddingLeft="5dp"
                android:includeFontPadding="true"
                android:text="@string/my_name"
                android:textColor="#272727"
                android:checked="false"
                />



    </RadioGroup>
</RelativeLayout>

radiobutton背景选择器

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

</selector>

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

</selector>

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

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

activity书写

package com.ht.myapp150427;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;

public class MainActivity extends Activity {
    /**
     * Called when the activity is first created.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RadioGroup radioGroup = (RadioGroup) findViewById(R.id.radiogroup);
        RadioButton radioButton01 = (RadioButton) findViewById(R.id.rabt01);
        RadioButton radioButton02 = (RadioButton) findViewById(R.id.rabt02);
        RadioButton radioButton03 = (RadioButton) findViewById(R.id.rabt03);
        RadioButton radioButton04 = (RadioButton) findViewById(R.id.rabt04);


        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int checkID) {
                switch (checkID) {
                    case R.id.rabt01:
                        radioButton01.setTextColor(Color.rgb(220, 20, 60));
                        radioButton02.setTextColor(Color.rgb(0, 0, 0));
                        radioButton03.setTextColor(Color.rgb(0, 0, 0));
                        radioButton04.setTextColor(Color.rgb(0, 0, 0));
                        break;
                    case R.id.rabt02:
                        radioButton02.setTextColor(Color.rgb(220, 20, 60));
                        radioButton01.setTextColor(Color.rgb(0, 0, 0));
                        radioButton03.setTextColor(Color.rgb(0, 0, 0));
                        radioButton04.setTextColor(Color.rgb(0, 0, 0));
                        break;
                    case R.id.rabt03:
                        radioButton03.setTextColor(Color.rgb(220, 20, 60));
                        radioButton01.setTextColor(Color.rgb(0, 0, 0));
                        radioButton02.setTextColor(Color.rgb(0, 0, 0));
                        radioButton04.setTextColor(Color.rgb(0, 0, 0));
                        break;
                    case R.id.rabt04:
                        radioButton04.setTextColor(Color.rgb(220, 20, 60));
                        radioButton01.setTextColor(Color.rgb(0, 0, 0));
                        radioButton02.setTextColor(Color.rgb(0, 0, 0));
                        radioButton03.setTextColor(Color.rgb(0, 0, 0));
                        break;
                }


            }
        });

    }
}

改进

??我们也可以把字体颜色的改变写一个背景选择器，这样就可以省去在代码中写监听器了。

项目代码下载地址

https://github.com/zhujainxipan/radiogroup

知识讲解

??在android开发中，往往我们需要自定义RadioButton中button图片和文字的距离，经过多番查找资料，得知解决办法如下：

• android:button=@null;//将默认的button图片清空

• android:drawableLeft=@drawable/radiobutton;//使用该属性定义button图片

• android:background=@null;//将radioButton的背景设为空

• android:drawablePadding=6dp;//将文字和左侧的button图片相距6dp

• button/drawableLeft/background/drawablePadding结合使用方可改变文字和图片的距离 ;

?

另外就是android选择器的知识点

?

radiogroup中如果嵌套布局，radiobutton就可以多选了，就不是我们想要的效果了。

?

android对资源文件的大小有限制，图片最大1m。

感恩：

RadioButton设置了gravity=center，发现文字还不居中，求指导
http://www.eoeandroid.com/thread-273181-1-1.html

Android RadioGroup中的RadioButton竟然能多选?
http://www.eoeandroid.com/thread-67458-1-1.html

http://blog.csdn.net/libaineu2004/article/details/41550447

Android中如何设置RadioButton在文字的右边，图标在左边？
http://www.2cto.com/kf/201208/150848.html

Android自定义radiobutton(文字靠左，选框靠右)
http://blog.csdn.net/helldevil/article/details/7963174

自定义RadioButton样式并去除默认样式位置
http://blog.csdn.net/shenyuemei/article/details/22172793

android自定义RadioGroup的RadioButton中文字和图片的距离
http://www.eoeandroid.com/thread-103444-2-1.html

Android radiobutton图片与文字间距的问题
http://www.oschina.net/question/222459_56046