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 肯定是会出错的。