Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
社区首页 >专栏 >你不能错过的RadioButton实践

你不能错过的RadioButton实践

作者头像
下码看花
发布于 2019-09-02 09:05:03
发布于 2019-09-02 09:05:03
2.1K00
代码可运行
举报
文章被收录于专栏:AndroidStudio初识AndroidStudio初识
运行总次数:0
代码可运行
前言

上一篇给大家留的“课后作业”登录和注册相信小伙伴们根据我们提供的demo都已经完成啦,那么这一篇文章我们继续讲实战中会遇到的一些主要功能,话不多说,让我们进入今天的正文环节!!!

场景

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

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

代码语言:javascript
代码运行次数:0
复制
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!来看一段效果展示男女性别单选界面逻辑

代码语言:javascript
代码运行次数:0
复制
<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默认是前面带有圆点的,去掉前面圆点

代码语言:javascript
代码运行次数:0
复制
android:button="@null"

RadioButton的文本水平居中

代码语言:javascript
代码运行次数:0
复制
android:gravity="center_horizontal"

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

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

代码语言:javascript
代码运行次数:0
复制
<?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

代码语言:javascript
代码运行次数:0
复制
<?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后代码如下:

代码语言:javascript
代码运行次数:0
复制
<?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的样式

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

代码语言:javascript
代码运行次数:0
复制
/**
 * 演示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的分享到此结束。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-08-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 下码看花 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
仿饿了么等APP底部菜单(Fragment实现)
Fragment实现的底部菜单导航,是现在很多APP都有的功能,效果就是点击菜单之后,菜单实现图标和颜色的变换
SmileNicky
2019/01/17
8360
3.复杂的viewpager
实现这样的效果: 1.主页面布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t
六月的雨
2018/05/14
7620
新浪微博布局学习——妙用TabHost
为了更好的开发Android应用程序,除了熟练掌握基本的UI组件和API外,还需要掌握一些技巧,而这些技巧可以通过阅读一些代码来提高,本系列将与大家分享一些新浪微博布局方面的收获,欢迎交流!
飞雪无情
2018/08/28
3730
新浪微博布局学习——妙用TabHost
【Android从零单排系列十】《Android视图控件——RadioButton》
小伙伴们,在上文中我们介绍了Android视图控件ImageView控件,本文我们继续盘点,介绍一下视图控件的第五个控件——RadioButton。
再见孙悟空_
2023/02/10
7980
【Android从零单排系列十】《Android视图控件——RadioButton》
Android新手之旅(7) RadioButton的自定义
希望用到RadioGroup的功能,但遇到一些看似简单问题却无法解决:系统的图标太大却难以更换,在网上找解决方案。有些地方提到,由于用的是图片,所以无法缩小,只好自定义,参考1 参考2 然后,找图标,在sdk文件夹下搜索含radio的文件,很多,选一套合适的即可。 这是在res/drawable下的radiobutton.xml文件 <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item   
用户1075292
2018/01/23
1.3K0
Android新手之旅(7) RadioButton的自定义
底部导航栏的几种实现方式
Android底部导航栏实现方式真的是太多了~在这里仅介绍几种实现方式~建议使用TabLayout +ViewPager ,TabLayout是Android Material Design中的控件,布局文件简单。
小小工匠
2021/08/16
2.2K0
Android 必知必会 - RadioGroup 和 ViewPager 联动
昨天设计图刚出一点,写了《Android 必知必会 - 动态切换着色模式和全屏模式》,记录了动态修改页面显示模式的方式。今天又有新图,不过设计师只考虑 iOS 平台的设计,拿到设计图发现 TabLayout + ViewPager 的套路实现起来很麻烦,考虑了下,为了方便,决定使用 RadioGroup + ViewPager 来实现,之所以使用 RadioGroup ,是因为它内部多个 RadioButton 的状态是互斥的,也就是只有一个是选中状态,不需要我们进行多余的处理。总体来说比较简单,就是细节略多了点。
他叫自己MR.张
2019/07/01
1.2K0
关于安卓开发实现底部菜单栏(已过时做法,不建议使用)
将TabHost的标签放在底部 直接上代码 主代码: 1 package sdut; 2 3 import com.example.sdutfriends.R; 4 5 import android.app.AlertDialog; 6 import android.app.TabActivity; 7 import android.content.DialogInterface; 8 import android.content.Intent; 9 import android.os
听着music睡
2018/05/18
9590
Android 1对1直播源码开发,底部导航栏的简单实现
1、利用LinearLayout+TextView实现 1对1直播源码中底部导航栏的效果。
云豹科技程序员
2021/06/11
6080
RadioButton、CheckBox与ToggleButton
1.RadioButton RadioButton被称作为单选框,通常都是以组的形式出现,可以在一组控件中选择一个。 RadioButton的使用首先需要加入<RadioGroup/>,在这个组中,我们进行单选按钮的声明。 1 <RadioGroup 2 android:id="@+id/radioGroup" 3 android:layout_width="wrap_content" 4 android:layout_height="wrap_c
水击三千
2018/02/27
1K0
Activity跳转fragment
fragment不能单独存在,必须依附在Activity上,所以在Activity跳转时,实际是跳到fragment的宿主上
全栈程序员站长
2022/08/31
3280
Android 开发第七讲 RadioButton (单选按钮)
之前我们响应按钮事件都是直接通过匿名内部类的方式. new一个对象来实现OnClick方法.
IBinary
2020/09/01
1.4K0
Android 开发第七讲 RadioButton (单选按钮)
【1-100】RadioGroup实现应用主界面「建议收藏」
还有drawableTop和text相应的Seletor select_tab_bus.xml 这里只列出了一个,其他三个只是图片不同就不列出来了
全栈程序员站长
2022/07/19
4380
ViewPager 2 使用讲解「建议收藏」
之前早有耳闻 Google 为我们提供新的控件来替换老旧的 ViewPager 进而解决一些不好解决的bug问题,巴拉巴拉一大堆,就是前因后果啥的…相信读者已经在“张鸿洋”大神、“郭霖”大神或者是其他Android 大佬的公众号那里看见了许许多多了,或许各位感觉很无聊了,笔者菜鸟,分析不了历史背景,也不是很懂源码,但是小菜鸟,可以带给位看官尝个鲜,教你怎么用,怎么上手哈,闲话不多说,我们步入正题。
全栈程序员站长
2022/09/15
1.3K0
ViewPager 2 使用讲解「建议收藏」
Android应用底部导航栏(选项卡)实例
现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能。 我们先看下该demo实例的框架图: 其
欢醉
2018/01/22
1.5K0
Android应用底部导航栏(选项卡)实例
RadioGroup+ViewPager +Fragment 制作APP主界面底部导航和左右滑动
PS:下面那个红色的我也不知道是怎么回事,看到上面的两层水印了,它们的存在证明了我的穷。
晨曦_LLW
2020/09/25
1.5K4
相关推荐
仿饿了么等APP底部菜单(Fragment实现)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 腾讯技术创作特训营