[Android菜鸟笔记2019.03.15]RadioButtom组件仿微信底部导航切换+drawableTop定制图片大小
先看效果图:
█实现点击切换效果
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);