Android開發(fā)UI之Radio、Check、Toggle

作者：佚名 2013-07-24 18:02:40

本篇文章就講解了一下CompoundButton抽象類下的三個實現(xiàn)控件類的使用，在Android4.0之后，又新加入了一個控Switch，對它的使用與之上介紹的三個控件類似，這里就不再詳細(xì)講解了。

前言

這篇文章講解一下Android平臺下，RadioButton、CheckBox以及ToggleButton三個控件的用法，因為這三個控件之中都存在一個選中或是沒選中的狀態(tài)，所以放在一起講解。

這三個控件均是從Button之中間接繼承而來的，所以一些Button中的設(shè)置都是通用的，如圖文混排，動態(tài)修改顯示內(nèi)容，因為之前已經(jīng)對這些內(nèi)容進(jìn)行了說明，如果不清楚朋友可以參見一下另外一篇文章：Android開發(fā)UI之Button，所以這篇文章只是就這三個控件的常用方法進(jìn)行簡要說明，并給出示例。

CompoundButton

RadioButton（單選按鈕）、CheckBox（復(fù)選按鈕）、ToggleButton（開關(guān)按鈕）都繼承自android.widget.CompoundButton類，而CompoundButton又繼承自Button類，在這個類中封裝了一個checked屬性，用于判斷是否被選中，這也是它與Button的不同，對其進(jìn)行了擴(kuò)展，這個屬性在這三個控件中的用法是一樣的。

一般checked屬性通過以下方式來設(shè)置與獲取：

android:checked/setChecked(boolean)：設(shè)置是否被選中。
isChecked()：獲取是否被選中。

RadioButton

RadioButton，為一個單選按鈕，一般配合RadioGroup一起使用，在同一RadioGroup內(nèi)，所有的RadioButton的選中狀態(tài)為互斥，它們有且只有一個RadioButton被選中，但是在不同的RadioGroup中是不相互影響的。

下面通過一個簡單的示例來說明一下，在示例中會存在兩個RadioButton，用于定義性別信息，當(dāng)用戶選中了某個后，點擊按鈕，把選中的信息提示到屏幕上。

布局代碼：

<?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" > 
 
    <TextView 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="Gender：" /> 
    <!-- 定義一個RadioGroup用于包裝RadioButton --> 
    <RadioGroup 
        android:id="@+id/gender" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" > 
 
        <RadioButton 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="male" /> 
 
        <RadioButton 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="female" /> 
    </RadioGroup> 
 
    <Button 
        android:id="@+id/btnGender" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="選擇性別" /> 
 
</LinearLayout>

實現(xiàn)代碼：

package com.example.changebutton; 
 
import android.app.Activity; 
import android.os.Bundle; 
import android.view.View; 
import android.widget.Button; 
import android.widget.RadioButton; 
import android.widget.RadioGroup; 
import android.widget.Toast; 
 
public class RadioButtonActivity extends Activity { 
    private RadioGroup group; 
    private Button btnGender; 
 
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
        // TODO Auto-generated method stub 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.radiobutton_layout); 
 
        group = (RadioGroup) findViewById(R.id.gender); 
        btnGender = (Button) findViewById(R.id.btnGender); 
        btnGender.setOnClickListener(new View.OnClickListener() { 
            @Override 
            public void onClick(View v) { 
                // 獲取單選按鈕的選項個數(shù) 
                int len = group.getChildCount(); 
                String msgString = ""; 
                for (int i = 0; i < len; i++) { 
                    //RadioGroup中包含的子View就是一個RadioButton 
                    RadioButton radiobutton = (RadioButton) group.getChildAt(i); 
                    if (radiobutton.isChecked()) { 
                        //如果被選中，則break循環(huán)，并且記錄選中信息 
                        msgString = "You choose to be a " 
                                + radiobutton.getText().toString(); 
                        break; 
                    } 
                } 
                if (msgString.equals("")) { 
                    Toast.makeText(RadioButtonActivity.this, 
                            "Please select a gender!", Toast.LENGTH_SHORT) 
                            .show(); 
                } else { 
                    Toast.makeText(RadioButtonActivity.this, msgString, 
                            Toast.LENGTH_SHORT).show(); 
                } 
            } 
        }); 
    } 
}

