自定義RadioButton樣式2

昵稱11482448 2013-09-17

展開全文

先看一下圖：

上面這種3選1的效果如何做呢？用代碼寫？
其實有更簡單的辦法，忘了RadioButton有什么特性了嗎？
我就用RadioButton實現(xiàn)了如上效果，其實很簡單的。
首先定義一張background，命名為radio.xml，注意該background必須為xml樣式的圖片：

Xml代碼

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

這里我們只要關(guān)心state_checked狀態(tài)就可以了。所以很簡單的配置。
接下來就是布局文件里面引用這張圖片了：

Java代碼

<RadioGroup
android:gravity="center"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<RadioButton
android:id="@+id/btn_0"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="最新信息"
android:textSize="17.0sp"
android:textColor="@android:color/black"
android:gravity="center"
android:layout_weight="1"
android:checked="true"
android:button="@null"
android:background="@drawable/radio"
/>
<RadioButton
android:id="@+id/btn_1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="在線專家"
android:textSize="17.0sp"
android:textColor="@android:color/black"
android:gravity="center"
android:layout_weight="1"
android:button="@null"
android:background="@drawable/radio"
/>
<RadioButton
android:id="@+id/btn_2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="預約服務"
android:textSize="17.0sp"
android:textColor="@android:color/black"
android:gravity="center"
android:layout_weight="1"
android:button="@null"
android:background="@drawable/radio"
/>
</RadioGroup>

注意將android:button="@null"全部設為null，并且將android:background="@drawable/radio"設為剛才新建的圖片。這樣就完成了。
一句代碼都不用寫！

看看豎下來的效果：

傍邊有圖標的怎么辦？

也很簡單啦，只要在每個RadioButton上加android:drawableLeft="@drawable/tubiao_0"就可以了。
另外要設置圖標與文字的距離怎么辦？
有一個方法setCompoundDrawablePadding(pad)可以設置圖標與文字的距離，對應的屬性為android:drawablePadding。

有了這招完全可以實現(xiàn)類似的n選1效果，看下面：