Android Chips(标签)

目录

一、流式布局标签发展历程

二、类型及使用

2.1 Chip.Action(默认值)

2.2 Chip.Entry

2.3 Chip.Filter

2.4 Chip.Choice

三、常用事件

3.1 OnClickListener

3.2 OnCheckedChangeListener

3.3 OnCloseIconClickListener

四、ChipGroup

4.1 ChipGroup + Chip.Choice(简单使用)

4.1.1 单选

4.1.2 多选

4.2 属性

4.3 setOnCheckedStateChangeListener

一、流式布局标签发展历程

  • 第一阶段：实现这种界面的时候，基本都是自定义一个控件，然后在Java代码中动态的 添加 一个个的TextView，还需要计算布局宽度/高度，进行换行等等处理，蛮复杂的;

  • 第二阶段：使用 RecyclerView，我们实现这种界面就比较方便了;

  • 第三阶段：谷歌为我们提供了 Chip、ChipGroup、ChipDrawable，有了这三者，我们实现这种界面就更加方便了。

二、类型及使用

Chip 的所有类型都是可点击的，根据选中效果有四种类型

  • Action(默认值)：有个点击效果，可用于展示。除非存在其他xml属性，否则按此键将不执行任何操作

  • Entry：默认情况下包含选中标记/取消标记和关闭图标。

  • Filter：标记/取消标记。

  • Choice：选中后背景颜色变化。

2.1 Chip.Action(默认值)

  • 使用 style="@style/Widget.MaterialComponents.Chip.Action"

  • 不设置style，使用默认style。

        <TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="15dp"android:text="Chip.Action"android:textColor="@color/purple_500"android:textSize="16sp" /><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"android:paddingTop="10dp"android:paddingBottom="10dp"><com.google.android.material.chip.Chipandroid:id="@+id/chip0"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="默认主题" /><com.google.android.material.chip.Chipstyle="@style/Widget.MaterialComponents.Chip.Action"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="10dp"android:text="Action未选中" /><com.google.android.material.chip.Chipstyle="@style/Widget.MaterialComponents.Chip.Action"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="10dp"android:checked="true"android:text="Action选中" /></LinearLayout>

2.2 Chip.Entry

使用 style="@style/Widget.MaterialComponents.Chip.Entry"

        <TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="15dp"android:text="Chip.Entry"android:textColor="@color/purple_500"android:textSize="16sp" /><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"android:paddingTop="10dp"android:paddingBottom="10dp"><com.google.android.material.chip.Chipandroid:id="@+id/chip2"style="@style/Widget.MaterialComponents.Chip.Entry"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Entry未选中" /><com.google.android.material.chip.Chipstyle="@style/Widget.MaterialComponents.Chip.Entry"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="10dp"android:checked="true"android:text="Entry选中" /></LinearLayout>

2.3 Chip.Filter

使用 style="@style/Widget.MaterialComponents.Chip.Filter"

        <TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="15dp"android:text="Chip.Filter"android:textColor="@color/purple_500"android:textSize="16sp" /><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"android:paddingTop="10dp"android:paddingBottom="10dp"><com.google.android.material.chip.Chipstyle="@style/Widget.MaterialComponents.Chip.Filter"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Filter未选中" /><com.google.android.material.chip.Chipstyle="@style/Widget.MaterialComponents.Chip.Filter"android:layout_width="wrap_content"android:layout_height="wrap_content"android:checked="true"android:text="Filter选中" /></LinearLayout>

2.4 Chip.Choice

使用 style="@style/Widget.MaterialComponents.Chip.Choice"

        <TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="15dp"android:text="Chip.Choice"android:textColor="@color/purple_500"android:textSize="16sp" /><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"android:paddingTop="10dp"android:paddingBottom="10dp"><com.google.android.material.chip.Chipstyle="@style/Widget.MaterialComponents.Chip.Choice"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Choice未选中" /><com.google.android.material.chip.Chipstyle="@style/Widget.MaterialComponents.Chip.Choice"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="10dp"android:checked="true"android:text="Choice选中" /></LinearLayout>

三、常用事件

3.1 OnClickListener

3.2 OnCheckedChangeListener

3.3 OnCloseIconClickListener

        binding.chip0.setOnClickListener { Toast.makeText(this, "OnClickListener", Toast.LENGTH_SHORT).show() }binding.chip1.setOnCheckedChangeListener { button, b -> Toast.makeText(this, "OnCloseIconClickListener"+b, Toast.LENGTH_SHORT).show() }binding.chip2.setOnCloseIconClickListener { Toast.makeText(this, "OnCloseIconClickListener", Toast.LENGTH_SHORT).show() }
