安卓仿百度地图图层切换RadioGroup及RadioButton样式自定义遇到的问题及解决

好久没写博客啦！最近在做一个安卓项目的时候，做到图层切换功能模块，看到百度地图（如下图）的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