Android实现自由单选、复选按钮效果+样式美化[通俗易懂]

Android实现自由单选、复选按钮效果+样式美化[通俗易懂]背景Android开发中会遇到将单选按钮排布在多行的情况,一般只能通过自定义控件的形式,绘制单选按钮,网络上也有很多这样的文章,但一般情况下自定义的控件在界面美观性、效果方面稍有欠缺。因此,我们打算用CheckBox+LinearLayout来实现一种多行单选按钮组的效果。效果如下:思路Android中要实现单选按钮要用到RadioGroup+RadioButton的布局结…

大家好,又见面了,我是你们的朋友全栈君。

背景

Android开发中会遇到将单选按钮排布在多行的情况,一般只能通过自定义控件的形式,绘制单选按钮,网络上也有很多这样的文章,但一般情况下自定义的控件在界面美观性、效果方面稍有欠缺。

因此,我们打算用CheckBox+LinearLayout来实现一种多行单选按钮组的效果。

效果如下:

demo

思路

Android中要实现单选按钮要用到RadioGroup+RadioButton的布局结构。

RadioGroup继承自LinearLayout,只能按单行或单列的形式排布RadioButton组,所以只能通过其他方法来解决。

RadioButton如果不放置在RadioGroup中,则功能类似于CheckBox,只是不能取消选择。

鉴于上述两个原因,单选组的实现中使用CheckBox控件,更利于封装和统一,因为封装的方法复选框也可以用。

单选组

示例中的单选组采用横向分布形式,第一行使用LinearLayout做横向布局,里面放置5个CheckBox;第二行使用LinearLayout做横向布局,里面放置2个CheckBox。

布局结构

  • LinearLayout
    • CheckBox
    • CheckBox
    • CheckBox
    • CheckBox
    • CheckBox
  • LinearLayout
    • CheckBox
    • CheckBox

相关布局xml源码:

<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginTop="20dip">
<CheckBox android:id="@+id/radio1" style="@style/select_style" android:tag="rd1" android:text="单选1" />
<CheckBox android:id="@+id/radio2" style="@style/select_style" android:tag="rd2" android:text="单选2" />
<CheckBox android:id="@+id/radio3" style="@style/select_style" android:tag="rd3" android:text="单选3" />
<CheckBox android:id="@+id/radio4" style="@style/select_style" android:tag="rd4" android:text="单选4" />
<CheckBox android:id="@+id/radio5" style="@style/select_style" android:tag="rd5" android:text="单选5" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginTop="10dip">
<CheckBox android:id="@+id/radio6" style="@style/select_style" android:tag="rd6" android:text="单选6" />
<CheckBox android:id="@+id/radio7" style="@style/select_style" android:tag="rd7" android:text="单选7" />
</LinearLayout>

单选控制

因为CheckBox本身是复选框,如果把一组CheckBox做成单选模式的话需要监听CheckBox的Click事件,这个地方用Click事件更合适一点,因为监听的是“被点击”而不是“值改变”。
单选控制要在Activity中注册事件:

/** * 单选项点击事件 * @param checkBox */
@OnClick({ 
R.id.radio1, R.id.radio2, R.id.radio3, R.id.radio4, R.id.radio5, R.id.radio6, R.id.radio7})
void changeRadios(CheckBox checkBox) { 

CommonUtil.unCheck(radios);
checkBox.setChecked(true);
}

说明:

CommonUtil.unCheck(radios); 取消所有单选组CheckBox的选中状态;

checkBox.setChecked(true); 设置当前CheckBox选中,因为Radio是不能点击自己取消自己选中状态的,这样比较符合设计逻辑。

用到了ButterKnife框架赖绑定click事件,对一组View来说,绑定起来比较方便。

其中:

CommonUtil.unCheck方法:

/** * 取消checkbox选中状态 * * @param checkBoxList 复选框列表 */
public static void unCheck(List<CheckBox> checkBoxList) { 

for (CheckBox chb : checkBoxList) { 

chb.setChecked(false);
}
}

