Android UI 设计——RadioButton 和 CheckBox 控件

最新推荐文章于 2024-07-18 23:34:48 发布

自由职业者-毛豆豆

最新推荐文章于 2024-07-18 23:34:48 发布

阅读量760

点赞数

分类专栏： android

android 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

首先说明一下为什么我要将这两个控件放在一起来说：RadioButton和CheckBox都是选择按钮。什么叫做选择按钮不用说了吧。RadioButton和CheckBox的区别是：RadioButton是单选按钮;CheckBox是多选按钮。举例来说明一下，有时候我们注册信息，需要选择性别，我们的选择只有一个所以我们只能选其一，这时候我们那就用RadioButton;有时候我们需要选择我们的特长，像读书，写字，画画之类我们可以选择其中的多个这时候我们就用CheckBox。因为这两个控件的用法比较相似所以我们放在一起来说一下。首先来说一下单选按钮RadioButton。

RadioButton

RadioButton一般和RadioGroup一起使用。RadioGroup中包含若干RadioButton，这些RadioButton构成了我们的选择项。例如：我们的性别有“男”，“女”。所以我们的选择项就有“男”和“女”两项。这两项就是一个RadioGroup，然后“男”和“女”分别是一个RadioButton。这样解释大家是不是就对RadioButton的使用有一个大体的了解了呢，那么接下来我们来看代码……（说多少都不如实际来操作一下……）

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="性别:"

android:textSize="25sp"/>



<RadioGroup

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

<RadioButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="男"/>

<RadioButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="女"/>

</RadioGroup>

代码实现的结果：

经过操作我们可以知道，RadioGruop中定义的RadioButton只能选择其中的一个，只能选择“男”或者“女”。这就是RadioButton的特点：单选。这也就是告诉我们RadioButton不能单独使用。

设置默认选项

有时候我们提交数据给数据库处理，但是我们在填写数据的过程中忘记选择性别。这样就会提交一个不完整数据给数据库，以至于在处理数据的过程中出现错误。但是如果我们设置默认选项，即使我们忘记填写数据，也不会出现错误。那么我们如何在RadioButton中如何设置默认选项呢？看下面这段代码。

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="性别:"

android:textSize="25sp"/>

<RadioGroup

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

<RadioButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="男"

android:checked="true"/>

<RadioButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="女"/>

</RadioGroup>

我们在“男”选择项的RadioButton中添加了一句代码android:checked="true"，这样设置了“男”选择项处在选中的状态。那么，这样真的能结局我们的问题么，看下面结果：

默认状态下选中“男”，哇……好像真的解决我们的问题了：

但是，实际上当我们选中”女”的时候，“男”依然处在被选中状态……

哎，空欢喜一场，原来“android:checked=”true””的作用只不过是让选项始终处在选中状态。那么，我们到底医改如何解决默认选项的问题呢？

我们可以通过在RadioGroup中添加默认的选中项，通过语句android:checkedButton="@+id/radiobutton_man"来设置默认选中项。具体代码如下：

<RadioGroup

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:checkedButton="@+id/radiobutton_man">

<RadioButton

android:id="@+id/radiobutton_man"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="男"/>

<RadioButton

android:id="@+id/radiobutton_woman"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="女"/>

</RadioGroup>

这样就噢啦，问题就真的解决了……

如何修改选择框

有时候有同志会认为：这个RadioButton默认的选择框不是很好看，我可不可以修改一下啊。那答案当然是可以啦，下面我们来看如何去修改选择框。

Frist: 首先你要选择两张图片，一张是选择前的，一张是选择后的。将这两个图片复制到res文件夹下的mipmap文件夹中。一在此声明下，楼主这里使用的是AndroidStudio开发软件哦，Eclipse会有所不同哦。

Second: 在res下的dawable文件夹下创建一个xml文件。内容为：

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@mipmap/a_radbtn_select" android:state_checked="true"/>

<item android:drawable="@mipmap/a_radbtn"/>

</selector>

