RadioGroup实现单选框的多行排列

RadioGroup的使用非常简单,只是一般情况下,只能是横向排列或竖向排列.如果让多横排列的的就不是那么简单的了。

也许有童鞋该说了,将RadioButton写到LineLayout中不久行了吗?经过检验确实可以那样做,刚开始我也是这样做到.不过运行起来发现了了一个bug---单选按钮不在是单选了.而且选择事件不会被监听到.这就要求我们去想办法了.其实实现起来也不难.只要多用几个RadioGroup就可以了(要在代码中处理一些事件)。

上代码:

1.xml中的布局:

<RelativeLayout
  android:id="@+id/main_tab_container"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:paddingTop="30dp">

  <RadioGroup
   android:id="@+id/radio1"
   android:layout_width="match_parent"
   android:layout_height="60dp"
   android:layout_margin="5dp"
   android:orientation="horizontal">

   <RadioButton
    android:id="@+id/rb_1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="GBP英镑" />

   <RadioButton
    android:id="@+id/rb_2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="HKD港元" />

   <RadioButton
    android:id="@+id/rb_3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="USD美元Ԫ" />
  </RadioGroup>

  <RadioGroup
   android:id="@+id/radio2"
   android:layout_width="match_parent"
   android:layout_height="60dp"
   android:layout_below="@+id/radio1"
   android:layout_margin="5dp"
   android:orientation="horizontal">

   <RadioButton
    android:id="@+id/rb_4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="CHF瑞士法郎" />

   <RadioButton
    android:id="@+id/rb_5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="SGD新加坡元" />

   <RadioButton
    android:id="@+id/rb_6"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="SEK瑞典克朗" />
  </RadioGroup>

  <RadioGroup
   android:id="@+id/radio3"
   android:layout_width="match_parent"
   android:layout_height="60dp"
   android:layout_below="@+id/radio2"
   android:layout_margin="5dp"
   android:orientation="horizontal">

   <RadioButton
    android:id="@+id/rb_7"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="JPY日元" />

   <RadioButton
    android:id="@+id/rb_8"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="CAD加拿大元Ԫ" />

   <RadioButton
    android:id="@+id/rb_9"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:textSize="@dimen/RB_text_size"
    android:text="AUD澳大利亚元" />
  </RadioGroup>

  <RadioGroup
   android:id="@+id/radio4"
   android:layout_width="match_parent"
   android:layout_height="60dp"
   android:layout_below="@+id/radio3"
   android:layout_margin="5dp"
   android:orientation="horizontal">

   <RadioButton
    android:id="@+id/rb_10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="@dimen/RB_text_size"
    android:text="EOR欧元Ԫ" />

  </RadioGroup>

</RelativeLayout>

这样就实现了多行布局,这只是我布局中的一部分,其中 android:textSize=”@dimen/RB_text_size” 为自己定义的字体大小.

2.activity中的使用以及处理:

public class SelectMoneyActivity extends BaseActivity {

 String strBtnSelected = ""; //记录选择的是哪个选项

 private RadioGroup rg1, rg2, rg3, rg4;
 private RadioButton rb_1, rb_2, rb_3, rb_4, rb_5, rb_6, rb_7, rb_8, rb_9, rb_10;

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

