RadioButton的总结

前言

单选按钮，在很多地方都可以用到，比如底部导航栏，仿TabLaoyut实现ViewPager切换效果等等。就像这样子。

还有这样子

同样的，废话不多说，直接来看怎么操作。

首先，我来个简单的

在布局文件中加入

<RadioGroup
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_height="50dp">

        <RadioButton
            android:layout_width="wrap_content"
            android:text="按钮一"
            android:checked="true"
            android:layout_height="match_parent" />

        <RadioButton
            android:layout_width="wrap_content"
            android:text="按钮二"
            android:layout_height="match_parent" />

        <RadioButton
            android:layout_width="wrap_content"
            android:text="按钮三"
            android:layout_height="match_parent" />
    </RadioGroup>

然后直接运行我们的程序，Emmmmmmm，界面长这样

是吧，多么典型的单选按钮，我们点击试试，嗯？？？？？？？怎么选择了两个？？？？？？？

说好的单选按钮的咧！！！

好吧，这是因为我们没有设置RadioButton的id，给每个RadioButton设置一个id就行了。

下面又到了枯燥有趣的属性总结了。

属性	说明	备注
android:button="@drawable/fill"	点击的按钮的样式	可以切换成自己喜欢的图片，设置成@null时就没有小圆圈了哦
android:drawableXXX="@drawable/fill"	设置它周围的图片	实测有效
android:checked="true"	设置默认选中	实测有效

嗯？？？ 这么少？？？是的，我只收集了这些属性，其他的公共的属性就不用了介绍了。

而其中的RadioGroup，大家可以把它看做一个LinearLayout，属性和LinearLayout差不多

显示讲完了，那它的事件监听咧？莫慌，老夫这就把武功秘籍粘贴出来

RadioGroup rg = findViewById(R.id.rg);
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId){
                    case R.id.id1:
                        Log.e("RB","点击了第一个RadioButton");
                        break;
                    case R.id.id2:
                        Log.e("RB","点击了第二个RadioButton");
                        break;
                    case R.id.id3:
                        Log.e("RB","点击了第三个RadioButton");
                        break;
                }
            }
        });

这样子，就把它的点击事件完成了。内容只有这么多，是不是很简单。嘿嘿

哦，对了，还有上面的两种效果没实现，我们先来实现第二种（简单的那个），步骤如下：

1、首先将原生的小圆圈去掉，没错，就是设置

android:button="@null"

2、将整体分成3个部分，既然RadioGroup的本体是LinearLayout，那么，我们直接使用权重将它分成3份即可，然后设置文字居中，全部代码如下

<RadioGroup
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_marginTop="30dp"
        android:weightSum="3"
        android:layout_height="40dp">

        <RadioButton
            android:layout_width="wrap_content"
            android:text="按钮一"
            android:gravity="center"
            android:layout_weight="1"
            android:button="@null"
            android:checked="true"
            android:layout_height="match_parent" />

        <RadioButton
            android:layout_width="wrap_content"
            android:text="按钮二"
            android:button="@null"
            android:gravity="center"
            android:layout_weight="1"
            android:layout_height="match_parent" />

        <RadioButton
            android:layout_width="wrap_content"
            android:text="按钮三"
            android:button="@null"
            android:gravity="center"
            android:layout_weight="1"
            android:layout_height="match_parent" />
    </RadioGroup>

这样子，配合ViewPager就可以实现界面切换了。

而要实现第一种效果，我们只需要在第二种的基础上加点修饰文件，比如，给最外层的RadioGroup加上圆角和边框。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp" />
    <stroke android:width="3dp" android:color="#7c7c7e" />
</shape>

然后，给每个RadioButton加上对应的圆角和边框并设置点击变色效果

左边需要设置左上左下的圆角，如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" >
        <shape>
            <solid android:color="#7c7c7e"/>
            <corners android:topLeftRadius="10dp" android:bottomLeftRadius="10dp"/>
        </shape>
    </item>
    <item android:state_checked="false" >
        <shape>
            <solid android:color="#FFFFFF"/>
            <stroke android:width="1dp" android:color="#7c7c7e" />
            <corners android:topLeftRadius="10dp" android:bottomLeftRadius="10dp"/>
        </shape>
    </item>
</selector>

右边需要设置右上右下的圆角，如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" >
        <shape>
            <solid android:color="#7c7c7e"/>
            <corners android:bottomRightRadius="10dp" android:topRightRadius="10dp"/>
        </shape>
    </item>
    <item android:state_checked="false" >
        <shape>
            <solid android:color="#FFFFFF"/>
            <stroke android:width="1dp" android:color="#7c7c7e" />
            <corners android:bottomRightRadius="10dp" android:topRightRadius="10dp"/>
        </shape>
    </item>
</selector>

中间的不需要设置圆角，如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" >
        <shape>
            <solid android:color="#7c7c7e"/>
        </shape>
    </item>
    <item android:state_checked="false" >
        <shape>
            <solid android:color="#FFFFFF"/>
            <stroke android:width="1dp" android:color="#7c7c7e" />
        </shape>
    </item>
</selector>

这些实现之后，可以看到，背景颜色跟随点击的效果而变化了，但是文字的咋办？冒的事，我们在res下新建color文件夹，新建xml文件，添加如下内容：

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

这样子，只需要将字体颜色设置成这个，就会随点击自动切换了。

那么整个的代码如下：

<RadioGroup
        android:layout_width="200dp"
        android:orientation="horizontal"
        android:weightSum="3"
        android:layout_marginTop="30dp"
        android:layout_gravity="center"
        android:padding="1dp"
        android:background="@drawable/radiogroup_shape_bg"
        android:layout_height="30dp">

        <RadioButton
            android:layout_width="0dp"
            android:text="按钮一"
            android:layout_weight="1"
            android:id="@+id/rb_1"
            android:button="@null"
            android:checked="true"
            android:textColor="@color/testcolor"
            android:background="@drawable/rb_shape_left"
            android:gravity="center"
            android:layout_height="match_parent" />

        <RadioButton
            android:layout_width="0dp"
            android:text="按钮二"
            android:gravity="center"
            android:button="@null"
            android:id="@+id/rb_2"
            android:textColor="@color/testcolor"
            android:background="@drawable/rb_shape_center"
            android:layout_weight="1"
            android:layout_height="match_parent" />

        <RadioButton
            android:layout_width="0dp"
            android:text="按钮三"
            android:gravity="center"
            android:id="@+id/rb_3"
            android:button="@null"
            android:textColor="@color/testcolor"
            android:background="@drawable/rb_shape_right"
            android:layout_weight="1"
            android:layout_height="match_parent" />
    </RadioGroup>

解释一下，这里为什么要加上padding = "1dp"，这是因为，每个RadioButton都有一个1dp的边框宽度，而重合的地方则有2dp的宽度，所以，我们在最外层再加上1dp的宽度。这就是原因。

好了，这篇文章先到这里，后期有新的的再补充（客套话）。