你不能错过的RadioButton实践

前言

上一篇给你们留的“课后做业”登陆和注册相信小伙伴们根据咱们提供的demo都已经完成啦，那么这一篇文章咱们继续讲实战中会遇到的一些主要功能，话很少说，让咱们进入今天的正文环节！！！

场景

RadioButton 单选按钮 ，在实际开发中应用很普遍。通常用于实现控件设置选择样式或者有一组控件设置其中一个效果选中效果，例如微信底部Tab栏切换效果等。这种需求下通常会将几个RadioButton放在一个RadioGroup中控制。RadioGroup继承自LinearLayout，能够设置RadioGroup的排列方向。

这里我先不介绍RadioButton的属性，从名字上就能够看出来它本质也是一个Button，可是实现了checkable接口，继承关系以下：

java.lang.Object
 ↳android.view.View 	   
  ↳android.widget.TextView
   ↳android.widget.Button	 
    ↳android.widget.CompoundButton	 	 	 	 
     ↳android.widget.RadioButton
复制代码

因而可知，RadioButton具备Button的属性，却多了选中的效果和逻辑。

简单演示

Let me just show you code!来看一段效果展现男女性别单选界面逻辑。

<RadioGroup android:id="@+id/radioGroup" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal">
   <RadioButton android:id="@+id/btnMan" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="男" android:checked="true"/>
    <RadioButton android:id="@+id/btnWoman" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="女"/>
</RadioGroup>
复制代码

效果如图所示：

可是每每根据真实需求来开发的时候，须要设置RadioButton的background中的selector才能实现效果。若是使用RadioGroup和RadioButton的组合的话，如何实现微信下方四个tab栏目的布局效果呢？（切换tab后图标和文字颜色跟着变成对应选中/未选中状态）

实现微信底部Tab效果

默认的RadioButton的样式首先须要去除

RadioButton默认是前面带有圆点的，去掉前面圆点

android:button="@null" 
复制代码

让RadioButton的文本水平居中

android:gravity="center_horizontal"
复制代码

给RadioButton设置选中和未选中的样式选择器

在drawable文件夹下新建四个tab图标选择器，这里粘贴首页图标的选择器tab_home_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<!--这里只粘贴出来首页小图标的样式，准备好2个资源图片，选中和未选中样式的各一张-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/tab_home_checked" android:state_checked="true" />
    <item android:drawable="@mipmap/tab_home_unchecked" />
</selector>
复制代码

在drawable文件夹下新建1个TextColor的颜色选择器tab_text_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#07c563" android:state_checked="true" />
    <item android:color="#41413b" />
</selector>
复制代码

给RadioButton设置drawableTop为选择器样式，设置完四个tab后代码以下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".RadioActivity">
<!--这里每一个RadioButton具备不少相同的属性，能够在values/styles文件中定义一个tab样式，将共有属性抽取出来，同时也应该将字符串常量抽取到strings文件中，方便维护与代码管理。这里为了演示属性，不作抽取--> 
    <RadioGroup android:id="@+id/radioGroup" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="horizontal" android:paddingTop="10dp" android:paddingBottom="10dp">

        <RadioButton android:id="@+id/rbHome" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:checked="true" android:textColor="@drawable/tab_text_selector" android:drawableTop="@drawable/tab_home_selector" android:gravity="center_horizontal" android:text="首页" />

        <RadioButton android:id="@+id/rbDiscovery" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@null" android:button="@null" android:textColor="@drawable/tab_text_selector" android:drawableTop="@drawable/tab_discovery_selector" android:gravity="center_horizontal" android:text="发现" />

        <RadioButton android:id="@+id/rbContacts" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@null" android:button="@null" android:textColor="@drawable/tab_text_selector" android:drawableTop="@drawable/tab_contacts_selector" android:gravity="center_horizontal" android:text="通信录" />

        <RadioButton android:id="@+id/rbMe" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@null" android:button="@null" android:textColor="@drawable/tab_text_selector" android:drawableTop="@drawable/tab_me_selector" android:gravity="center_horizontal" android:text="我" />
    </RadioGroup>
    
    <View android:layout_width="match_parent" android:layout_height="1dp" android:layout_alignTop="@+id/radioGroup" android:background="@color/colorPrimaryDark" />
    
</RelativeLayout>
复制代码

实现效果以下：是否是已经初具微信底部导航栏的样式了？别慌，只有这些设置， 运行到真机上去会发现图标大小和距离都无法改变，下面我会教给你们配合java代码控制RadioButto弄到Drawable的样式

修改间距和大小的关键代码：

/** * 演示RadioButton等用法 * * @author xmkh * @date 2019年8月21日 15:27:59 */
public class RadioActivity extends AppCompatActivity {

    private RadioButton mRbHome;
    private RadioButton mRbDiscovery;
    private RadioButton mRbContacts;
    private RadioButton mRbMe;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_radio);
        RadioGroup rg = findViewById(R.id.radioGroup);
        mRbHome = findViewById(R.id.rbHome);
        mRbContacts = findViewById(R.id.rbContacts);
        mRbDiscovery = findViewById(R.id.rbDiscovery);
        mRbMe = findViewById(R.id.rbMe);
        initView();
        //设置RadioGroup的按钮组监听
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
                switch (checkedId) {
                    case R.id.rbHome:
                        //TODO 设置其余业务处理
                        break;
                    case R.id.rbContacts:
                        //TODO 设置其余业务处理
                        break;
                    case R.id.rbDiscovery:
                        //TODO 设置其余业务处理
                        break;
                    case R.id.rbMe:
                        //TODO 设置其余业务处理
                        break;
                    default:
                        break;
                }
            }
        });
    }


    /** * 动态设置每一个tab的图片宽高以及文字间距 * * @param selector RadioButton的样式选择器 * @param rb RadioButton的样式选择器 */
    private void setStyle(int selector, RadioButton rb) {
        //定义底部标签图片大小和位置
        Drawable drawableHome = getResources().getDrawable(selector);
        //当这个图片被绘制时，给他绑定一个矩形 ltrb规定这个矩形， 这里就是设置图片大小的地方
        drawableHome.setBounds(0, 0, 80, 80);
        //设置图片在文字的哪一个方向
        rb.setCompoundDrawables(null, drawableHome, null, null);
    }

      /** * 动态设置四个tab的样式 */
    private void initView() {
        setStyle(R.drawable.tab_home_selector, mRbHome);
        setStyle(R.drawable.tab_contacts_selector, mRbContacts);
        setStyle(R.drawable.tab_discovery_selector, mRbDiscovery);
        setStyle(R.drawable.tab_me_selector, mRbMe);
    }

}
复制代码

至此，基本效果已经实现。好了，本次RadioButton和RadioGroup的分享到此结束。

结语

怎么样？！是否是已经火烧眉毛的想实现本身主界面中的部分逻辑了呢？！ 一些聪明小伙伴确定也发现告终合咱们前面所讲的一系列文章，我的中心的一些功能也能够完成啦（忘记了的小伙伴小编这里给你提个醒：设置性别，更改昵称，修改头像等等）！！也欢迎各位小伙伴加入咱们的微信技术交流群，在公众号中回复微信群，就能够加入其中，也能够在公众号中回复视频，里面有一些初学者视频哦~

PS:若是还有未看懂的小伙伴，欢迎加入咱们的QQ技术交流群：892271582，里面有各类大神回答小伙伴们遇到的问题，咱们的微信群立刻也将要和你们见面啦，届时但愿你们踊跃加入其中~~