Android 之 RadioButton (单选按钮)& Checkbox (复选框)

这篇具有很好参考价值的文章主要介绍了Android 之 RadioButton (单选按钮)& Checkbox (复选框)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本节引言:

本节给大家带来的是Andoird基本UI控件中的RadioButton和Checkbox; 先说下本节要讲解的内容是:RadioButton和Checkbox的
1.基本用法
2.事件处理;
3.自定义点击效果;
4.改变文字与选择框的相对位置;
5.修改文字与选择框的距离

其实这两个控件有很多地方都是类似的,除了单选和多选,事件处理,其他的都是类似的! 另外还有一个ListView上Checkbox的错位的问题,我们会在ListView那一章对这个问题进行 解决,好的,开始本节内容~ 本节官方文档API:RadioButton;CheckBox;


1.基本用法与事件处理:


1)RadioButton(单选按钮)

如题单选按钮,就是只能够选中一个,所以我们需要把RadioButton放到RadioGroup按钮组中,从而实现 单选功能!先熟悉下如何使用RadioButton,一个简单的性别选择的例子: 另外我们可以为外层RadioGroup设置orientation属性然后设置RadioButton的排列方式,是竖直还是水平~

效果图:

android 单选按钮,Android 教程,android,ui

PS:笔者的手机是Android 5.0.1的,这里的RadioButton相比起旧版本的RadioButton,稍微好看一点~

布局代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="请选择性别"
        android:textSize="23dp"
        />

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/btnMan"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="男"
            android:checked="true"/>

        <RadioButton
            android:id="@+id/btnWoman"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="女"/>
    </RadioGroup>

    <Button
        android:id="@+id/btnpost"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="提交"/>

</LinearLayout>

获得选中的值:

这里有两种方法,

第一种是为RadioButton设置一个事件监听器setOnCheckChangeListener

例子代码如下:

RadioGroup radgroup = (RadioGroup) findViewById(R.id.radioGroup);
        //第一种获得单选按钮值的方法  
        //为radioGroup设置一个监听器:setOnCheckedChanged()  
        radgroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton radbtn = (RadioButton) findViewById(checkedId);
                Toast.makeText(getApplicationContext(), "按钮组值发生改变,你选了" + radbtn.getText(), Toast.LENGTH_LONG).show();
            }
        });

运行效果图: 

android 单选按钮,Android 教程,android,ui

PS:另外有一点要切记,要为每个RadioButton添加一个id,不然单选功能会生效!!!

第二种方法是通过单击其他按钮获取选中单选按钮的值,当然我们也可以直接获取,这个看需求~

例子代码如下:

Button btnchange = (Button) findViewById(R.id.btnpost);
        RadioGroup radgroup = (RadioGroup) findViewById(R.id.radioGroup);
        //为radioGroup设置一个监听器:setOnCheckedChanged()  
        btnchange.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                for (int i = 0; i < radgroup.getChildCount(); i++) {
                    RadioButton rd = (RadioButton) radgroup.getChildAt(i);
                    if (rd.isChecked()) {
                        Toast.makeText(getApplicationContext(), "点击提交按钮,获取你选择的是:" + rd.getText(), Toast.LENGTH_LONG).show();
                        break;
                    }
                }
            }
        });

运行效果图:

android 单选按钮,Android 教程,android,ui

代码解析: 这里我们为提交按钮设置了一个setOnClickListener事件监听器,每次点击的话遍历一次RadioGroup判断哪个按钮被选中我们可以通过下述方法获得RadioButton的相关信息!

  • getChildCount( )获得按钮组中的单选按钮的数目;
  • getChinldAt(i):根据索引值获取我们的单选按钮
  • isChecked( ):判断按钮是否选中

2)CheckBox(复选框)

如题复选框,即可以同时选中多个选项,至于获得选中的值,同样有两种方式: 1.为每个CheckBox添加事件:setOnCheckedChangeListener 2.弄一个按钮,在点击后,对每个checkbox进行判断:isChecked();

