Pro Android學習筆記（十五）：使用者介面和控制（3）：Button控制項

基礎Button

Button是最常用的基礎控制項之一，在Android中是TextView的繼承類。在上面衍生ImageButton和ToggleButton，我們將逐一介紹。小例子。基礎Button我們將主要介紹按鍵觸發的方式。代碼如下：

Button bt = (Button)findViewById(R.id.ui_button1);
bt.setOnClickListener(new OnClickListener() {
    //本例是通過內部匿名類來實現，當然也可以引用View.OnClickListener介面的對象來進行處理。

    public void onClick(View v) {
        //… 具體的觸發處理代碼 
        Log.d("UiButtonTest","Basic Button was clicked!");
    }
});

Android還提供了另一種方式，在XML中通過android:onClick指定觸發的方法名字，我們在Button的繼承類ImageButton中給出案例。

ImageButton

圖中第二排都是ImageButton。實現的XML片段如下：

    <ImageButton android:layout_width="wrap_content" 

        android:layout_height="wrap_content" 
        android:id="@+id/ui_imgbutton1" 
        android:src="@drawable/ic_launcher"
<!-- 圖片來源，位於res/drawable下 -->
        android:onClick="myClickFunc"  <!-- 指定了點擊控制項後的觸發的方法 -->

        android:background="@null"/> 
<!-- 設定背景為null，去掉按鈕形狀的背景 -->
        
    <ImageButton android:layout_width="wrap_content" 

        android:layout_height="wrap_content" 
        android:id="@+id/ui_imgbutton2" 
        android:onClick="myClickFunc"
<!-- 本例中兩個按鈕採用同樣觸發方法 -->
        android:src="@drawable/ic_launcher"/> 
        
    <ImageButton android:layout_width="wrap_content" 

        android:layout_height="wrap_content" 
        android:id="@+id/ui_imgbutton3" 
        android:contentDescription="image Button" <!--  添加以下描述性語言，但不在UI上顯示 -->

        android:src="@drawable/ic_launcher" />

對於code，如下：

public void myClickFunc(View v){ //對應XML中的android:onClick

    switch(v.getId()){ 
//多個控制項對應同意觸發，可重複利用代碼，並可區分來自哪個控制項的觸發
    case R.id.ui_imgbutton1:
    case R.id.ui_imgbutton2:
        Log.d("UiButtonTest","Image Button was clicked! Changed Image");

        ((ImageButton)v).setImageResource(R.drawable.sample_image); 
//更改ImageButton的圖片
        break;

    default:
        break;
    }
}

ImageButton還可以進行一些有趣的變化，在不同情況下，顯示不同的圖案。小例子的第三排就是用於測試這種情況。

在res/drawable目下設定一個xml檔案，用於描述不同情況片的選擇，例子如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_pressed="true" android:drawable="@drawable/png03" />

    <item android:state_focused="true" android:drawable="@drawable/png02" />
    <item android:drawable="@drawable/png01" />
</selector>

需要注意，selector中item的順序是有講究的，系統將從第一條開始匹配，逐條匹配，直至成功。我們預設顯示png01圖片，如果這條方在第一位置，將馬上被匹配到，其他選項就不起作用。res/layout下相應的xml如下：

<ImageButton android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ui_button_selector"/>
<!--  指向在res/drawable中描述選擇的xml檔案 -->

ToggleButton

ToggleButton就是開關類按鈕，有兩個狀態，開和關。xml如下：

<ToggleButton android:layout_width="wrap_content"

    android:layout_height="wrap_content"
    android:id="@+id/ui_toggle"
    android:textOn="Runing"  <!--  開狀態的顯示 -->
    android:textOff="Stop"/>  <!--  關狀態的顯示 -->

預設情況下，按鈕初始為關，每按一次，按鈕在開和關中切換。我們也可以在代碼中指定開關狀態，如下：

ToggleButton tb = (ToggleButton) findViewById(R.id.ui_toggle);

tb.setChecked(true);

CheckBox

CheckBox和Button從使用者的視角上看很不同，但是在Android中，CheckBox是android.widget.CompoundButton的繼承類，而ComPoundButton是android.widget.Button的繼承類。XML如下：

<CheckBox android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/ui_cb_apple"
    android:text="@string/ui_cb_apple"
   android:checked="true"/>
<CheckBox android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/ui_cb_banana"
    android:text="@string/ui_cb_banana"
   android:checked="false"   <!-- 預設為flase，可以不進行說明 -->

    android:onClick="myClickFunc"/> <!—CheckBox是Button的子類，所以可以通過onClick來設定觸發方法 -->

