大家好,又见面了,我是你们的朋友全栈君。
背景
Android开发中会遇到将单选按钮排布在多行的情况,一般只能通过自定义控件的形式,绘制单选按钮,网络上也有很多这样的文章,但一般情况下自定义的控件在界面美观性、效果方面稍有欠缺。
因此,我们打算用CheckBox+LinearLayout来实现一种多行单选按钮组的效果。
效果如下:
思路
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账号...