【Android笔记#5】RadioButtom组件仿微信底部导航切换+drawableTop定制图片大小

最新推荐文章于 2024-11-27 20:18:24 发布

原创最新推荐文章于 2024-11-27 20:18:24 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java

Android 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用RadioButton和RadioGroup实现点击切换效果，创建drawable_selector和buttomcolor_selector资源文件以控制不同状态的颜色。同时，针对drawableTop图片大小不适应的问题，提供了解决方案，通过实例化drawable并调整图片尺寸，确保在各种设备上正确显示。

在这里插入图片描述

实现点击切换效果

RadioButtom需要用单击按钮组RadioGroup包括，设置3个RadiooButtom的id属性(不然会选择多个按钮)，drawableTop设置按钮图片和text的drawable_selector选择状态资源，用于按下/未选择时显示对应颜色。
在这里插入图片描述
home_selector:

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

buttomcolor_selector:

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

RadioButtom调用selector并设定home为默认展示：

 android:drawableTop="@drawable/home_selector"
 android:textColor="@drawable/buttomcolor_selector"
 android:checked="true"

自由定制drawableTop属性

问题来了，由于图片尺寸不一定能适配View大小，在一些设备中drawableTop图片会显示过大，通过实例化drawable类获取图片，重新绘制图片位置及大小。
优化前：
在这里插入图片描述
Main_Ativity中实现：

rgGroup = (RadioGroup) findViewById(R.id.rb_btn);
        home_btn = (RadioButton) findViewById(R.id.home_btn);
        order_btn = (RadioButton) findViewById(R.id.order_btn);
        personal_btn = (RadioButton) findViewById(R.id.personal_btn);

        //定义底部标签图片大小
        Drawable drawableWeiHui = getResources().getDrawable(R.drawable.home_selector);
        drawableWeiHui.setBounds(0, 2, 60, 60);//第一0是距左右边距离，第二0是距上下边距离，第三69长度,第四宽度
        home_btn.setCompoundDrawables(null, drawableWeiHui, null, null);//只放上面

        Drawable drawableAdd = getResources().getDrawable(R.drawable.order_selector);
        drawableAdd.setBounds(0, 3, 60, 60);
        order_btn.setCompoundDrawables(null,drawableAdd, null, null);

        Drawable drawableRight = getResources().getDrawable(R.drawable.personal_selector);
        drawableRight.setBounds(0, 3, 60,60);
        personal_btn.setCompoundDrawables(null, drawableRight, null, null);

        //初始化底部标签
        rgGroup.check(R.id.home_btn);

在这里插入图片描述