看名字基本也能看出是干什么的，就不过多描述了

四、ChipGroup

使用 ChipGroup 可以方便的实现 流式布局效果。其特点如下：

  • 默认情况下， ChipGroup 中的 chip 会横向排列，当超过一行时会执行自动换行操作。

  • 如果我们不想让 Chip 换行，那么为 ChipGroup 设置 app:singleLine=true，如果 Chip 会超过一行，则在外层包裹 HorizontalScrollView

  • 当然，只有当其中包裹的 Chip 是 checkable=true 时，才具有选中效果。

4.1 ChipGroup + Chip.Choice(简单使用)

使用 ChipGroup + Chip.Choice ，通过 ChipGroup 的 singleSelection=true/false 属性可以实现单选或多选实现单选。这个跟 RadioGroup 的使用有点类似。

4.1.1 单选

        <com.google.android.material.chip.ChipGroupandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="15dp"app:selectionRequired="true"app:singleSelection="true"><com.google.android.material.chip.Chipstyle="@style/Widget.MaterialComponents.Chip.Choice"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="CSDN博客专家-帅次" /><com.google.android.material.chip.Chipstyle="@style/Widget.MaterialComponents.Chip.Choice"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="华为云享专家-帅次" /><com.google.android.material.chip.Chipstyle="@style/Widget.MaterialComponents.Chip.Choice"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Java" /><com.google.android.material.chip.Chipstyle="@style/Widget.MaterialComponents.Chip.Choice"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Kotlin" /><com.google.android.material.chip.Chipstyle="@style/Widget.MaterialComponents.Chip.Choice"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Flutter" /><com.google.android.material.chip.Chipstyle="@style/Widget.MaterialComponents.Chip.Choice"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="React-Native" /></com.google.android.material.chip.ChipGroup>

4.1.2 多选

上面代码不变，将 app:singleSelection="true" 改为 false 即可。

        <TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="15dp"android:text="热门推荐（多选）"android:textColor="@color/purple_500"android:textSize="16sp" /><com.google.android.material.chip.ChipGroupandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="15dp"app:selectionRequired="true"app:singleSelection="false">............</com.google.android.material.chip.ChipGroup>

4.2 属性

  • app:checkedChip: 初始选中的chip

  • app:chipSpacing: Chip间距

  • app:chipSpacingHorizontal: Chip水平间距

  • app:chipSpacingVertical: Chip垂直间距

  • app:singleLine: 是否开启单行模式，默认false

  • app:singleSelection: 是否开启单选模式，默认false

如果设置了 chipSpacing ，也设置了 chipSpacingHorizontal / chipSpacingVertical 则 chipSpacing 的值会被覆盖。如下： 

        <com.google.android.material.chip.ChipGroupandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="15dp"app:selectionRequired="true"app:checkedChip="@id/chip_csdn"app:chipSpacingHorizontal="30dp"app:chipSpacing="10dp"app:chipSpacingVertical="15dp"app:singleSelection="false"><com.google.android.material.chip.Chipandroid:id="@+id/chip_csdn"style="@style/Widget.MaterialComponents.Chip.Choice"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="CSDN博客专家-帅次" />......</com.google.android.material.chip.ChipGroup>

4.3 setOnCheckedStateChangeListener

选中监听，替换 setOnCheckedChangeListener(已过时)。此回调返回的是 id 数组。

  public interface OnCheckedStateChangeListener {/*** Called when the checked chips are changed. When the selection is cleared, {@code checkedIds}* will be an empty list.** @param ChipGroup* @param checkedIds 返回的是选中 ID 数组*/void onCheckedChanged(@NonNull ChipGroup group, @NonNull List<Integer> checkedIds);}
源码提到此回调仅在 单选模式 下可用。但是我设置为多选还是可以的，如下： 

        binding.chipGroup.setOnCheckedStateChangeListener { group, checkedIds ->Toast.makeText(this, "ChipGroup"+checkedIds, Toast.LENGTH_SHORT).show()}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/200824.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

AGI = 大模型 + 知识图谱 + 强化学习

AGI = 大模型 + 知识图谱 + 强化学习

一、大模型&#xff08;Large Models&#xff09; 定义&#xff1a; 大模型通常指的是参数数量庞大的机器学习模型&#xff0c;特别是深度学习模型。这些模型在训练时需要大量的计算资源和数据。例如&#xff0c;GPT-3&#xff08;Generative Pre-trained Transformer 3&#…
阅读更多...
力扣973. 最接近原点的 K 个点（java 排序法，大顶堆法）

