你不能错过的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>

效果如图所示:

但是往往根据真实需求来开发的时候,需要设置 RadioButtonbackground中的 selector才能实现效果。如果使用 RadioGroupRadioButton的组合的话,如何实现微信下方四个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);
    }

}

至此,基本效果已经实现。好了,本次 RadioButtonRadioGroup的分享到此结束。

本文分享自微信公众号 - 下码看花(gh_d16267287c27)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Super 前端

tomcat的jvm和session同步配置

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

9510
来自专栏Super 前端

iBatis搭建JAVA项目

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

9120
来自专栏Super 前端

Ajax与Comet

Ajax(Asynchronous JavaScript + XML的简写)可以向服务器请求数据而无需卸载(刷新)页面,带来更好的用户体验。 Ajax技术的...

11620
来自专栏Super 前端

Ajax在jQuery中应用--jQuery基础知识点(5)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

8420
来自专栏AI科技时讯

目标检测图像数据增强(Data Augmentation)—— 旋转

由于业务需求,需要对部分不符合检测结果的图像进行过滤,因此需要对之前的检测项目进行优化。常见问题有如下亮点:

9920
来自专栏JiekeXu之路

Python爬虫常用库的安装

Urllib、re是自带的库,而requests库可使用pip3 install requests安装

15020
来自专栏Java研发军团

SpringBoot注解大全,收藏一波!!!

@SpringBootApplication:包含了@ComponentScan、@Configuration和@EnableAutoConfiguration...

10140
来自专栏蚂蚁开源社区

微信小程序实战教程:火车票查询(含demo)

微信小程序自九月份推出内测资格以来,经历了舆论热潮到现在看似冷清,但并不意味着大家不那么关注或者不关注了。我想不管是否有内测资格,只要是感兴趣的开发者已经进入潜...

26130
来自专栏Super 前端

jQuery中调用JSON和XML数据--jQuery基础知识点(6)

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

8620
来自专栏Android小知识

CLEARTEXT communication to *** not permitted by network security policy

30720

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励