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.hqwc.cn/news/251051.html

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

相关文章

优雅草蜻蜓I即时通讯·水银版私有化部署之java服务端搭建教程-01

优雅草蜻蜓I即时通讯·水银版私有化部署之java服务端搭建教程-01

目录 前言1 1 安装 mongodb2 2 安装 redis3 3. 安装jdk3 4 解压 spring-boot-imapi3 5.开始安装 消息队列组件 rocket4 6. 安装推送服务5 7. 安装 message-push5 8. 安装uplooad 服务5 9&#xff1a; 安装nginx 服务7 1.不需要SSL7 2.需要SSL7 五&#xff1a;编译…
阅读更多...
MybatisPlus中的使用Wrapper自定义SQL

MybatisPlus中的使用Wrapper自定义SQL

一、条件构造器 条件构造器提供了一种更加简洁和直观的方式来构建复杂的查询条件。它提供了一组静态方法&#xff0c;用于构建各种类型的查询条件&#xff0c;包括等于、不等于、大于、小于、包含等。使用条件构造器可以避免手动拼接SQL语句的麻烦&#xff0c;提高代码的可读性…
阅读更多...
scipy

scipy

scipy 是什么常用方法 是什么 scipy是Python语言的一个开源数值计算库&#xff0c;主要目的是为科学、工程、计算等领域提供有用的数学算法和函数&#xff0c;包括线性代数、优化、信号处理、傅里叶变换、统计函数等。它是Python科学计算环境的重要组成部分&#xff0c;通常与N…
阅读更多...
Retrofit的转换器

Retrofit的转换器

一、前言 1.为什么要使用Retrofit转换器 在我们接受到服务器的响应后&#xff0c;目前无论是OkHttp还是Retrofit都只能接收到String字符串类型的数据&#xff0c;在实际开发中&#xff0c;我们经常需要对字符串进行解析将其转变为一个JavaBean对象&#xff0c;比如服务器响应…
阅读更多...
C语言结构体介绍（超详细）

C语言结构体介绍（超详细）

文章目录 每日一言结构体是什么?为什么要使用结构体?如何使用结构体&#xff1f;结构体的定义结构体的声明如何访问结构体中的成员 结构体内存对齐什么是结构体内存对齐对齐规则修改默认对齐数 为什么存在结构对齐 总结结语 每日一言 Develop your imagination – you can u…
阅读更多...
Android : 篮球记分器app _简单应用

Android : 篮球记分器app _简单应用

示例图&#xff1a; 1.导包 在build.gradle 中 加入 // 使用androidx版本库implementation androidx.lifecycle:lifecycle-extensions:2.1.0-alpha03 2. 开启dataBinding android{...// 步骤1.开启data bindingdataBinding {enabled true}...} 3.写个类继承 ViewModel pac…
阅读更多...
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…
阅读更多...
《Pandas1.x实例精解 》书籍分享

《Pandas1.x实例精解 》书籍分享

Pandas介绍 Pandas&#xff1a;Python数据分析的瑞士军刀 在数据科学、机器学习和人工智能日益繁荣的今天&#xff0c;有效、准确地处理和分析数据已经成为了成功的关键。Python&#xff0c;作为一种强大且易于学习的编程语言&#xff0c;已经在这一领域占据了重要的地位。而…
阅读更多...
P4715 【深基16.例1】淘汰赛-仅思路

P4715 【深基16.例1】淘汰赛-仅思路

首先从题干要求入手&#xff0c;我们可以了解到题目要求是二进一&#xff0c;不难想到这是二叉树的题 再来&#xff0c;从题干可以知道&#xff0c;我们所采用的结构体除了需要有树的两个左右节点指针外&#xff0c;还需要两个变量用来储存“能力值”和“编号” 在这道题中&am…
阅读更多...
MyBatis 常见面试题

MyBatis 常见面试题

目录 1.MyBatis——概述1.1.什么是 ORM 框架&#xff1f;1.2.✨谈谈对 MyBatis 的理解。1.3.使用 MyBatis 相对于直接使用 SQL 有哪些优点&#xff1f;1.4.MyBatis 有什么优缺点&#xff1f;1.5.✨MyBatis 的分层结构是什么样的&#xff1f;1.6.✨MyBatis 的执行流程是什么样的…
阅读更多...
学习设计模式的网站

学习设计模式的网站

Refactoring and Design Patternshttps://refactoring.guru/
阅读更多...
【Pytorch使用自制数据集,Dataloader】

【Pytorch使用自制数据集,Dataloader】

数据集结构 话不多说&#xff0c;直接上核心代码 myDataset.py from collections import Counter from torch.utils.data import Dataset import os from PIL import Imageclass MyDataset(Dataset):"""读取自制的数据集args:- image_dir: 图片的地址- labe…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023