RadioButton 右上角添加背景图,不需要自定义RadioGroup

实在想不出什么标题,所以用 BB 代替了,这样格式好看些而已 ~

瞎BB1

做项目时遇到一个效果图,由于是单选,所以用到了RadioButton,RadioButton 虽然有drawableLeft、drawableRight 等属性,但是没办法实现在左上角、右上角等角落加上图片吖,而且我只是需要选中时显示这个对勾而已,网上一大堆自定义RadioGroup是什么鬼,就加个图片而已,需要这么麻烦嘛 ~ ~ ~,于是动用自己的灵光一闪,额,用词不准不要介意,突然想到了一个神器——Android的Drawable之 LayerDrawable
效果图

BB2——LayerDrawable

LayerDrawable 对应的 XML 标签是 < layer-list > ,它表示的是一种层次化的 Drawable 集合,通过将不同的 Drawable 放置在不同的层上面从而达到一种叠加后的效果。用法网上应该有很多,我就不赘述了,后期会上 Drawable 系列的文章,到时候也会详细讲述的。
当然如果现在想了解更多的话也可以去看看这篇文章 LAYER-LIST篇,我就是从这里找到的灵感,直接上代码吧,这是上面效果图里面的 RadioButton 的背景图的 XML 实现。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- RadioButton没有被选中时的item -->
    <item android:state_checked="false">
        <shape>
            <solid android:color="@color/white"/>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <!-- RadioButton 选中时的item -->
    <item android:state_checked="true">
        <layer-list>
            <!-- layer-list 第一层橘色的边框 -->
            <item>
                <shape>
                    <solid android:color="@color/white"/>
                    <stroke android:color="#66B907"
                        android:width="1dp" />
                    <corners android:radius="2dp" />
                </shape>
            </item>

            <!-- layer-list 第二层右上角的图片 -->
            <item>
                <bitmap android:src="@drawable/withdraw_selected"
                    android:gravity="right|top"/>
            </item>

        </layer-list>
    </item>

</selector>

注意: 如果你看了 LAYER-LIST 这篇文章就知道 < item > 标签里面就有 drawable 属性,那为什么我还要再加个 bitmap 的子标签呢,因为直接在 item 里加图片的话会被拉伸,拉伸成整个背景图,而我们只需要在右上角显示而已,所以用 bitmap 标签可以保证图片的原始大小。当然大家也可以自己去尝试这种情况。

好了 ,到这里就已经实现了 RadioButton 的背景图添加,是不是特别方便,我们这种简单的需求,就不需要用到什么自定义 RadioGroup 啥的了。通过这种方式,大家还可以实现各种特效哟,什么左上角,左下角,右下角啥的都不成问题了,发挥你的想象吧。

最后贴下完整的 RadioGroup 的代码 :

<RadioGroup
    android:id="@+id/withdraw_account_radiogroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="15dp"
    android:layout_below="@id/withdraw_modify"
    android:orientation="horizontal">

    <RadioButton
        android:id="@+id/withdraw_account_wechat"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        android:text="微信"
        android:textColor="#FF4A4A4A"
        android:textSize="14sp"
        android:button="@null"
        android:checked="true"
        android:background="@drawable/btn_white_withdraw_radiogroup"/>
    <RadioButton
        android:id="@+id/withdraw_account_alipay"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        android:layout_marginLeft="40dp"
        android:text="支付宝"
        android:textColor="#FF4A4A4A"
        android:textSize="14sp"
        android:button="@null"
        android:background="@drawable/btn_white_withdraw_radiogroup"/>

</RadioGroup>

这就是上面效果图里的 RadioGroup 的所有代码,其中 btn_white_withdraw_radiogroup 就是那个 layer-list 的 XML,大家参考就好,按照自己的需求去实现,切勿直接 copy ,直接 copy 肯定是会出错的。

猜你喜欢

转载自blog.csdn.net/u014306335/article/details/80496718