<CheckBox android:layout_width="match_parent"

    android:layout_height="wrap_content"
    android:id="@+id/ui_cb_melon"
    android:text="@string/ui_cb_melon"
    android:checked="true" />

CheckBox有兩個狀態，checked和unchecked，在code中，可以通過setChecked(true|false)來設定狀態，也可以通過toggle()來修改狀態。應用可能會關心checkbox狀態改變，代碼如下：

CheckBox cbApple = (CheckBox)findViewById(R.id.ui_cb_apple);

cbApple.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { 

    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { 

        Log.d("UiButtonTest","CheckBox Apple state change to " + isChecked);

    }
});

if(cbApple.isChecked())  //檢查checkbox的狀態

    cbApple.toggle();       //切換checkbox的狀態

CheckBox是Button的子類，我們也可以利用Button的setOnClickListener來實現，以及在xml中定義點擊觸發方法，如本例的public void myClickFunc(View v)來實現。

RadioButton

RadioButton是多選一，由容器RadioGroup進行封裝。在一個radiogroup中最多隻能有一個選項。RadioButton是Button繼承類CompoundButton的繼承類，而RadioGroup是LinearLayout的繼承類。RadioGroup具有線性布局的全部特性，可以包含非radioButton的控制項，例如本例中，放入了一個TextView。下面是xml片段：

<RadioGroup android:layout_width="match_parent"

    android:layout_height="wrap_content"
    android:id="@+id/ui_rbGroup"
    android:orientation="vertical">
    <TextView android:layout_width="match_parent"

        android:layout_height="wrap_content"
        android:text="@string/fruit"/> 
<!-- RadioGroup容器中可以放入其他控制項-->
    <RadioButton android:layout_width="match_parent"

        android:layout_height="wrap_content"
        android:id="@+id/ui_rb_apple"
        android:text="@string/apple" />

    <RadioButton android:layout_width="match_parent"

        android:layout_height="wrap_content"
        android:id="@+id/ui_rb_banana"
        android:text="@string/banana"
        android:checked="true"/>  <!-- 預設，RadioButton是unchecked的，可以為其中一個設定checked -->

    <RadioButton android:layout_width="match_parent"

        android:layout_height="wrap_content"
        android:id="@+id/ui_rb_melon"
        android:text="@string/melon" />"

</RadioGroup>

在代碼中，我們可以設定radiobutton的狀態，已經查詢那個radio button是checked，如下：

RadioGroup rbGroup =(RadioGroup)findViewById(R.id.ui_rbGroup);

RadioButton rbApple = (RadioButton)findViewById(R.id.ui_rb_apple);
RadioButton rbBanana = (RadioButton)findViewById(R.id.ui_rb_banana);
//實驗：設定RadioButton狀態
rbBanana.toggle(); //toggle()可以改變狀態，但是在radio button中有一些不同，可以將狀態從unchecked改變為checked，但不能反過來（導致全部都沒有選中），本例中這句不起作用，所以toggle()需要慎用

rbBanana.setChecked(false); //可以用setChecked()設定狀態，本例運行到此句，全部為unchecked狀態

rbGroup.clearCheck();           //也可以通過group.clearCheck() 進行清除，全部為unchecked

rbApple.toggle();                   //本例運行到此句，選定Apple。

//測試：通過代碼方式，在Group中新增一個RadioButton

RadioButton rbCherry = new RadioButton(this);
rbCherry.setText("Cherry");
rbCherry.setId(CHERRY_ID);  //如果不指定，預設從1開始分配，但根據編程原則，我們應自行設定

rbGroup.addView(rbCherry);

//測試：擷取選擇的ID
int checkId = rbGroup.getCheckedRadioButtonId(); //將返回R.id.ui_rb_apple

當使用者改變選項，可以通過註冊觸發來進行處理，如下：

//【注意】建議指明是RadioGroup，例如程式中原來已經對checkbox等控制項進行處理，編譯會認為是CompoundButton類，因此如果程式涉及多種控制項，應給出更為精確的描述

rbGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { 

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) { 

        Log.d("UiButtonTest","Changed checked ID to " + checkedId);

        switch(checkedId){
        case -1: //-1 為全部是unchecked情況
            Log.d("UiButtonTest","Choices cleared.");

            break;
        default:
            RadioButton rb = (RadioButton)group.findViewById(checkedId);

            Log.d("UiButtonTest","Chose " + rb.getText());
            break;
        }
    }
});

相關連結：
我的Android開發相關文章