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)


相关推荐

  • 杂谈 – 自定义搜索引擎

    杂谈 – 自定义搜索引擎在Firefox上,以{肯定被驳回}搜索引擎为例。{肯定被驳回}搜索引擎搜索英文关键词时,给出的也基本是英文,例如这样:看了几篇不符合自己的胃口,遂点击了左上角小提示:仅限简体中文结果,例如这样:发现第二篇就是自己想要的东西,遂想,中文的结果也不错,何不设置不管中英文关键字,都先输出中文呢?所以实现方式,就是:添加addcustomsearchengine。2.点击扩展图标其中,SearchURL为:为了避免被驳回,请自行输入。然后点击蓝色按钮。然后在Firefox的

  • 第一章《初识数据库》

    第一章《初识数据库》

  • 一个使用Java jdk8中Nashorn(Java javascript引擎)设计的Web开发框架

    一个使用Java jdk8中Nashorn(Java javascript引擎)设计的Web开发框架

  • excel查找结果导出_excel数据怎么导出

    excel查找结果导出_excel数据怎么导出使用PhpSpreadsheet导入&amp;amp;导出Excel,通用方法。适用各种Excel操作场景!

  • C++线程池QueueUserWorkItem

    C++线程池QueueUserWorkItem在计算机程序中,线程是一种很重要的资源,使用的恰当可以极大的提高程序的效率,也就是多线程的使用,但是多线程会让应用程序变得异常复杂,会占用大量的系统资源。就像QQ表情一样,每一个QQ表情的闪动都需要构建一个线程,如果用户使用了大量的表情(GIF),将会有多少个线程在运行,系统的性能将大大减少,甚至导致死机。在这种情况下,多线程变得不太合适了,那么什么机制适用于这种情况下呢,这就是线程池。通

    2022年10月24日
  • 自动编码器模型和代码解释

    自动编码器模型和代码解释CNN算法与程序研究 1)      深度学习基本理论方法http://wenku.baidu.com/view/2e630ddfc5da50e2524d7ff3 特征多,给出的信息多,识别准确性会提升。但是,计算复杂度增加,搜索的空间大,可以用来训练的数据在每个特征上就会稀疏。采用层次网络结构,BP一层隐层节点的浅层模型,带有一层隐层节点(如SVM、Boostin

发表回复

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

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