好久没写博客啦!最近在做一个安卓项目的时候,做到图层切换功能模块,看到百度地图(如下图)的UI做的很好看。
相对于平常所用的简单的RadioButton,百度地图的这种RadioButton不仅美观,而且用户更加容易理解功能。所以自己就模仿了一下。做这个,无非就是自定义RadioButton。因为RadioButton是继承自Button的,所以可以设置topDrawable属性,然后Drawale做成一个selector就可以的。看代码,activity布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".PersonInfoActivity">
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp">
<RadioButton
android:id="@+id/button1"
android:layout_width="80dp"
android:layout_height="80dp"
android:drawableTop="@drawable/image_radio_button_sel"
android:button="@null"
android:text="卫星图"
android:textColor="@drawable/measure_radiotext_selector"
android:gravity="center"/>
<RadioButton
android:id="@+id/button2"
android:layout_width="80dp"
android:layout_height="80dp"
android:drawableTop="@drawable/vector_radio_button_sel"
android:button="@null"
android:text="2D平面图"
android:textColor="@drawable/measure_radiotext_selector"
android:gravity="center"/>
</RadioGroup>
</LinearLayout>
看到布局中就只有一个RadioGroup,然后有两个RadioButton。要自定义样式为百度地图这种类型的RadioButton,有以下三个属性需要注意的:
android:drawableTop="@drawable/vector_radio_button_sel"
android:button="@null"
android:textColor="@drawable/measure_radiotext_selector"
1.drawableTop属性:就是设置RadioButton上面的图标(一个Button有drawerTop,drawableBottom,drawableLeft,drawableRight四个设置图标的属性,分别对应着上、下、左、右四个方向的图标,此处我们需要在文字上面显示一个图标,故设置了drawableTop属性),此处的"@drawable/vector_radio_button_sel"对应一个selector,具体代码如下:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:drawable="@drawable/vector_sel">
</item>
<item
android:state_checked="false"
android:drawable="@drawable/vector">
</item>
</selector>
也很简单,设置Radio在选中和没选中时,显示的不同图片。
同理,设置text文字属性的"@drawable/measure_radiotext_selector"也是一个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="#00A0E9"/>
<item android:state_checked="false"
android:color="#000"/>
</selector>
好了,理论上,我们只要设置RadioButton在选中和非选中状态时,对应的不同图片就行了。我做了下面的两张图片,第一张对应非选中状态,另一张对应选中状态。
ok,设置完毕,是不是就可以了呢?Too young too simple。我们看一下效果。我们发现,我们设置的text没有显示出来,而且,图片只显示了一部分。这说明我们的做的图片太大了,那太大了好办,理论上我们把图片调小就好了,这里我把图片大小调整成了80像素×60像素(在手机上要通过调整图片大小这种方法的话,基本就是这个像素范围),结果发现,调整后,文字和图片都显示正常了,但是因为图片太小了,看起来特别特别糊,一点都不美观。对于一下简单的纯色的图标,通过缩小图片的办法可以,但是对于本文中这种颜色很复杂的图标,缩小这种方法虽然可以,但是显示的图标很糊,没法满足需求。
经过查资料,发现可以在代码中调整drawable的大小,然后再设置给RadioButton,代码如下:
RadioButton button=(RadioButton) findViewById(R.id.button1);
Drawable drawable=getResources().getDrawable(R.drawable.image_radio_button_sel);
drawable.setBounds(0,0,BaseUtility.dip2px(this,80),BaseUtility.dip2px(this,60));
button.setCompoundDrawables(null,drawable,null,null);
其中:
1.drawable函数的setBounds函数是设置drawable大小的函数,参数单位为像素,参数可以根据自己的需要自己调整。
2.BaseUtility.dip2px是dp转px的函数,具体代码如下:
public static int dip2px(Context context, float dipValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dipValue * scale + 0.5f);
}
3.setCompoundDrawables函数就是设置上面说的RadioButton的左、上、右、下(参数顺序)四个图标的函数,当不需要设置时,传空即可,本文中设置上图标,故设置第二个参数,其他参数都为空。
经过设置,最后在项目中的效果如下。看起来还不错吧。
最后,我把自定义的RadioButton整理出来,传到码云上,需要的同学自取:https://gitee.com/MeteorNJU/BadiduMapRadiobutton