运行效果图:

android 单选按钮,Android 教程,android,ui

实现代码:

public class MainActivity extends AppCompatActivity implements View.OnClickListener,CompoundButton.OnCheckedChangeListener{

    private CheckBox cb_one;
    private CheckBox cb_two;
    private CheckBox cb_three;
    private Button btn_send;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        cb_one = (CheckBox) findViewById(R.id.cb_one);
        cb_two = (CheckBox) findViewById(R.id.cb_two);
        cb_three = (CheckBox) findViewById(R.id.cb_three);
        btn_send = (Button) findViewById(R.id.btn_send);

        cb_one.setOnCheckedChangeListener(this);
        cb_two.setOnCheckedChangeListener(this);
        cb_three.setOnCheckedChangeListener(this);
        btn_send.setOnClickListener(this);

    }

    @Override
    public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
       if(compoundButton.isChecked()) Toast.makeText(this,compoundButton.getText().toString(),Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onClick(View view) {
        String choose = "";
        if(cb_one.isChecked())choose += cb_one.getText().toString() + "";
        if(cb_two.isChecked())choose += cb_two.getText().toString() + "";
        if(cb_three.isChecked())choose += cb_three.getText().toString() + "";
        Toast.makeText(this,choose,Toast.LENGTH_SHORT).show();
    }
}

2.自定义点击效果

虽然5.0后的RadioButton和Checkbox都比旧版本稍微好看了点,但是对于我们来说 可能还是不喜欢或者需求,需要自己点击效果!实现起来很简单,先编写一个自定义 的selctor资源,设置选中与没选中时的切换图片~!

实现效果图如下:

android 单选按钮,Android 教程,android,ui

PS:这里素材的原因,有点小...

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_checked="true"
        android:drawable="@mipmap/ic_checkbox_checked"/>
    <item
        android:state_enabled="true"
        android:state_checked="false"
        android:drawable="@mipmap/ic_checkbox_normal" />
</selector>

写好后,我们有两种方法设置,也可以说一种吧!你看看就知道了~

①android:button属性设置为上述的selctor

android:button="@drawable/rad_btn_selctor"

②在style中定义一个属性,然后通过android style属性设置,先往style添加下述代码:

    <style name="MyCheckBox" parent="@android:style/Widget.CompoundButton.CheckBox">
        <item name="android:button">@drawable/rad_btn_selctor</item>
    </style>

然后布局那里:

style="@style/MyCheckBox"

3.改变文字与选择框的相对位置

这个实现起来也很简单,还记得我们之前学TextView的时候用到的drawableXxx吗? 要控制选择框的位置,两部即可!设置:

Step 1. android:button="@null"
Step 2. android:drawableTop="@android:drawable/btn_radio"
当然我们可以把drawableXxx替换成自己喜欢的效果!


4.修改文字与选择框的距离

有时,我们可能需要调节文字与选择框之间的距离,让他们看起来稍微没那么挤,我们可以:
1.在XML代码中控制: 使用android:paddingXxx = "xxx" 来控制距离
2.在Java代码中,稍微好一点,动态计算paddingLeft!

示例代码如下:文章来源地址https://www.toymoban.com/news/detail-684940.html

rb.setButtonDrawable(R.drawable.rad_btn_selctor);
int rb_paddingLeft = getResources().getDrawable(R.mipmap.ic_checkbox_checked).getIntrinsicWidth()+5; 
rb.setPadding(rb_paddingLeft, 0, 0, 0);

