《Android》『ToggleButton』- 狀態開關按鈕元件的基本用法與自訂外觀方式
《Android Developers 參考文獻》
《繼承架構》
extends CompoundButton
↳ android.widget.CompoundButton
↳ android.widget.ToggleButton
《簡單介紹》
一般而言，透過 Button 元件，我們可以實作很多種不同的功能，其中一種就是有開關功能的按鈕，若我們要透過 Button 來實作，則必須宣告一個布林值來控管 Button 狀態與介面的切換，但在這裡我們有更方便的做法，ToggleButton 是一個擁有兩種狀態的按鈕元件，在其 OnCheckedChangeListener 方法中自己就會附帶一個布林值，且可以直接設定不同狀態時所需顯示的預設文字，透過這個元件，我們可以很簡單的實現開關按鈕的切換。
《用法介紹》
一個預設的 ToggleButton 元件，基本樣式包含了背景圖片以及文字，我們可以直接透過它所提供的方法修改內容，亦可以捨棄原本的元件樣式，透過 Selector 資源檔自訂元件樣式。
➥透過 Selector 資源檔自訂 ToggleButton 元件外觀
基本用法
|
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 |
package ... import ... public class firstActivity extends Activity { ImageView imageView; ToggleButton mToggleButton; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); imageView=(ImageView)findViewById(R.id.imageView1); mToggleButton=(ToggleButton)findViewById(R.id.mToggleButton); mToggleButton.setTextOff("關"); //設定未選取時的文字 mToggleButton.setTextOn("開"); //設定選取時的文字 mToggleButton.setChecked(true); //設定按紐狀態 - true:選取, false:未選取 mToggleButton.setBackgroundDrawable(getResources().getDrawable(R.drawable.icon)); //設定按鈕背景圖片 mToggleButton.setOnCheckedChangeListener(new toggleButton_OnCheckedChangeListener()); //設定按紐狀態監聽器 } private class toggleButton_OnCheckedChangeListener implements CompoundButton.OnCheckedChangeListener { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { // TODO Auto-generated method stub if(isChecked) //當按鈕狀態為選取時 { imageView.setImageResource(R.drawable.bulb_on); } else //當按鈕狀態為未選取時 { imageView.setImageResource(R.drawable.bulb_off); } } } } |
MainActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/LL"> <ToggleButton android:id="@+id/mToggleButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background=”@drawble/icon” android:textOff=”關” android:textOn=”開” /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon" android:id="@+id/imageView1"/> </LinearLayout> |
activity_main.xml
以上直接透過程式碼的方式，示範 ToggleButton 元件的基本使用方式，用到的方法條列如下 –
setTextOn()、setTextOff()
設定按紐於選取、未選取時的文字。
setChecked()
設定按紐狀態
setBackgroundDrawable()
設定按紐背景圖案。
setOnCheckedChangeListener()
透過 Selector 資源檔自訂 ToggleButton 元件外觀
透過 Selector 自訂樣式有兩種做法，一種是在 android:background 屬性中傳入自訂好的 Selector.xml 資源檔，並在資源檔裡面定義兩種狀態的按鈕，另一種則是在 android:button 屬性中傳入自訂好的 Selector.xml 資源檔，並將 android:textOff、android:textOn 設為空字串，android:background 設為透明背景，以預防干擾。
以下實作修改 android:button 的方式，程式碼如下 –
|
1 2 3 4 5 6 7 8 9 |
<selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_checked="true" //true 表示按鈕被選取時套用 android:drawable="@drawable/checked" /> <item android:state_checked="false" //false 表示按鈕未被選取時套用 android:drawable="@drawable/Unchecked" /> </selector> |
selector.xml
首先我們先建立一個 selector 資源檔，並在其中定義了按鈕被選取與未被選取時的圖案。
|
1 2 3 4 5 6 7 |
<ToggleButton android:id="@+id/mToggleButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/transparent" android:button="@drawable/selector" android:textOff="" android:textOn="" /> |
接著修改 ToggleButton 元件的相關屬性，在 android:button 屬性中傳入自訂好的 Selector.xml 資源檔，並將 android:textOff、android:textOn 設為空字串，android:background 設為透明背景，以預防干擾即可。
延伸閱讀：
臉書留言
一般留言