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，一经查实，立即删除！

相关文章

力扣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 网络爬虫（四）：初识网络爬虫

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

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

思维模型 移情效应

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。情感迁移&#xff0c;爱屋及乌。 1 移情效应的应用 1.1 移情效应在市场营销中应用-多芬&#xff08;Dove&#xff09;“真美运动” 多芬&#xff08;Dove&#xff09;是一家知名的个人护理…
阅读更多...
我们是如何让微服务在实践中“活色生香”的？

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

文章目录 &#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勒索病毒它们的存在已…
阅读更多...
算法通关村第十七关-青铜挑战贪心算法思想

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

大家好我是苏麟 , 今天说说贪心算法 . 贪心思想很难用理论解释&#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…
阅读更多...
Java抽象类（abstract class）和接口（interface）的区别——面试

Java抽象类（abstract class）和接口（interface）的区别——面试

1.抽象类&#xff08;abstract class&#xff09;和接口&#xff08;interface&#xff09;的区别&#xff1a; 抽象类可以有构造方法&#xff0c;接口中不能有构造方法。 抽象类中可以有普通成员变量&#xff0c;接口中没有普通成员变量。抽象类中可以包含非抽象的普通方法&am…
阅读更多...
ultralytics yolo图像分类训练案例；pytorch自有数据集图像分类案例

ultralytics yolo图像分类训练案例；pytorch自有数据集图像分类案例

1、ultralytics yolo图像分类训练案例 优点：使用方便，训练过程评估指标可以方便查看 缺点：自带模型少，可选择自定义小 参考：https://docs.ultralytics.com/tasks/classify/#val https://blog.csdn.net/weixin_42357472/article/details/131412851 1）数据集格式 https://…
阅读更多...
dockerdesktop 制作asp.net core webapi镜像-连接sqlserver数据库容器

dockerdesktop 制作asp.net core webapi镜像-连接sqlserver数据库容器

1.使用visual studio 创建 asp.net core webapi项目 选择启用docker 会生成Dockerfile文件 2.使用efcore连接数据库&#xff0c;安装efcore的包 <ItemGroup><PackageReference Include"Microsoft.VisualStudio.Azure.Containers.Tools.Targets" Version&qu…
阅读更多...
Linux系统调试课：PCIe调试手段

Linux系统调试课：PCIe调试手段

文章目录 一、lspci 命令二、pciutils 工具沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本文我们要介绍pcie调试手段。 一、lspci 命令 通过lspci可以查看当前系统挂载了哪些pci设备。 lspci - 列出 PCI 设备 lspci 命令可以列出计算机中所有 PCI 设备的详细信息，…
阅读更多...
【Transformer论文精读系列】（一）如何理解Transformer里的注意力机制？

【Transformer论文精读系列】（一）如何理解Transformer里的注意力机制？

论文&#xff1a;Attention Is All You Need 参考李沐老师的讲解视频&#xff1a; Transformer论文逐段精读【论文精读】_哔哩哔哩_bilibili 其他参考&#xff1a; 超强动画&#xff0c;一步一步深入浅出解释Transformer原理&#xff01;_哔哩哔哩_bilibili Transformer论文逐段…
阅读更多...
JVM虚拟机：JVM参数之X参数

JVM虚拟机：JVM参数之X参数

本文重点 本文将学习x参数 x参数 -Xint:解释执行 -Xcomp&#xff1a;第一次使用就编译成本地代码 -Xmixed&#xff1a;混合模式&#xff08;Javac、java&#xff0c;先编译后执行&#xff09;
阅读更多...
17、迭代器模式（Iterator Pattern）

17、迭代器模式（Iterator Pattern）

迭代器模式提供了顺序访问集合对象中的各种元素&#xff0c;而不暴露该对象内部结构的方法。如Java中遍历HashMap。 迭代器模式将遍历集合中所有元素的操作封装成迭代器类&#xff0c;其目的是在不暴露集合对象内部结构的情况下&#xff0c;对外提供统一访问集合的内部数据的方…
阅读更多...
C# Demo--汉字转拼音

C# Demo--汉字转拼音

1.Nuget安装NPOI及Pinyin4net 2.Demo 代码部分 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using NPOI.SS.UserModel; using NPOI.HSSF.UserModel; using NPOI.XSSF.UserModel; using System.IO;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023