到了这里,关于Android 之 RadioButton (单选按钮)& Checkbox (复选框)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android开发-Android常用组件-Checkbox复选框

    2.CheckBox (复选框) 如题,复选框,即可以同时选中多个选项,至于获得选中的值,同样有两种方式: 1.为每个CheckBox添加事件:setOnCheckedChangeListener 2.弄一个按钮,在点击后,对每个checkbox进行判断:isChecked(); check_box.xml:    MainActivity.java: 进行运行测试: 选中香蕉🍌/苹果🍎

    2024年02月07日
    浏览(53)
  • 纯CSS3的单选框、复选框、开关按钮UI库-自由分享jQuery、html5、css3的插件库

    纯CSS3的单选框、复选框、开关按钮UI库-自由分享jQuery、html5、css3的插件库-遇见你与你分享

    2024年01月19日
    浏览(51)
  • react antd阻止Checkbox事件冒泡(折叠面板标题中增加复选框,阻止点击复选框折叠面板展开/折叠)

    背景 折叠面板Collapse标题中增加复选框,点击复选框,会触发折叠面板的展开和折叠。 我们希望勾选复选框的时候,不能影响到折叠面板的展开和折叠。 最开始使用 onChange 自带的event来阻止事件冒泡,这种方式是无效的,代码如下: 解决 监听复选框的 onClick 事件,用 e.st

    2024年02月11日
    浏览(57)
  • 【点击checkbox复选框,显示or隐藏某区域】

    功能: 1. 选中复选框,显示隐藏的区域; 2. 取消选中,再隐藏该显示的区域。 方法1:在layui + jquery框架下 代码如下: 运行效果图: 方法2:纯粹的HTML+CSS+JavaScript 代码入下: 运行效果图:

    2024年02月10日
    浏览(49)
  • 完美解决微信小程序使用复选框van-checkbox无法选中

    由于小程序使用了vant-ui框架,导致checkbox点击无法选中问题   记得定义 checked 默认值   解决办法 : 添加onChange事件,给 checked 做赋值操作。 可以打印看看console.log(e) 选中效果: 取消选中效果:    

    2024年02月12日
    浏览(80)
  • C# 读取带CheckBox复选框控件的表格-并集成到Windows Service里面

    最近的项目要求读取xls文件内的单元格,并且单元格旁边会有复选框标识类型。 搜了下只有java的POI有例子,NOPI看项目文档好像是没有实现读取控件的功能。 java实现 POI  POI如何解析出excel 中复选框是否被选中 https://blog.csdn.net/qq_29832217/article/details/104413475  C#导出 Excel 时,

    2024年02月14日
    浏览(90)
  • Selenium常用操作之单选复选框、下拉列表、键盘、截屏、断言、(显式隐式)等待

    目录 1. 窗口最大化 2.单选框操作 3. 复选框操作 4. 下拉列表 5. selenium 三种等待 6. 键盘操作 7.截屏 8.断言 9. Selenium操作JS弹窗控件 10.鼠标悬停与释放 (1) 强制等待    常用于调试 (2) 隐式等待   简介:      a 、 driver.implicitly_wait(10),隐式等待设置了一个时间,在一段时

    2024年02月03日
    浏览(60)
  • 合宙Air724UG LuatOS-Air LVGL API控件--复选框 (Checkbox)

    复选框 (Checkbox) 复选框主要是让用户进行一些内容选择,或者同意用户协议。 示例代码 – 复选框回调函数 function event_handler(obj, event) if event == lvgl.EVENT_VALUE_CHANGED then print(“State”, lvgl.checkbox_is_checked(obj)) end end – 创建复选框 cb = lvgl.checkbox_create(lvgl.scr_act(), nil) – 设置标签

    2024年02月11日
    浏览(44)
  • Excel 添加复选框或选项按钮(表单控件)

    要添加复选框或选项按钮,需要使用功能区上的“开发工具”选项卡。 注意: 若要启用“开发工具”选项卡,请按照以下说明进行操作: 在 Excel 2010 和后续版本中,选择“文件 选项”“自定义功能区”,选择“开发人员检查”框,然后选择“确定”。 在 Excel 2007 中,选择“

    2024年01月17日
    浏览(49)
  • element-ui的el-table表格复选框只能单选,不可多选

    element的el-table表格复选框只能选中一条,选择下一条,上一条去掉勾选。使用文档中select方法,el-table绑定一个ref。具体代码实现如下 toggleRowSelection:用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) 

    2024年02月11日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包