實現(xiàn)效果：

CheckBox

CheckBox是一個復(fù)選按鈕，它的用法與RadioButton很像，但是與之不同的是，它可以多選，所以也無需用一個組控件包裹起來。

這里涉及了一動態(tài)添加UI控件的知識，在Android中動態(tài)增加控件一般有兩種方式：

為需要操作的UI控件指定android:id屬性，并且在Activity中通過setContentView()設(shè)置需要查找的布局文件。這樣才可以在Activity中，使用findViewById(int)方法找到待操作的控件。
為需要操作的UI控件單獨創(chuàng)建XML文件，在Activity中使用動態(tài)填充的方式：getLayoutInflater().inflate(int)的方式獲取到XML文件定義的控件。

這里通過一個示例來說明CheckBox的使用，在示例中動態(tài)添加了CheckBox的選項，并且對其進(jìn)行選中之后提示選中信息。上面兩種方式都用用到，通過一個chooseMethod(boolean)區(qū)分。

布局代碼：

<?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"  
    android:id="@+id/checkLayout"> 
    <!-- 這里只是定義了一個按鈕，其他的CheckBox控件在代碼中動態(tài)添加 --> 
    <Button 
        android:id="@+id/checkBtn" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="確定" /> 
</LinearLayout>

如果使用動態(tài)填充的方式獲取CheckBox的話，需要添加一個CheckBox的XML文件，代碼如下：

<?xml version="1.0" encoding="utf-8"?> 
<CheckBox xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"  > 
</CheckBox>

實現(xiàn)代碼：

package com.example.changebutton; 
 
import java.util.ArrayList; 
import java.util.List; 
import android.app.Activity; 
import android.app.AlertDialog; 
import android.os.Bundle; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.widget.Button; 
import android.widget.CheckBox; 
import android.widget.LinearLayout; 
 
public class CheckBoxActivity extends Activity implements OnClickListener { 
 
    private List<CheckBox> checkBoxs = new ArrayList<CheckBox>(); 
    private Button checkBtn; 
 
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        chooseMethod(false); 
        checkBtn = (Button) findViewById(R.id.checkBtn); 
        checkBtn.setOnClickListener(this); 
    } 
 
    @Override 
    public void onClick(View v) { 
        String s = ""; 
        //循環(huán)cheackBoxs 
        for (CheckBox c : checkBoxs) { 
            if (c.isChecked()) { 
                //如果選中就添加選中結(jié)果到msg中。 
                s += c.getText() + "\n"; 
            } 
        } 
        if ("".equals(s)) { 
            s = "您沒有選中選項！"; 
        } 
        //使用對話框彈出選中的信息 
        new AlertDialog.Builder(this).setMessage(s) 
                .setPositiveButton("Exit", null).show(); 
    } 
 
    private void chooseMethod(boolean b) { 
        String[] checkboxText = new String[] { "You are student?", 
                "Do you like Android?", "Do you have a girlfriend", 
                "Do you like online shopping?" }; 
        if (b) { 
            //使用本文中提到的第一種方式，通過Id動態(tài)加載 
            setContentView(R.layout.checkbox_layout); 
            //獲取帶填充的布局控件 
            LinearLayout linearLayout = (LinearLayout) this 
                    .findViewById(R.id.checkLayout); 
            //根據(jù)數(shù)組，循環(huán)添加內(nèi)容 
            for (int i = 0; i < checkboxText.length; i++) { 
                CheckBox checkbox = new CheckBox(this); 
                checkBoxs.add(checkbox); 
                checkBoxs.get(i).setText(checkboxText[i]); 
                //把CheckBox加入到布局控件中 
                linearLayout.addView(checkbox); 
            }             
        } else { 
            //通過動態(tài)填充的方式，找到布局文件 
            LinearLayout linearLayout = (LinearLayout) getLayoutInflater() 
                    .inflate(R.layout.checkbox_layout, null); 
            for (int i = 0; i < checkboxText.length; i++) { 
                //在通過動態(tài)填充的方式找到CheckBox的文件 
                CheckBox checkbox = (CheckBox) getLayoutInflater().inflate( 
                        R.layout.cheackbox, null); 
                checkBoxs.add(checkbox); 
                checkBoxs.get(i).setText(checkboxText[i]); 
                linearLayout.addView(checkbox); 
            } 
            //最后把這個布局文件加載顯示 
            setContentView(linearLayout);             
        } 
    } 
}