获取选中值

因为单选效果是我们通过CheckBox虚拟出来的,所以按钮的选中值也得做出相应修改,这里定义了一个工具方法:

/** * 获取单选值 * * @param checkBoxList * @return String 单选值 */
public static String getOne(List<CheckBox> checkBoxList) { 

String tag = "";
for (CheckBox chb : checkBoxList) { 

if (chb.getTag() == null) { 

continue;
}
if (chb.isChecked()) { 

tag = chb.getTag().toString();
break;
}
}
return tag;
}

说明:

CheckBox的值是通过tag属性来取得,在界面布局时给CheckBox已经加上了tag。

复选组

Android提供的CheckBox就可以提供复选功能,只是多数情况下我们需要使用一组CheckBox,并获取选中的所有值。

布局结构

借鉴单选组的构建方法,复选组的界面xml:

<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginTop="20dip">
<CheckBox android:id="@+id/checkbox1" style="@style/select_style" android:tag="chb1" android:text="复选1" />
<CheckBox android:id="@+id/checkbox2" style="@style/select_style" android:tag="chb2" android:text="复选2" />
<CheckBox android:id="@+id/checkbox3" style="@style/select_style" android:tag="chb3" android:text="复选3" />
<CheckBox android:id="@+id/checkbox4" style="@style/select_style" android:tag="chb4" android:text="复选4" />
<CheckBox android:id="@+id/checkbox5" style="@style/select_style" android:tag="chb5" android:text="复选5" />
</LinearLayout>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_marginTop="10dip">
<CheckBox android:id="@+id/checkbox6" style="@style/select_style" android:tag="chb6" android:text="复选6" />
<CheckBox android:id="@+id/checkbox7" style="@style/select_style" android:tag="chb7" android:text="复选7" />
</LinearLayout>

获取选中值

提前将一系列CheckBox定义到一个集合中,然后通过遍历集合中已选中的CheckBox,就可以获得选中的值了,这里同样将value存放在tag中。

/** * 获取多选值 * * @param checkBoxList * @return String 多个值结合,逗号分隔 */
public static String getMany(List<CheckBox> checkBoxList) { 

StringBuffer sb = new StringBuffer();
for (CheckBox chb : checkBoxList) { 

if (chb.getTag() == null) { 

continue;
}
if (chb.isChecked()) { 

if (sb.length() > 0) { 

sb.append(", ");
}
sb.append(chb.getTag().toString());
}
}
return sb.toString();
}

样式美化

示例中去除了图标,定义了CheckBox的样式select_style:

<!-- 选择框自定义主题 -->
<style name="select_style"> <item name="android:layout_width">60dip</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_marginLeft">4dip</item> <item name="android:layout_marginRight">4dip</item> <item name="android:paddingTop">4dip</item> <item name="android:paddingBottom">4dip</item> <item name="android:background">@drawable/select_selector</item> <item name="android:button">@null</item> <item name="android:gravity">center</item> <item name="android:textSize">13sp</item> <item name="android:textColor">@drawable/txt_select_selector</item> </style>

实际使用过程可通过android:drawableLeft等属性为单选组、复选组添加小图标,满足项目需求。

Activity源码