  initView();

 }

 private void initView() {

  rg1 = (RadioGroup) findViewById(R.id.radio1);
  rg2 = (RadioGroup) findViewById(R.id.radio2);
  rg3 = (RadioGroup) findViewById(R.id.radio3);
  rg4 = (RadioGroup) findViewById(R.id.radio4);

  rb_1 = (RadioButton) findViewById(R.id.rb_1);
  rb_2 = (RadioButton) findViewById(R.id.rb_2);
  rb_3 = (RadioButton) findViewById(R.id.rb_3);
  rb_4 = (RadioButton) findViewById(R.id.rb_4);
  rb_5 = (RadioButton) findViewById(R.id.rb_5);
  rb_6 = (RadioButton) findViewById(R.id.rb_6);
  rb_7 = (RadioButton) findViewById(R.id.rb_7);
  rb_8 = (RadioButton) findViewById(R.id.rb_8);
  rb_9 = (RadioButton) findViewById(R.id.rb_9);
  rb_10 = (RadioButton) findViewById(R.id.rb_10);

  btn_back = (Button) findViewById(R.id.btn_back);
  btn_next = (Button) findViewById(R.id.btn_next);

//创建监听器,为每个RadioButton注册监听

  BtnSelected btnSelected1 = new BtnSelected("1");
  BtnSelected btnSelected2 = new BtnSelected("2");
  BtnSelected btnSelected3 = new BtnSelected("3");
  BtnSelected btnSelected4 = new BtnSelected("4");
  BtnSelected btnSelected5 = new BtnSelected("5");
  BtnSelected btnSelected6 = new BtnSelected("6");
  BtnSelected btnSelected7 = new BtnSelected("7");
  BtnSelected btnSelected8 = new BtnSelected("8");
  BtnSelected btnSelected9 = new BtnSelected("9");
  BtnSelected btnSelected10 = new BtnSelected("10");

  rb_1.setOnClickListener(btnSelected1);
  rb_2.setOnClickListener(btnSelected2);
  rb_3.setOnClickListener(btnSelected3);
  rb_4.setOnClickListener(btnSelected4);
  rb_5.setOnClickListener(btnSelected5);
  rb_6.setOnClickListener(btnSelected6);
  rb_7.setOnClickListener(btnSelected7);
  rb_8.setOnClickListener(btnSelected8);
  rb_9.setOnClickListener(btnSelected9);
  rb_10.setOnClickListener(btnSelected10);

//点击事件的监听器
 public class BtnSelected implements View.OnClickListener {

  private String btnId;

  public BtnSelected(String str) {
   btnId = str;
  }

  @Override
  public void onClick(View v) {
   strBtnSelected = btnId;  //选择的某一项
   isSelect = true;
   //点击了第一行 ,就把另外行的点击项清空
   if (btnId.equals("1") || btnId.equals("2") || btnId.equals("3")) {

    rg2.clearCheck();
    rg3.clearCheck();
    rg4.clearCheck();
   } else if (btnId.equals("4") || btnId.equals("5") || btnId.equals("6")) {
    rg1.clearCheck();
    rg3.clearCheck();
    rg4.clearCheck();
   } else if (btnId.equals("7") || btnId.equals("8") || btnId.equals("9")) {
    rg1.clearCheck();
    rg2.clearCheck();
    rg4.clearCheck();
   } else {
    rg1.clearCheck();
    rg2.clearCheck();
    rg3.clearCheck();
   }
  }
 }
}

已经搞定.还有一种方法就是自定义RadioGroup实现,不过这种有点复杂.我还是下班回家了.

补充:

使用RadioGroup.setcheck(RadioButton的id)初始化默认选中A按钮,但是监听不会执行的问题

