解决Android drawableXXX 图片被拉伸的问题

64 阅读1分钟

遇到RadioButton drawableBottom 展示图片被拉伸的问题:

<RadioButton
    android:id="@+id/rb_domain"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@null"
    android:checked="true"
    android:drawableBottom="@drawable/bg_selector_rb_server_host_setting"
    android:gravity="center"
    android:text="@string/private_cloud_server_host_domain"
    android:paddingVertical="@dimen/qb_px_5"
    android:textColor="@color/color_text_1" />
<!--  bg_selector_rb_server_host_setting  -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg_rb_server_host_setting_checked" android:state_checked="true"/>
    <item android:drawable="@drawable/bg_rb_server_host_setting_normal" android:state_checked="false"/>
    <item android:drawable="@drawable/bg_rb_server_host_setting_normal"/>
</selector>

image.png

解决方法如下:

<RadioButton
    android:id="@+id/rb_domain"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@null"
    android:checked="true"
    android:drawableBottom="@drawable/bg_selector_rb_server_host_setting"
    android:drawablePadding="@dimen/qb_px_5"
    android:gravity="center"
    android:text="@string/private_cloud_server_host_domain"
    android:textColor="@color/color_text_1" />
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <bitmap android:gravity="bottom" android:src="@drawable/bg_rb_server_host_setting_checked" />
    </item>
    <item android:state_checked="false">
        <bitmap android:gravity="bottom" android:src="@drawable/bg_rb_server_host_setting_normal" />
    </item>
    <item>
        <bitmap android:gravity="bottom" android:src="@drawable/bg_rb_server_host_setting_normal" />
    </item>
</selector>

效果:

image.png

这个方案的精髓是bitmap的子标签android:gravity="bottom",如果不加该标签,效果会有问题:

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

image.png

如果bitmap标签使用android:gravity="center" ,效果也会有问题:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <bitmap android:gravity="center" android:src="@drawable/bg_rb_server_host_setting_checked"  />
    </item>
    <item android:state_checked="false">
        <bitmap android:gravity="center" android:src="@drawable/bg_rb_server_host_setting_normal"  />
    </item>
    <item>
        <bitmap android:gravity="center" android:src="@drawable/bg_rb_server_host_setting_normal"  />
    </item>
</selector>

image.png

所以使用该方案的时候需要根据自己的场景和drawable图片素材选择不同的gravity