package com.dommy.selectcustom;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.CheckBox;
import android.widget.TextView;
import android.widget.Toast;
import com.dommy.selectcustom.util.CommonUtil;
import java.util.List;
import butterknife.BindView;
import butterknife.BindViews;
import butterknife.ButterKnife;
import butterknife.OnClick;
public class MainActivity extends AppCompatActivity { 

@BindView(R.id.txt_value)
TextView tvValue; // 选种值
@BindViews({ 
R.id.radio1, R.id.radio2, R.id.radio3, R.id.radio4, R.id.radio5, R.id.radio6, R.id.radio7})
List<CheckBox> radios; // 单选组
@BindViews({ 
R.id.checkbox1, R.id.checkbox2, R.id.checkbox3, R.id.checkbox4, R.id.checkbox5, R.id.checkbox6, R.id.checkbox7})
List<CheckBox> checkBoxes; // 多选组
@Override
protected void onCreate(Bundle savedInstanceState) { 

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
// 如果有初始状态需要显示,参见:
// com.dommy.selectcustom.util.CommonUtil.checkOne()
// com.dommy.selectcustom.util.CommonUtil.checkMany()
}
/** * 单选项点击事件 * @param checkBox */
@OnClick({ 
R.id.radio1, R.id.radio2, R.id.radio3, R.id.radio4, R.id.radio5, R.id.radio6, R.id.radio7})
void changeRadios(CheckBox checkBox) { 

CommonUtil.unCheck(radios);
checkBox.setChecked(true);
// 显示选中项值
String checkedValues = CommonUtil.getOne(radios);
tvValue.setText("选中了:" + checkedValues);
}
/** * 复选项点击事件 * @param checkBox */
@OnClick({ 
R.id.checkbox1, R.id.checkbox2, R.id.checkbox3, R.id.checkbox4, R.id.checkbox5, R.id.checkbox6, R.id.checkbox7})
void changeCheckBoxs(CheckBox checkBox) { 

// 显示选中项值
String checkedValues = CommonUtil.getMany(checkBoxes);
tvValue.setText("选中了:" + checkedValues);
}
}

项目源码

https://github.com/ahuyangdong/SelectCustom

CSDN下载:
https://download.csdn.net/download/ahuyangdong/10722882

最新更新

想支持Checkbox的自适应布局呈现吗?见最新文章:Android实现自由单选、复选按钮效果+样式美化(二)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/146202.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • .net 常用开源框架

    .net 常用开源框架Json.NETCodePlexArchiveJson.Net是一个读写Json效率比较高的.Net框架.Json.Net使得在.Net环境下使用Json更加简单。通过LinqToJSON可以快速的读写Json,通过JsonSerializer可以序列化你的.Net对象。让你轻松实现.Net中所有类型(对象,基本数据类型等)和Json的转换。Math.NETMath.NETMath.NET的目标是为提供一款自身包含清晰框架的符号运算和数学运算/科学运算,它是C#开发的开.

  • 软件测试相关知识_软件测试期末考试知识点

    软件测试相关知识_软件测试期末考试知识点软件测试是软件生存周期中必不可少的环节,软件的典型生存周期可以用下图来形容:软件测试的目的是尽可能早的发现软件缺陷并确保其得以修复,因此软件测试是提高软件质量的重要手段,大量的经验实践证明,软件测试越早参与到软件开发过程中,开发出来的软件质量相对越高,时间和物力也越经济。根据软件工程的基本理论,多模块程序的测试共包括以下4个层次:…

  • 股票模拟交易_复杂状态机

    股票模拟交易_复杂状态机给定一个长度为 N 的数组,数组中的第 i 个数字表示一个给定股票在第 i 天的价格。设计一个算法计算出最大利润。在满足以下约束条件下,你可以尽可能地完成更多的交易(多次买卖一支股票):你不能同时参与多笔交易(你必须在再次购买前出售掉之前的股票)。卖出股票后,你无法在第二天买入股票 (即冷冻期为 1 天)。输入格式第一行包含整数 N,表示数组长度。第二行包含 N 个不超过 10000 的正整数,表示完整的数组。输出格式输出一个整数,表示最大利润。数据范围1≤N≤105输入样例:51

  • 解决:VUE同一路由强制刷新页面

    解决:VUE同一路由强制刷新页面解决:VUE同一路由强制刷新页面

  • JavaScript如何将Unit8Array图片数据转换为JPG图片

    JavaScript如何将Unit8Array图片数据转换为JPG图片网页端JavaScript如何将Unit8Array图片数据转换为JPG图片

  • this指针用法

    this指针用法

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号