《Android》『RadioGroup、RadioButton』- 單選清單元件的基本用法與自訂外觀方式
《Android Developers 參考文獻》
《簡單介紹》
RadioButton 是一種單選選項的按鈕，意思就是在眾多的選項裡，只能選定其中一個選項的按鈕，因此當我們在使用時，常常會需要搭配 RadioGroup 把多個選項組合在一起，實作上就是用在 RadioGroup 中，包含很多個 RadioButton，而這其中所有的 RadioButton 每次只能有一個被選取。
《用法介紹》
在使用單選清單元件的時候，我們會把每個選項設定為一個 RadioButton，並且用 RadioGroup 把它包起來，在介面顯示上，使用者只會看到 RadioButton 的介面，我們可以直接透過它所提供的方法修改元件屬性內容，亦可以透過 Selector 資源檔自訂元件樣式。
➥透過 Selector 資源檔自訂 RadioButton 元件外觀
基本用法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
package ... import ... public class MainActivity extends Activity { private RadioGroup mRadioGroup; private RadioButton mRadioButton0, mRadioButton1, mRadioButton2, mRadioButton3; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mRadioButton0 = (RadioButton) findViewById(R.id.mRadioButton0); mRadioButton1 = (RadioButton) findViewById(R.id.mRadioButton1); mRadioButton2 = (RadioButton) findViewById(R.id.mRadioButton2); mRadioButton3 = (RadioButton) findViewById(R.id.mRadioButton3); mRadGrpRegion = (RadioGroup) findViewById(R.id.mRadioGroup); mRadGrpRegion.check(R.id.mRadioButton0); //設定 mRadioButton0 選項為選取狀態 mRadGrpRegion.setOnCheckedChangeListener(radGrpRegionOnCheckedChange); //設定單選選項監聽器 } private RadioGroup.OnCheckedChangeListener radGrpRegionOnCheckedChange = new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { // TODO Auto-generated method stub String str = getString(R.string.select_region); switch (checkedId) { case R.id.mRadioButton0: //case mRadioButton0.getId(): ... break; case R.id.mRadioButton1: //case mRadioButton1.getId(): ... break; case R.id.mRadioButton2: //case mRadioButton2.getId(): ... break; case R.id.mRadioButton3: //case mRadioButton3.getId(): ... break; } } }; } |
MainActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <RadioGroup android:id="@+id/mRadioGroup" android:layout_width="wrap_content" android:layout_height="wrap_content" > <RadioButton android:id="@+id/mRadioButton0" android:layout_width="match_parent" android:layout_height="wrap_content" android:checked="true" android:text="mRadioButton0" /> <RadioButton android:id="@+id/mRadioButton1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="mRadioButton1" /> <RadioButton android:id="@+id/mRadioButton2" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="mRadioButton2" /> <RadioButton android:id="@+id/mRadioButton3" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="mRadioButton3" /> </RadioGroup> </LinearLayout> |
activity_main.xml
以上直接透過程式碼的方式，示範 RadioGroup 與 RadioButton 元件的基本使用方式，常用的方法條列如下 –
RadioGroup :
check()、clearCheck()
透過 Selector 資源檔自訂 RadioButton 元件外觀
RadioButton 元件本身可以自訂外觀的部分有顯示於選項文字左方的小圖示以及整個選項的底色，分別對照不同的設定屬性，實作方式很簡單，直接修改 layout.xml 就可以完成，程式碼片段如下 –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <RadioGroup android:id="@+id/mRadioGroup" android:layout_width="match_parent" android:layout_height="wrap_content" > <RadioButton android:id="@+id/mRadioButton0" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="mRadioButton0" android:checked="true" android:button="@drawable/radiobutton_selector" //設定小圖示 android:background="@drawable/radiobutton_bg_selector" /> //設定背景圖片 <RadioButton android:id="@+id/mRadioButton1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="mRadioButton1" android:button="@drawable/radiobutton_selector" //設定小圖示 android:background="@drawable/radiobutton_bg_selector" /> //設定背景圖片 <RadioButton android:id="@+id/mRadioButton2" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="mRadioButton2" android:button="@drawable/radiobutton_selector" //設定小圖示 android:background="@drawable/radiobutton_bg_selector" /> //設定背景圖片 <RadioButton android:id="@+id/mRadioButton3" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="mRadioButton3" android:button="@drawable/radiobutton_selector" //設定小圖示 android:background="@drawable/radiobutton_bg_selector" /> //設定背景圖片 </RadioGroup> </LinearLayout> |
activity_main.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize="true" > <item android:state_pressed="true" //true 表示被按下時套用 android:drawable="@android:drawable/btn_star" /> <item android:state_checked="true" //true 表示被勾選時套用 android:drawable="@android:drawable/btn_star_big_on" /> <item android:drawable="@android:drawable/btn_star_big_off" /> //預設值 </selector> |
radiobutton_selector.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize="true" > <item android:state_pressed="true" //true 表示被按下時套用 android:drawable="@android:color/holo_orange_light" /> <item android:state_checked="true" //true 表示被勾選時套用 android:drawable="@android:color/holo_red_light" /> <item android:drawable="@android:color/transparent" /> //預設值 </selector> |
radiobutton_bg_selector.xml
我們透過設定 android:button 的屬性來改變 RadioButton 小圖的顯示，設定 android:background 的屬性來改變 RadioButton 選項背景的顯示，更甚者，我們若是不想顯示小圖示，只要將 android:button 的屬性設定為 @null 即可。
延伸閱讀：
臉書留言
一般留言