Android--UI之Radio、Check、Toggle

本文轉載自查看原文 2013-07-22 09:09 3454 ToggleButton/ UI/ CheckBox/ android/ RadioButton/ CompoundButton/ Android

前言

　　這篇博客講解一下Android平台下，RadioButton、CheckBox以及ToggleButton三個控件的用法，因為這三個控件之中都存在一個選中或是沒選中的狀態，所以放在一起講解。

　　這三個控件均是從Button之中間接繼承而來的，所以一些Button中的設置都是通用的，如圖文混排，動態修改顯示內容，因為之前已經對這些內容進行了說明，如果不清楚朋友可以參見一下我的另外一篇博客，Android—UI之Button，所以這篇博客只是就這三個控件的常用方法進行簡要說明，並給出示例。

CompoundButton

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

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

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

RadioButton

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

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

　　布局代碼：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <TextView
 8         android:layout_width="fill_parent"
 9         android:layout_height="wrap_content"
10         android:text="Gender：" />
11     <!-- 定義一個RadioGroup用於包裝RadioButton -->
12     <RadioGroup
13         android:id="@+id/gender"
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content" >
16 
17         <RadioButton
18             android:layout_width="wrap_content"
19             android:layout_height="wrap_content"
20             android:text="male" />
21 
22         <RadioButton
23             android:layout_width="wrap_content"
24             android:layout_height="wrap_content"
25             android:text="female" />
26     </RadioGroup>
27 
28     <Button
29         android:id="@+id/btnGender"
30         android:layout_width="fill_parent"
31         android:layout_height="wrap_content"
32         android:text="選擇性別" />
33 
34 </LinearLayout>

　　實現代碼：

 1 package com.example.changebutton;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.view.View;
 6 import android.widget.Button;
 7 import android.widget.RadioButton;
 8 import android.widget.RadioGroup;
 9 import android.widget.Toast;
10 
11 public class RadioButtonActivity extends Activity {
12     private RadioGroup group;
13     private Button btnGender;
14 
15     @Override
16     protected void onCreate(Bundle savedInstanceState) {
17         // TODO Auto-generated method stub
18         super.onCreate(savedInstanceState);
19         setContentView(R.layout.radiobutton_layout);
20 
21         group = (RadioGroup) findViewById(R.id.gender);
22         btnGender = (Button) findViewById(R.id.btnGender);
23         btnGender.setOnClickListener(new View.OnClickListener() {
24             @Override
25             public void onClick(View v) {
26                 // 獲取單選按鈕的選項個數
27                 int len = group.getChildCount();
28                 String msgString = "";
29                 for (int i = 0; i < len; i++) {
30                     //RadioGroup中包含的子View就是一個RadioButton
31                     RadioButton radiobutton = (RadioButton) group.getChildAt(i);
32                     if (radiobutton.isChecked()) {
33                         //如果被選中，則break循環，並且記錄選中信息
34                         msgString = "You choose to be a "
35                                 + radiobutton.getText().toString();
36                         break;
37                     }
38                 }
39                 if (msgString.equals("")) {
40                     Toast.makeText(RadioButtonActivity.this,
41                             "Please select a gender!", Toast.LENGTH_SHORT)
42                             .show();
43                 } else {
44                     Toast.makeText(RadioButtonActivity.this, msgString,
45                             Toast.LENGTH_SHORT).show();
46                 }
47             }
48         });
49     }
50 }

　　實現效果：

CheckBox

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

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

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

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

　　布局代碼：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" 
 6     android:id="@+id/checkLayout">
 7     <!-- 這里只是定義了一個按鈕，其他的CheckBox控件在代碼中動態添加 -->
 8     <Button
 9         android:id="@+id/checkBtn"
10         android:layout_width="fill_parent"
11         android:layout_height="wrap_content"
12         android:text="確定" />
13 
14 </LinearLayout>

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

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

　　實現代碼：

 1 package com.example.changebutton;
 2 
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 import android.app.Activity;
 6 import android.app.AlertDialog;
 7 import android.os.Bundle;
 8 import android.view.View;
 9 import android.view.View.OnClickListener;
