《Android》『CheckBox』- 多選清單元件的基本用法與自訂外觀方式
《Android Developers 參考文獻》
《簡單介紹》
CheckBox 是一種多選選項的按鈕，它與 RadioButton 非常類似，唯一不同的地方是它是獨立運作，不會與其它 CheckBox 互相影響，在實作上，我們通常會一次放多個 CheckBox 在佈局中，當作使用者需要作出複數選擇時的選項。
《用法介紹》
CheckBox 的用法很直觀簡單，與 RadioButton 一樣，我們可以直接透過它所提供的方法修改元件屬性內容，亦可以透過 Selector 資源檔自訂元件樣式。
➥透過 Selector 資源檔自訂 CheckBox 元件外觀
基本用法
|
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 |
package ... import ... public class MainActivity extends Activity { CheckBox checkBox1; CheckBox checkBox2; CheckBox checkBox3; CheckBox checkBox4; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); checkBox1 = (CheckBox)findViewById(R.id.checkBox1); checkBox2 = (CheckBox)findViewById(R.id.checkBox2); checkBox3 = (CheckBox)findViewById(R.id.checkBox3); checkBox4 = (CheckBox)findViewById(R.id.checkBox4); checkBox1.setOnCheckedChangeListener(checkBoxOnCheckedChange); checkBox2.setOnCheckedChangeListener(checkBoxOnCheckedChange); checkBox3.setOnCheckedChangeListener(checkBoxOnCheckedChange); checkBox4.setOnCheckedChangeListener(checkBoxOnCheckedChange); } private CompoundButton.OnCheckedChangeListener checkBoxOnCheckedChange = new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { //buttonView 為目前觸發此事件的 CheckBox, isChecked 為此 CheckBox 目前的選取狀態 if(isChecked)//等於 buttonView.isChecked() { Toast.makeText(getApplicationContext(),buttonView.getText()+" 被選取", Toast.LENGTH_LONG).show(); } else { Toast.makeText(getApplicationContext(),buttonView.getText()+" 被取消", Toast.LENGTH_LONG).show(); } } }; } |
MainActivity.java
這裡我們將所有 CheckBox 共用一個監聽器，並根據監聽器中傳入的參數，判斷觸發監聽器的 CheckBox 為哪一個，最後顯示相應的快顯資訊。
|
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 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <CheckBox android:id="@+id/checkBox1" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="CB1"/> <CheckBox android:id="@+id/checkBox2" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="CB2"/> <CheckBox android:id="@+id/checkBox3" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="CB3"/> <CheckBox android:id="@+id/checkBox4" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="CB4"/> </LinearLayout> |
activity_main.xml
以上直接透過程式碼的方式，示範 CheckBox 元件的基本使用方式，常用的方法條列如下 –
setCheck()、isCheck()
設定、取得 CheckBox 元件目前的選取狀態。
toggle()
將 CheckBox 元件反向選擇。
setOnCheckedChangeListener()
透過 Selector 資源檔自訂 CheckBox 元件外觀
CheckBox 自訂外觀的方式跟 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 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <CheckBox android:id="@+id/checkBox1" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="CB1" android:button="@drawable/checkBox_selector" //設定小圖示 android:background="@drawable/checkBox_bg_selector" /> //設定背景圖片 <CheckBox android:id="@+id/checkBox2" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="CB2" android:button="@drawable/checkBox_selector" //設定小圖示 android:background="@drawable/checkBox_bg_selector" /> //設定背景圖片 <CheckBox android:id="@+id/checkBox3" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="CB3" android:button="@drawable/checkBox_selector" //設定小圖示 android:background="@drawable/checkBox_bg_selector" /> //設定背景圖片 <CheckBox android:id="@+id/checkBox4" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="CB4" android:button="@drawable/checkBox_selector" //設定小圖示 android:background="@drawable/checkBox_bg_selector" /> //設定背景圖片 </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> |
checkBox_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> |
checkBox_bg_selector.xml
我們透過設定 android:button 的屬性來改變 CheckBox 小圖的顯示，設定 android:background 的屬性來改變 CheckBox 選項背景的顯示，另外，我們可以將 android:button 的屬性設定為 @null ，將原本的小圖隱藏，接著利用 android:drawableTop、android:drawableLeft、android:drawableRight、android:drawableBottom 這四個屬性來設定新的圖案與位置，方式如下 –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <CheckBox android:id="@+id/checkBox1" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="CB1" android:button="@null" //設定預設小圖示為空 android:drawableRight="@drawable/checkBox_selector" //設定新的小圖示圖案與位置 android:background="@drawable/checkBox_bg_selector" /> //設定背景圖片 </LinearLayout> |
activity_main.xml
以此例來看，新的小圖示會被設定在 CheckBox 的右邊。
延伸閱讀：
臉書留言
一般留言