實現(xiàn)效果

ToggleButton

ToggleButton，一個開關(guān)按鈕，有兩個狀態(tài)，大抵的用法與上面兩個控件一直，可以通過兩個屬性顯示不同狀態(tài)時，控件內(nèi)顯示文字的內(nèi)容不同，屬性如下：

android:textOff/setTextOff(CharSequence)：設(shè)置關(guān)閉時顯示內(nèi)容。
android:textOn/setTextOn(CharSequence)：設(shè)置打開時顯示內(nèi)容。

ToggleButton，這個控件有一個OnCheckedChangeListener()事件，當(dāng)開關(guān)的狀態(tài)切換的時候會被觸發(fā)，其中需要傳遞一個OnCheckedChangeListener接口的實現(xiàn)內(nèi)，當(dāng)被切換時，觸發(fā)其中的onCheckedChange()方法，可以在其中寫需要實現(xiàn)的功能代碼。

下面通過一個示例講解一下ToggleButton的使用，使用一個toggleButton控件，控制一個LinearLayout的布局排列方式。

布局代碼：

<?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" > 
 
    <ToggleButton 
        android:id="@+id/togBtn" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:checked="true" 
        android:textOff="橫向排列" 
        android:textOn="縱向排列" /> 
 
    <LinearLayout 
        android:id="@+id/OriLayout" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:orientation="vertical" > 
 
        <Button 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="btn1" /> 
 
        <Button 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="btn2" /> 
 
        <Button 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="btn3" /> 
    </LinearLayout> 
 
</LinearLayout>

實現(xiàn)代碼：

package com.example.changebutton; 
 
import android.app.Activity; 
import android.os.Bundle; 
import android.widget.CompoundButton; 
import android.widget.CompoundButton.OnCheckedChangeListener; 
import android.widget.LinearLayout; 
import android.widget.ToggleButton; 
 
public class ToggleButtonActivity extends Activity { 
    private ToggleButton togBtn; 
    private LinearLayout linearLayout; 
 
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
        // TODO Auto-generated method stub 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.toggle_layout); 
        togBtn = (ToggleButton) findViewById(R.id.togBtn); 
        linearLayout = (LinearLayout) this.findViewById(R.id.OriLayout); 
 
        togBtn.setOnCheckedChangeListener(new OnCheckedChangeListener() { 
            @Override 
            public void onCheckedChanged(CompoundButton buttonView, 
                    boolean isChecked) { 
                //通過判斷是否選中，來設(shè)置LinearLayout的橫向縱向排列 
                if (isChecked) { 
                    linearLayout.setOrientation(1); 
                } else { 
                    linearLayout.setOrientation(0); 
                } 
            } 
        }); 
    } 
}

實現(xiàn)效果：

[[81314]][[81315]]

總結(jié)

以上就講解了一下CompoundButton抽象類下的三個實現(xiàn)控件類的使用，在Android-4.0之后，又新加入了一個控件Switch，對它的使用與之上介紹的三個控件類似，這里就不再詳細(xì)講解了。

轉(zhuǎn)載于http://www.cnblogs.com/plokmju/archive/2013/07/22/android_UI_CompoundButton.html

責(zé)任編輯：閆佳明來源： cnblogs

Android開發(fā)學(xué)習(xí)Android UI Radio、Check、Toggle