这是我参与「第四届青训营」笔记创作的第 8 天
此篇笔记是 Android 基础 —— 中级控件(一)选择按钮
本篇笔记分为 3 部分
- 复选框 CheckBox
- 开关按钮 Switch
- 开关按钮 Switch
中级控件
本篇笔记将介绍几个常用的特殊控制按钮
包括:如何使用复选框 CheckBox 及其勾选监听器、如何使用开关按钮 Switch 、如何使用单选按钮 RadioButton 和单选组 RadioGroup 及其选中监听器。
复选框 CheckBox
在学习复选框之前,先了解一下CompoundButton。
在Android体系中, CompoundButton 类是抽象的复合按钮,因为是抽象类,所以它不能直接使用。
实际开发中用的是 CompoundButton 的几个派生类, 主要有复选框 CheckBox 、单选按钮 RadioButton 以及开关按钮 Switch ,这些派生类均可使用 CompoundButton 的属性和方法。
加之 CompoundButton 本身继承了 Button 类,故以上几种按钮同时具备 Button 的属性和方法,它们之间的继承关系如图
CompoundButton 在 XML 文件中主要使用下面两个属性。
- checked :指定按钮的勾选状态,true 表示勾选,false 则表示未勾选。默认为未勾选。
- button :指定左侧勾选图标的图形资源,如果不指定就使用系统的默认图标。
CompoundButton 在 Java 代码中主要使用下列 4 种方法。
- CompoundButton 在 Java 代码中主要使用下列4种方法。
- setButtonDrawable :设置左侧勾选图标的图形资源。
- setOnCheckedChangeListener :设置勾选状态变化的监听器。
- setOnCheckedChangeListener :设置勾选状态变化的监听器。
复选框 CheckBox 是 CompoundButton 一个最简单的实现控件,点击复选框将它勾选,再次点击取消勾选。复选框对象调用 setOnCheckedChangeListener 方法设置勾选监听器,这样在勾选和取消勾选时就 会触发监听器的勾选事件。
接下来演示复选框的操作过程,首先编写活动页面的 XML 文件如下所示:
<?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">
<CheckBox
android:id="@+id/ck_system"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="这是系统的CheckBox" />
</LinearLayout>
接着编写对应的 Java 代码,主要是如何处理勾选监听器,具体代码如下所示:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_check_box);
// 从布局文件中获取名叫ck_system的复选框
CheckBox ck_system = findViewById(R.id.ck_system);
// 给ck_system设置勾选监听器,一旦用户点击复选框,就触发监听器的onCheckedChanged方法
ck_system.setOnCheckedChangeListener(this);
}
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
String desc = String.format("您%s了这个checkbox",isChecked ? "勾选": "取消勾选");
buttonView.setText(desc);
}
然后运行测试 App ,一开始的演示界面如图1所示,此时复选框默认未勾选。首次点击复选框,此时复选框的图标及文字均发生变化,如图2所示;再次点击复选框,此时复选框的图标及文字又发生变化,如图3所示;可见先后触发了勾选与取消勾选事件。
开关按钮 Switch
Switch 是开关按钮,它像一个高级版本的 CheckBox ,在选中与取消选中时可展现的界面元素比复选框丰富。
Switch 控件新添加的 XML 属性说明如下:
- textOn:设置右侧开启时的文本
- textOff:设置左侧关闭时的文本
- track:设置开关轨道的背景
- thumb:设置开关标识的图标
虽然开关按钮是升级版的复选框,但它在实际开发中用得不多。
原因之一是大家觉得 Switch 的默认界面不够大气,如图所示,小巧的开关图标显得有些拘谨;
原因之二是大家觉得 iPhone 的界面很漂亮,无论用户还是客户,都希望 App 实现 iOS 那样的控件风格,于是 iOS 的开关按钮 UISwitch 就成了安卓开发者仿照的对象。
所谓单选按钮,指的是在一组按钮中选择其中一项,并且不能多选,这要求有个容器确定这组按钮的范围,这个容器便是单选组 RadioGroup 。单选组实质上是个布局,同一组 RadioButton 都要放在同一个 RadioGroup 节点下。
RadioGroup 提供了 orientation 属性指定下级控件的排列方向,该属性为 horizontal 时,单选按钮在水平方向排列;该属性为 vertical 时,单选按钮在垂直方向排列。 RadioGroup 下面除了 RadioButton ,还可以挂载其他子控件(如 TextView 、 ImageView 等)。
如此看来,单选组相当于特殊的线性布局,它们主要有以下两个区别:
- 单选组多了管理单选按钮的功能,而线性布局不具备该功能。
- 如果不指定 orientation 属性,那么单选组默认垂直排列,而线性布局默认水平排列。
下面是 RadioGroup 在 Java 代码中的3个常用方法。
- check :选中指定资源编号的单选按钮。
- getCheckedRadioButtonId :获取已选中单选按钮的资源编号。
- setOnCheckedChangeListener :设置单选按钮勾选变化的监听器。
与 CheckBox 不同的是,RadioButton 默认未选中,点击后显示选中,但是再次点击不会取消选中。只有点击同组的其他单选按钮时,原来选中的单选按钮才会取消选中。
另需注意,单选按钮的选中事件不是 由 RadioButton 处理,而是由 RadioGroup 处理。 接下来演示单选按钮的操作过程,首先编写活动页面的 XML 文件如下所示:
<?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:padding="5dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="请选择您的性别" />
<RadioGroup
android:id="@+id/rg_gender"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_male"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="男" />
<RadioButton
android:id="@+id/rb_female"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="女" />
</RadioGroup>
<TextView
android:id="@+id/tv_result"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"/>
</LinearLayout>
接着编写对应的Java代码,主要是如何处理选中监听器,具体代码如下所示:
public class RadioHorizontalActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
private TextView tv_result;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_radio_horizontal);
RadioGroup rg_gender = findViewById(R.id.rg_gender);
tv_result = findViewById(R.id.tv_result);
rg_gender.setOnCheckedChangeListener(this);
}
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.rb_male:
tv_result.setText("你是男性");
break;
case R.id.rb_female:
tv_result.setText("你是女性");
break;
}
}
}
然后运行测试App,一开始的演示界面如图1所示,此时两个单选按钮均未选中。先点击左边的单选按钮,此时左边按钮显示选中状态,如图2所示;再点击右边的单选按钮,此时右边按钮显示选中状态,同时左边按钮取消选中,如图3所示;可见果然实现了组内只能选中唯一按钮的单选功能。