Skip to content

标签 (Chips)

源:Chips

标签是代表输入、属性或操作的紧凑元素。它们允许用户输入信息、进行选择、过滤内容或触发操作。

标签类型

四种变体

  1. Assist chip (辅助标签): 代表智能或自动操作(如“添加到日历”)。
  2. Filter chip (过滤标签): 用于过滤内容,通常包含勾选图标。
  3. Input chip (输入标签): 代表一段离散信息(如收件人),通常包含删除图标。
  4. Suggestion chip (建议标签): 提供动态生成的建议(如回复选项)。

代码实现

1. 单个 Chip 样式

xml
<com.google.android.material.chip.Chip
    style="@style/Widget.Material3.Chip.Assist"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="辅助标签"
    app:chipIcon="@drawable/ic_event" />
xml
<com.google.android.material.chip.Chip
    style="@style/Widget.Material3.Chip.Filter"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="过滤标签"
    android:checked="true" />
xml
<com.google.android.material.chip.Chip
    style="@style/Widget.Material3.Chip.Input"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="输入标签"
    app:closeIconVisible="true" />

2. Chip 组 (ChipGroup)

用于排列多个标签并管理选中逻辑。

xml
<com.google.android.material.chip.ChipGroup
    android:id="@+id/chipGroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    app:selectionRequired="true">

    <com.google.android.material.chip.Chip ... />
    <com.google.android.material.chip.Chip ... />

</com.google.android.material.chip.ChipGroup>

交互监听

kotlin
// 响应标签点击
chip.setOnClickListener { ... }

// 响应输入标签的删除图标点击
chip.setOnCloseIconClickListener { ... }

// 响应选中状态变化
chipGroup.setOnCheckedStateChangeListener { group, checkedIds ->
    // checkedIds 是一个 List<Int>
}

主题化

你可以通过 chipBackgroundColorshapeAppearance 自定义外观。

主题化示例(图示:使用切角形状的自定义标签)