1. 程式人生 > >RadioButton 右上角新增背景圖,不需要自定義RadioGroup

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 肯定是會出錯的。