当前位置: 首页 > 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. 事务概念 事务是关系库中不可分割的一系列数据库操作,这些操作必须要么整体成功,要么整体失败。事务维护数据完整性,保证数据库总是处于一致性状态。虽然,各关系库中事务实现和操作的具体细节有所不同,但基本概念和功能完全相同,而具体操作…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

springboot 日志类切面,接口成功记录日志,失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...