力扣973. 最接近原点的 K 个点（java 排序法，大顶堆法）

Problem: 973. 最接近原点的 K 个点 文章目录 题目描述思路解题方法复杂度Code 题目描述 给定一个数组 points &#xff0c;其中 points[i] [xi, yi] 表示 X-Y 平面上的一个点&#xff0c;并且是一个整数 k &#xff0c;返回离原点 (0,0) 最近的 k 个点。 这里&#xff0c;平面…
阅读更多...
获取网络ppt资源

获取网络ppt资源

背景&#xff1a; ​ 某度上有很多优质的PPT资源和文档资源&#xff0c;但是大多数需要付费才能获取。对于一些经济有限的用户来说&#xff0c;这无疑是个遗憾&#xff0c;因为我们更倾向于以免费的方式获取所需资源。 解决方案&#xff1a; ​ 然而&#xff0c;幸运的是&am…
阅读更多...
python 笔记：将不同长度2D矩阵线性插值至相同长度（scipy.interpolate)

python 笔记：将不同长度2D矩阵线性插值至相同长度（scipy.interpolate)

1 问题描述 我现在有三个2D矩阵&#xff0c;每一行是两个元素&#xff0c;代表经纬度&#xff1b;不同矩阵的行数不同 现在希望通过线性插补&#xff0c;使得每个2D矩阵行数相同 pth_lst[[[1,2],[1,3],[3,4]],[[3,4],[5,6],[7,8],[9,10],[11,12],[13,14],[15,16]],[[2,4],[5…
阅读更多...
记录一次driud连接池的连接数用完问题

记录一次driud连接池的连接数用完问题

一、问题描述&#xff1a; 最直观的表现就是生产上项目崩了&#xff0c;无法访问。 二、分析原因&#xff1a; 通过查看生产日志&#xff0c;出现了大量的获取连接超时异常&#xff0c;具体如下&#xff1a; org.springframework.jdbc.CannotGetJdbcConnectionException:Fail…
阅读更多...
Python 网络爬虫（四）：初识网络爬虫

Python 网络爬虫（四）：初识网络爬虫

《Python入门核心技术》专栏总目录・点这里 文章目录 什么是爬虫爬虫的工作原理应用场景反爬虫合法和道德问题Robots 协议练习爬虫的一些网站总结 大家好&#xff0c;我是水滴~~ 在当今数字化时代&#xff0c;互联网上充斥着大量的数据和信息&#xff0c;而我们常常需要从这个…
阅读更多...
vue运用之echart柱状图3D效果案例代码

vue运用之echart柱状图3D效果案例代码

前言 在ECharts中，创建3D柱状图需要使用GL模块，并设置type为’bar3D’ 柱状图案例可参考，我的这篇文章 Echarts之柱状图 3D柱状图的示例代码 // 引入ECharts主模块 var echarts = require(echarts); // 引入3D模块 var GL = require(echarts/util/graphic/GL
阅读更多...
思维模型 移情效应

思维模型 移情效应

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。情感迁移&#xff0c;爱屋及乌。 1 移情效应的应用 1.1 移情效应在市场营销中应用-多芬&#xff08;Dove&#xff09;“真美运动” 多芬&#xff08;Dove&#xff09;是一家知名的个人护理…
阅读更多...
软件工程 复习笔记

软件工程 复习笔记

目录 概述 软件的定义&#xff0c;特点和分类 软件的定义 软件的特点 软件的分类 软件危机的定义和表现形式 软件危机 表现形式 软件危机的产生原因及解决途径 产生软件危机的原因 软件工程 概念 软件工程的研究内容和基本原理 内容 软件工程的基本原理 软件过程…
阅读更多...
Redis使用Lua脚本

Redis使用Lua脚本

Lua脚本 redis可以支持lua脚本&#xff0c;可以使用lua脚本来将几个命令整合为一个整体来执行&#xff0c;这样可以使得多个命令原子操作&#xff0c;且可以减少网络开销 Lua的数据类型 Lua是一个动态类型的语言&#xff0c;一个变量可以存储任何类型的值&#xff0c;类型有&am…
阅读更多...
27、卷积 - 卷积特征的可视化和一个神奇的网站

27、卷积 - 卷积特征的可视化和一个神奇的网站

