开发者社区> 文艺小青年> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Android--UI之Radio、Check、Toggle

简介:
+关注继续查看

前言

  这篇博客讲解一下Android平台下,RadioButton、CheckBox以及ToggleButton三个控件的用法,因为这三个控件之中都存在一个选中或是没选中的状态,所以放在一起讲解。

  这三个控件均是从Button之中间接继承而来的,所以一些Button中的设置都是通用的,如图文混排,动态修改显示内容,因为之前已经对这些内容进行了说明,如果不清楚朋友可以参见一下我的另外一篇博客,Android—UIButton,所以这篇博客只是就这三个控件的常用方法进行简要说明,并给出示例。

 

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中动态增加控件一般有两种方式:

  1. 为需要操作的UI控件指定android:id属性,并且在Activity中通过setContentView()设置需要查找的布局文件。这样才可以在Activity中,使用findViewById(int)方法找到待操作的控件。
  2. 为需要操作的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,对它的使用与之上介绍的三个控件类似,这里就不再详细讲解了。



本文转自承香墨影博客园博客,原文链接:http://www.cnblogs.com/plokmju/p/android_UI_CompoundButton.html,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
再次搞定 Ali 云函数计算 FC
原本早就该写完了微信 SDK 授权服务上云计划由于对 Ali 云函数计算 FC 的不熟悉遇到了很多的坑,再前面的文章中还吐槽了一通。在服务顺利跑通后,这回实打实的来总结一下顺利上云的保守指南~
22854 0
特稿|过去5年,阿里云是如何打造云原生数据库PolarDB的
阿里云在云原生数据库领域的自研创新突围。
23401 0
如何优雅的消除系统重复代码
在程序猿的日常工作中,不仅要跟随业务侧的发展不断开发新的需求,同时也需要维护老的已有平台。无论是开发新需求还是维护老系统,我们都会遇到同样一个问题,系统中总是充斥着很多重复的代码。
23810 0
初识Serverless函数计算
Serverless 并不是没有服务器,而是开发者不再需要关心服务器。在传统 Serverful 架构下,部署一个应用需要购买服务器,部署操作系统,搭建开发环境,编写代码,构建应用,部署应用,配置负载均衡机制,搭建日志分析与监控系统,应用上线后,继续监控应用的运行情况。而在 Serverless 架构下,开发者只需要关注应用的开发构建和部署,无需关心服务器相关操作与运维,在函数计算架构下,开发者只需要编写业务代码并监控业务运行情况。这将开发者从繁重的运维工作中解放出来,把精力投入到更有意义的业务开发上。
24357 0
【AI征文】对DeepRec认识以及了解
对DeepRec认识以及了解
57469 0
Tensorflow Serving部署模型与调用
本文以mnist为数据集,使用keras 构建CNN网络,将训练获取的模型通过Tensorflow Serving方式部署提供Rest Full接口,分别使用PostMan和Python调用服务,代码编辑调试使用阿里云PAI DSW实例,模型部署使用阿里云ECS虚拟机。
6043 0
业务中台之上的低代码应用开发平台
中台低代码平台帮助开发者掌握全栈能力,促进开发者提高工作效率,基于企业数字化业务能力组件,可以实现业务应用的敏捷按需装配,成为企业组装式应用创新平台,进而实现企业业务能力的持续优化和复用,促进从组织到企业甚至行业的业务能力集约与创新。
100994 0
十分钟生成影视级室内设计效果,红星美凯龙设计云如何升级传统家居行业
依托于阿里云强大的弹性云上GPU算力,红星美凯龙可以为客户提供快速的、高质量的渲染,实现秒级的门店快速设计。
65948 0
3576
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载