10 import android.widget.Button;
11 import android.widget.CheckBox;
12 import android.widget.LinearLayout;
13 
14 public class CheckBoxActivity extends Activity implements OnClickListener {
15 
16     private List<CheckBox> checkBoxs = new ArrayList<CheckBox>();
17     private Button checkBtn;
18 
19     @Override
20     protected void onCreate(Bundle savedInstanceState) {
21         super.onCreate(savedInstanceState);
22         chooseMethod(false);
23         checkBtn = (Button) findViewById(R.id.checkBtn);
24         checkBtn.setOnClickListener(this);
25     }
26 
27     @Override
28     public void onClick(View v) {
29         String s = "";
30         //循環cheackBoxs
31         for (CheckBox c : checkBoxs) {
32             if (c.isChecked()) {
33                 //如果選中就添加選中結果到msg中。
34                 s += c.getText() + "\n";
35             }
36         }
37         if ("".equals(s)) {
38             s = "您沒有選中選項！";
39         }
40         //使用對話框彈出選中的信息
41         new AlertDialog.Builder(this).setMessage(s)
42                 .setPositiveButton("Exit", null).show();
43     }
44 
45     private void chooseMethod(boolean b) {
46         String[] checkboxText = new String[] { "You are student?",
47                 "Do you like Android?", "Do you have a girlfriend",
48                 "Do you like online shopping?" };
49         if (b) {
50             //使用本文中提到的第一種方式，通過Id動態加載
51             setContentView(R.layout.checkbox_layout);
52             //獲取帶填充的布局控件
53             LinearLayout linearLayout = (LinearLayout) this
54                     .findViewById(R.id.checkLayout);
55             //根據數組，循環添加內容
56             for (int i = 0; i < checkboxText.length; i++) {
57                 CheckBox checkbox = new CheckBox(this);
58                 checkBoxs.add(checkbox);
59                 checkBoxs.get(i).setText(checkboxText[i]);
60                 //把CheckBox加入到布局控件中
61                 linearLayout.addView(checkbox);
62             }            
63         } else {
64             //通過動態填充的方式，找到布局文件
65             LinearLayout linearLayout = (LinearLayout) getLayoutInflater()
66                     .inflate(R.layout.checkbox_layout, null);
67             for (int i = 0; i < checkboxText.length; i++) {
68                 //在通過動態填充的方式找到CheckBox的文件
69                 CheckBox checkbox = (CheckBox) getLayoutInflater().inflate(
70                         R.layout.cheackbox, null);
71                 checkBoxs.add(checkbox);
72                 checkBoxs.get(i).setText(checkboxText[i]);
73                 linearLayout.addView(checkbox);
74             }
75             //最后把這個布局文件加載顯示
76             setContentView(linearLayout);            
77         }
78     }
79 }

　　實現效果

ToggleButton

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

android:textOff/setTextOff(CharSequence)：設置關閉時顯示內容。
android:textOn/setTextOn(CharSequence)：設置打開時顯示內容。

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

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

　　布局代碼：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <ToggleButton
 8         android:id="@+id/togBtn"
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:checked="true"
12         android:textOff="橫向排列"
13         android:textOn="縱向排列" />
14 
15     <LinearLayout
16         android:id="@+id/OriLayout"
17         android:layout_width="match_parent"
18         android:layout_height="match_parent"
19         android:orientation="vertical" >
20 
21         <Button
22             android:layout_width="wrap_content"
23             android:layout_height="wrap_content"
24             android:text="btn1" />
25 
26         <Button
27             android:layout_width="wrap_content"
28             android:layout_height="wrap_content"
29             android:text="btn2" />
30 
31         <Button
32             android:layout_width="wrap_content"
33             android:layout_height="wrap_content"
34             android:text="btn3" />
35     </LinearLayout>
36 
37 </LinearLayout>

　　實現代碼：　

 1 package com.example.changebutton;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.widget.CompoundButton;
 6 import android.widget.CompoundButton.OnCheckedChangeListener;
 7 import android.widget.LinearLayout;
 8 import android.widget.ToggleButton;
 9 
10 public class ToggleButtonActivity extends Activity {
11     private ToggleButton togBtn;
12     private LinearLayout linearLayout;
13 
14     @Override
15     protected void onCreate(Bundle savedInstanceState) {
16         // TODO Auto-generated method stub
17         super.onCreate(savedInstanceState);
18         setContentView(R.layout.toggle_layout);
19         togBtn = (ToggleButton) findViewById(R.id.togBtn);
20         linearLayout = (LinearLayout) this.findViewById(R.id.OriLayout);
21 
22         togBtn.setOnCheckedChangeListener(new OnCheckedChangeListener() {
23             @Override
24             public void onCheckedChanged(CompoundButton buttonView,
25                     boolean isChecked) {
26                 //通過判斷是否選中，來設置LinearLayout的橫向縱向排列
27                 if (isChecked) {
28                     linearLayout.setOrientation(1);
29                 } else {
30                     linearLayout.setOrientation(0);
31                 }
32             }
33         });
34     }
35 }

　　實現效果：

　　示例代碼下載

總結

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

　　請支持原創，尊重原創，轉載請注明出處。謝謝。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Android--UI之AutoCompleteTextView Android--UI之ImageSwitcher Android--UI之ScrollView Android--UI布局 Android--UI之Spinner Android--UI之ListView Android--UI之Button Android--UI布局 Android--UI之TextView Android--UI之EditText