解决:因为已经给A按钮在布局中设置了check=”true”; 将这个属性去掉就会执行监听了.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android UI实现多行文本折叠展开效果

    上文介绍了单行文本水平触摸滑动效果,通过EditText实现TextView单行长文本水平滑动效果. 本文继续介绍了多行文本折叠展开,自定义布局View实现多行文本折叠和展开 1.概述 经常在APP中能看到有引用文章或大段博文的内容,他们的展示样式也有点儿意思,默认是折叠的,当你点击文章之后它会自动展开.再次点击他又会缩回去. 网上有找到部分效果,感觉不是很满意.最后自己尝试用 自定义布局layout 写了个demo.比较简陋,不过可以用了.有这方面需求的朋友可以稍加改造下.如有更好的创意,也不

  • Android自定义View之RadioGroup实现跨多行显示

    本文实例为大家分享了Android RadioGroup跨多行显示的具体代码,供大家参考,具体内容如下 此自定义View源于网络,具体出处不详. import android.content.Context; import android.content.res.TypedArray; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import androi

  • Android中实现多行、水平滚动的分页的Gridview实例源码

    功能要求: (1)比如每页显示2X2,总共2XN,每个item显示图片+文字(点击有链接). 如果单行水平滚动,可以用Horizontalscrollview实现. 如果是多行水平滚动,则结合Gridview(一般是垂直滚动的)和Horizontalscrollview实现. (2)水平滚动翻页,下面有显示当前页的icon. 1.实现自定义的HorizontalScrollView(HorizontalScrollView.java): 因为要翻页时需要传当前页给调用者,所以fling函数中自己

  • 详解Android TextView属性ellipsize多行失效的解决思路

    本文介绍了Android TextView属性ellipsize多行失效的解决思路,分享给大家,具体如下: 多余文字显示省略号的常规做法 android:ellipsize="end" //省略号显示在末尾 android:ellipsize="middle" //省略号显示在中间 但是设置android:maxLines="2" 以后,ellipsize的值end有效,middle无效,本方法解决middle无效的问题 /** * 字符串显示到

  • android TextView多行文本(超过3行)使用ellipsize属性无效问题的解决方法

    布局文件中的TextView属性 复制代码 代码如下: <TextViewandroid:id="@+id/businesscardsingle_content_abstract"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="5dp"android:lineSpacingMu

  • RadioGroup实现单选框的多行排列

    RadioGroup的使用非常简单,只是一般情况下,只能是横向排列或竖向排列.如果让多横排列的的就不是那么简单的了. 也许有童鞋该说了,将RadioButton写到LineLayout中不久行了吗?经过检验确实可以那样做,刚开始我也是这样做到.不过运行起来发现了了一个bug---单选按钮不在是单选了.而且选择事件不会被监听到.这就要求我们去想办法了.其实实现起来也不难.只要多用几个RadioGroup就可以了(要在代码中处理一些事件). 上代码: 1.xml中的布局: <RelativeLayo

  • HTML复选框和单选框 checkbox和radio事件介绍

    checkbox 和 radio的事件选择一度让我很迷惑. 开始以我对js的理解,我觉得change事件应该是最合理的,可惜啊ie下change事件是在改变后焦点离开时才触发. 后来就用click mousedown等鼠标事件代替.发现click比mousedown要更完美一些: radio注册了click事件以后,神奇的是用键盘上的上下左右选择时,居然会触发鼠标事件,滚轮也会触发,这种神奇的事情在mousedown下面是不会发生的.(webkit不能使用上下左右选择) checkbox注册cl

  • 基于JavaScript实现单选框下拉菜单添加文件效果

    本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript实现的,具体详情如下所示: 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个选项有不同的积分)积分的多少来给出评语 演示代码: <html> <head> <title>DHTML技术演示---radio的使用</title> <meta http-equiv="content-Type"

  • 网页从弹窗页面单选框传值至父页面代码分享

    在项目中,需要完成这样一个功能:在加入新机构的时候,需要选择它的上级机构,实现方式为点击查找填入按钮,弹出弹窗页面,用户点击所需的行,并点击确定按钮,将用户选择的机构名称和机构代码传回到加入新机构的页面. 在这里记录一下弹窗页面代码 <!DOCTYPE html PUBLIC "-//WC//DTD HTML . Transitional//EN" "http://www.w.org/TR/html/loose.dtd"> <%@ page con

  • 微信小程序 radio单选框组件详解及实例代码

    微信小程序单选框radio 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: radio-group 单选群组,内部由多个radio组成 属性名 类型 默认值 说明 bindchange EventHandle   radio-g

  • 微信小程序单选框组应用详解

    本文实例为大家分享了微信小程序单选框组应用的具体代码,供大家参考,具体内容如下 需求概述 有一个核选项数组,里面存放着核选项名称.内容.ID.选择状态.选择状态有未选择.符合.不符合三种,默认全部为未选择.通过wx:for将数组渲染到页面,每个核选项都有两个单选按钮,分别是符合和不符合按钮,点击对应按钮会将改变对应那条元素中的选择状态的值,且点击不符合时,会显示出一个文本域,让用户输入不符合原因. 页面最下面有一个提交按钮,点击时会遍历核选项数组,若有选择状态为未选择的项,则无法提交,并提醒.

  • uniapp下单选框的实现方法详解

    uniapp官方虽然提供了uni-data-checkbox,含括了单选和多选框功能.但是它功能实在不能满足需求: 单选框不支持再次点击取消 无法与父组件的数据源进行联动,无法实现如多规格选择的那种联动 源码每次点击都是对数据源进行拷贝,然后再进行json解析等操作,看着就很不靠谱,数据量大必然有性能问题. 其实我放弃uni-data-checkbox,选择自己实现也是因为商品规格展示是比较复杂的,不自己实现的话无法达到目的: 看图中,三组规格选项是要相互联动的,选择了其中一个后,就得判断其余的

  • element UI 中的 el-tree 实现 checkbox 单选框及 bus 传递参数功能

    el-tree 单选功能 在日常项目开发中,会经常遇到,树形结构的查询方式,为了快速方便开发,常常会使用到快捷的ui组件去快速搭树形结构,这里我用的是 element ui 中的 el-tree .第一次接触这种功能的时候也是各种网站查询,虽然也都能实现功能,但是都会有一些小问题,就很难受,那么我们废话不多说(好像也说了不少呢),直接上效果. el-tree 单选 html 代码 *** 注: load 和 lazy 属性不是需要的粘贴时请删除.(只有需要懒加载的树才需要,关于怎样构建懒加载树以

  • 使用AngularJS处理单选框和复选框的简单方法

    AngularJS对表单的处理相当简单.在AngularJS使用双向数据绑定方式进行表单验证的时候,实质上它在帮我们进行表单处理. 使用复选框的的例子有很多,同时我们对它们的处理方式也有很多.这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法. 创建Angular表单 在这篇文章里,我们需要两个文件:index.html和app.js.app.js用来保存所有的Angular代码(它不大),而index.html是动作运行的地方.首先我们创建AngularJS文件.

  • AngularJS 单选框及多选框的双向动态绑定

    AngularJS 在 <input type="text" /> 中实现双向动态绑定十分简单,如下所示: <input type="text" ng-model="topic.title" /> 只需要用ng-model 与 $scope 中的属性对应,即实现了type="text" 的双向动态绑定.当 <input type="radio" /> 及 <inpu

随机推荐