当前位置: 首页 > news >正文

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()}

相关文章:

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.Choi…...

飞行汽车开发原理(上)

前言 小节的安排是由浅入深&#xff0c;要按顺序读&#xff1b;有电路知识基础的同学可跳到“计算机电路”一节开始。因为知识点之间有网状依赖&#xff0c;没办法按分类来讲。 为了避免过于深入、越讲越懵&#xff0c;很多描述仅为方便理解、不求严谨。 半导体特性 导体&a…...

22、pytest多个参数化的组合

官方实例 # content of test_multi_parametrie.py import pytestpytest.mark.parametrize("x",[0,1]) pytest.mark.parametrize("y",[2,3]) def test_foo(x,y):print("{}-{}".format(x,y))pass解读与实操 要获得多个参数化参数的所有组合&…...

【网络奇缘】- 如何自己动手做一个五类|以太网|RJ45|网络电缆

​ ​ &#x1f308;个人主页: Aileen_0v0&#x1f525;系列专栏: 一见倾心,再见倾城 --- 计算机网络~&#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 本篇文章关于计算机网络的动手小实验---如何自己动手做一个网线&#xff0c; 也是为后面的物理层学习进…...

【从零开始学习JVM | 第三篇】类的生命周期(高频面试)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。 在本文中&#xff0c;我们将深入探讨类的生命周期&#xff0c;从类加载到…...

详解前后端交互时PO,DTO,VO模型类的应用场景

前后端交互时的数据传输模型 前后端交互流程 前后端交互的流程: 前端与后端开发人员之间主要依据接口进行开发 前端通过Http协议请求后端服务提供的接口后端服务的控制层Controller接收前端的请求Contorller层调用Service层进行业务处理Service层调用Dao持久层对数据持久化 …...

力扣295. 数据流的中位数

优先队列 思路&#xff1a; 中位数是排序中间的数值&#xff1a;S1.M.S2可以使用两个优先队列来存放两边的数值&#xff0c;总是使得左侧的堆顶是最大的&#xff0c;右侧的堆顶是最小的&#xff0c;即使用大顶堆存放 S1&#xff0c;使用小顶堆存放S2&#xff0c;使得两个队列的…...

英语二笔记

完型填空 20题/0.5分 总分10, 至少拿8分 阅读理解A 20题/2分 总分40 至少拿24分 阅读理解B 5题/2分 总分10 至少拿6分 短文翻译 1题/15分 …...

【OpenSSH升级】升级后证书认证登录突然失效

上一篇“【OpenSSH升级】无论密码输入正确与否总是登录失败&#xff08;error: Could not get shadow information for root&#xff09;”总结了CentOS7上的openssh从7.4升级到9.4之后&#xff0c;密码认证失败问题&#xff0c;这里再总结一下证书认证失效问题。 大多数情况下…...

pytest +uiautomator2+weditor app自动化从零开始

目录结构1.0 把设备连接单独移出去了 模块操作代码&#xff0c;有一些流程操作和断言方法 from devices import dv from time import sleep import random from tool.jt import capture_screenshotdef initialization(func):def wrapper():sleep(1)dv.app_stop(com.visteon.…...

【计算机网络笔记】物理层——信道与信道容量

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…...

深度学习火车票识别系统 计算机竞赛

文章目录 0 前言1 课题意义课题难点&#xff1a; 2 实现方法2.1 图像预处理2.2 字符分割2.3 字符识别部分实现代码 3 实现效果4 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 图像识别 火车票识别系统 该项目较为新颖&#xff0c;适…...

C++EasyX之井字棋

视频链接 井字棋 用EasyX和C实现井字棋小游戏 源码及注释 #include<graphics.h>char board_data[3][3] {{-,-,-},{-,-,-},{-,-,-}, };char current_piece O;//检测指定棋子的玩家是否获胜 bool CheckWin(char c) {// 检查每一行for (int i 0; i < 3; i){if (bo…...

12.5_黑马数据结构与算法Java

目录 001 二分查找 算法描述 002 二分查找 算法实现 003 二分查找 问题1 循环条件 004 二分查找 问题2 中间索引 thinking&#xff1a;反码补码原码&#xff1f; thinking&#xff1a;二进制转十进制&#xff1f; thinking&#xff1a;无符号右移&#xff1f; 005 二分…...

【PID学习笔记 5 】控制系统的性能指标之一

写在前面 PID在实际工程中最重要的工作就是调参&#xff0c;那么首先就要了解控制系统的性能指标。上文最后简要介绍了控制系统的基本要求&#xff0c;本文开始将系统学习控制系统的性能指标&#xff0c;内容比较多&#xff0c;初步计划是分三节来讲解。本文重点介绍性能指标的…...

HarmonyOS学习--TypeScript语言学习(三)

本章目录如下 一、条件语句 二、迭代器 三、循环 四、函数 五、类 一、条件语句 条件语句用于基于不同的条件来执行不同的动作。TypeScript 条件语句是通过一条或多条语句的执行结果&#xff08;True 或 False&#xff09;来决定执行的代码块。 在 TypeScript 中&#x…...

Matlab 镜像变换(2D)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 镜像变换是一个非常有趣的过程,它有着一个通用的套路(以2D为例):一个点围绕一个给定对称轴的镜像可以通过平移对称轴上一点,然后旋转它,使对称轴与x轴对齐,之后我们将旋转后的点的y坐标置为负,最后再将对称…...

SpringBoot3-快速体验

1、pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.…...

计数问题(数位DP)

题目大意&#xff1a;给定一个区间&#xff0c;求该区间内0 ~ 9出现的次数&#xff0c;多次询问&#xff0c;以0 0结束询问 测试用例&#xff1a; 输入&#xff1a; 1 10 44 497 346 542 1199 1748 1496 1403 1004 503 1714 190 1317 854 1976 494 1001 1960 0 0 输出&#xff…...

SQL Server事务(Transaction)

5. 事务(Transaction) 5.1. 事务概念 事务是关系库中不可分割的一系列数据库操作,这些操作必须要么整体成功,要么整体失败。事务维护数据完整性,保证数据库总是处于一致性状态。虽然,各关系库中事务实现和操作的具体细节有所不同,但基本概念和功能完全相同,而具体操作…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...