既然上一节说了卷积的本质是一个特征提取器，那么既然卷积神经网络在图像分类、图像检测、图像分割以及其他领域有这么好的表现，卷积算法到底提取了什么特征呢？ 虽然有时候我们说神经网络是个黑盒，但是研究人员也一直在探索，如何将卷积学习到的特征给分析出来。 就是想要…
阅读更多...
我们是如何让微服务在实践中“活色生香”的？

我们是如何让微服务在实践中“活色生香”的？

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容1. 前言2. 请求的路径分析3. 服务周期分析4. 请求格式转换5. 服务层设计6. 业务服务层设计7. 安全防护及策略8. 结论 &#x1f4e2;文章总结&#x1f4e5;博主目标 &#x1f50a;博主介绍 &#x1f31f;我是廖志伟&#xf…
阅读更多...
带你学C语言：带你学函数

带你学C语言：带你学函数

目录 &#x1f30d;函数的概念 ★★☆☆☆库函数 ★★★★☆自定义函数 ★★★☆☆形参与实参 ★★★☆☆return语句 ★★★☆☆数组做函数参数 ★★★☆☆嵌套调用和链式访问 ★★★☆☆函数的声明和定义 ✍结束语 &#x1f30d;函数的概念 数学中我们其实就见过函数…
阅读更多...
系统运维安全之病毒自检及防护

系统运维安全之病毒自检及防护

一、前言 Linux勒索病毒&#xff08;Linux ransomware&#xff09;是一种最令人恶心的计算机恶意病毒&#xff0c;它以侵入Linux系统&#xff0c;捆绑文件并要求支付赎金才能释放文件为主要目的&#xff0c;破坏用户的数据&#xff0c;造成数据讹诈。Linux勒索病毒它们的存在已…
阅读更多...
【华为OD题库-072】相对开音节-java

【华为OD题库-072】相对开音节-java

题目 题目描述: 相对开音节构成的结构为辅音元音(aeiou)辅音(r除外)e 常见的单词有bike cake 给定一个字符串&#xff0c;以空格为分隔符反转每个单词的字母 若单词中包含如数字等其他非字母时不进行反转 反转后计算其中含有相对开音节结构的子串个数(连续子串中部分字符可以重…
阅读更多...
算法通关村第十七关-青铜挑战贪心算法思想

算法通关村第十七关-青铜挑战贪心算法思想

大家好我是苏麟 , 今天说说贪心算法 . 贪心思想很难用理论解释&#xff0c;本文我们先通过案例来感受一下贪心是如何解决问题的 大纲 难以理解的贪心算法贪心问题举例分发饼干柠檬水找零分发糖果 难以理解的贪心算法 贪心的思想非常不好解释&#xff0c;而且越使用权威的语言解…
阅读更多...
如何解读手机APP入侵与逆向破解

如何解读手机APP入侵与逆向破解

如果您有耐心看完这篇文章&#xff0c;您将懂得如何着手进行app的分析、追踪、注入等实用的破解技术&#xff0c;另外&#xff0c;通过“入侵”&#xff0c;将帮助您理解如何规避常见的安全漏洞&#xff0c;文章大纲&#xff1a; 简单介绍ios二进制文件结构与入侵的原理介绍入…
阅读更多...
报错：Parsed mapper file: ‘file mapper.xml

报错：Parsed mapper file: ‘file mapper.xml

报错 &#xff1a; Logging initialized using class org.apache.ibatis.logging.stdout.StdOutImpl adapter. Registered plugin: com.github.yulichang.interceptor.MPJInterceptor3b2c8bda Parsed mapper file: file [/Mapper.xml] application无法启动 我这边产生原因是项…
阅读更多...
P1004 [NOIP2000 提高组] 方格取数

P1004 [NOIP2000 提高组] 方格取数

洛谷的题 网址&#xff1a;P1004 [NOIP2000 提高组] 方格取数 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 动态规划&#xff0c;太tm爽了 一般来说是走一次的&#xff0c;这个是走两次&#xff0c;就变难了 怎么办呢&#xff1f; 一个方法是&#xff1a;同时开始走 先…
阅读更多...
自定义TypeHandler 将mysql返回的逗号分隔的String转换到List

自定义TypeHandler 将mysql返回的逗号分隔的String转换到List

sql执行如下&#xff1a; 这里我定义的接受类&#xff1a; 但是这里报了错JSON parse error: Cannot deserialize value of type java.util.ArrayList<java.lang.String>from Object value (token JsonToken.START_OBJECT); nested exception is com.fasterxml.jackson…
阅读更多...
最新文章

Copyright @ 2022~2023