Android UI 设计(5):RadioButton 和 CheckBox 控件

2018阿里云全部产品优惠券(好东东,强烈推荐)
领取地址 https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=82lei0yp

推荐:Android UI 设计(2):TextView 控件

[TextView这个可以说是Android中最简单的一个控件了。该控件主要用来显示一段文字。其中控件的显示设置也很简单,这里简单说一下重要的几个,控件的id,layout_weigth(宽

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

RadioButton

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

XHTML
     <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="性别:"
        android:textSize="25sp"/>
    <!--RadioGroup中定义两个RadioButton选择项 -->
    <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>

代码实现的结果:

10-2-13

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

设置默认选项

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

XHTML
<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",这样设置了“男”选择项处在选中的状态。那么,这样真的能结局我们的问题么,看下面结果:

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

10-2-14

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

10-2-15

哎,空欢喜一场,原来“android:checked=”true””的作用只不过是让选项始终处在选中状态。那么,我们到底医改如何解决默认选项的问题呢?
我们可以通过在RadioGroup中添加默认的选中项,通过语句android:checkedButton="@+id/radiobutton_man"来设置默认选中项。具体代码如下:

推荐:Android UI设计——EditText控件

[EditText是应用和用户进行交互的一个重要控件,用户在其中输入信息,EditText对信息进行处理传输。   他控件的显示设置也很简单,如TextView一样包括:id,宽,高,名称

XHTML
<!-- 在RadioGroup中设置默认选中项-->
<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>

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

10-2-16

 如何修改选择框

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

Frist: 首先你要选择两张图片,一张是选择前的,一张是选择后的。将这两个图片复制到res文件夹下的mipmap文件夹中。一在此声明下,楼主这里使用的是AndroidStudio开发软件哦,Eclipse会有所不同哦。
10-2-17 Second: 在res下的dawable文件夹下创建一个xml文件。内容为:

XHTML
<?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文件名"

XHTML
<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>

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

10-2-18

这样我们的RadioButton就差不多啦,我们来看一下CheckBox。

CheckBox

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

XHTML
<!--爱好 -->
    <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时可以多选的哦:

10-2-19

显示密码的设置

我们在登陆某些网站或者APP的时候,经常会看到密码输入框的右边会有一个选择框,让我们选择是否显示密码。当我们选中的时候,密码显示;不选中的时候,密码隐藏输入。我们他的实现就是基于CheckBox的。
首先布局文件中,如下:(需要说明一下的是,CheckBox中选择框的更改和RadioButton中的更改是相同的,在这个布局文件中我们直接做了更改。)

XHTML
    <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,他指的是该控件是否被选中,描述的是状态。
Java
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());
                }
            }
        });
    }
}

执行结果如下:
10-2-20
当然用OnClickListener做点击事件也是可以的,但是我们要通过isChecked()方法来获取CheckBox的状态。由于传入的view是View所以我们首先对view转型,然后同过view.isChecked()
Java
        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());
                }

            }
        });

推荐:UI控件之RadioButton(单选按钮)&Checkbox(复选按钮)

[(一)概述: (二)RadioButton的基本用法与事件处理: 效果图: 实现代码: xml文件<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android andro

相关推荐