Thrid:在RadioButton中修改选择框，通过添加语句android:button="@drawable/xml文件名"

<RadioGroup

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:checkedButton="@+id/radiobutton_man">

<RadioButton

android:id="@+id/radiobutton_man"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="男"

android:button="@drawable/radiobutton_check"/>

<RadioButton

android:id="@+id/radiobutton_woman"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="女"

android:button="@drawable/radiobutton_check"/>

</RadioGroup>

结果如下，是不是好看点了啊，哈哈哈哈……

CheckBox

CheckBox是多选按钮，它的使用并不像RadioButton一样要有一个RadioGroup。它的使用是单独的，我想这也正是它可以多选的原因。首先来看一下CheckBox的使用：

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="爱好"/>

<CheckBox

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="left"

android:text="游泳"/>

<CheckBox

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="left"

android:text="读书"/>

<CheckBox

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="left"

android:text="画画"/>

<CheckBox

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="left"

android:text="写字"/>

<CheckBox

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="left"

android:text="玩游戏"/>

从结果中可以看到CheckBox时可以多选的哦：

显示密码的设置

我们在登陆某些网站或者APP的时候，经常会看到密码输入框的右边会有一个选择框，让我们选择是否显示密码。当我们选中的时候，密码显示；不选中的时候，密码隐藏输入。我们他的实现就是基于CheckBox的。

首先布局文件中，如下：（需要说明一下的是，CheckBox中选择框的更改和RadioButton中的更改是相同的，在这个布局文件中我们直接做了更改。）

<EditText

android:id="@+id/edittext_inputpasssword"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:password="true"

android:hint="@string/edittext_inputpasssword" />

<CheckBox

android:id="@+id/checkbox_isshow"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="right"

android:text="@string/checkbox_isshow"

android:button="@drawable/checkbox_isshowpassword"/>

<Button

android:id="@+id/button_login"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:text="@string/button_login"/>

MAinActivity中在OnCreate中添加点击事件，注意：CheckBox的点击事件一般使用OnCheckedChangeListener，因为CheckBox并不像Button一样只需检测是否被点击，CheckBox是需要检测他的状态的：选中or不选中。重写OnCheckedChangeListener的onCheckedChanged(CompoundButton compoundButton, boolean isChecked)方法，他有两个参数，一个是CompoundButton compoundButton，他指的是哪个CheckBox控件发生的点击事件；另一个是boolean isChecked，他指的是该控件是否被选中，描述的是状态。

public class MainActivity extends Activity {

private EditText mEditTextInputPassword;

private CheckBox mCheckBoxIsShow;

private Button mButtonLogin;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mEditTextInputPassword = (EditText) findViewById(R.id.edittext_inputpasssword);

mCheckBoxIsShow = (CheckBox) findViewById(R.id.checkbox_isshow);

mButtonLogin = (Button) findViewById(R.id.button_login);

mCheckBoxIsShow.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

@Override

public void onCheckedChanged(CompoundButton compoundButton, boolean isChecked) {

//如果被选中，则密码显示；如果没有被选中，密码隐藏输入。默认显示是隐藏显示。

if (isChecked) {

mEditTextInputPassword.setTransformationMethod(null);

} else {

mEditTextInputPassword.setTransformationMethod(new PasswordTransformationMethod());

}

}

});

}

}

执行结果如下：

当然用OnClickListener做点击事件也是可以的，但是我们要通过isChecked()方法来获取CheckBox的状态。由于传入的view是View所以我们首先对view转型，然后同过view.isChecked（）

mCheckBoxIsShow.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

CheckBox box = (CheckBox) view;

if (box.isChecked()) {

mEditTextInputPassword.setTransformationMethod(null);

} else {

mEditTextInputPassword.setTransformationMethod(new PasswordTransformationMethod());

}

}

});

RadioButton

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="性别:"

android:textSize="25sp"/>



<RadioGroup

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

<RadioButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="男"/>

<RadioButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="女"/>

</RadioGroup>