[Android Material Design]组件11 - Chip

效果图

关键代码

ChipGroup的作用从命名可以看出来，是一组Chip的容器，管理它所包含的多个Chip，如布局方式及响应事件。
Chip可以指定多种样式，app:chipIcon在文字前面设置小图标，app:closeIconEnabled="true"在文字后面设置关闭图标，并对该关闭图标设置点击事件setOnCloseIconClickListener ，代码如下：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val chipGroup = findViewById<ChipGroup>(R.id.chip_group)
        chipGroup.setOnCheckedChangeListener { chipGroup1: ChipGroup, i: Int ->
            val chip: Chip = chipGroup1.findViewById(i)
            Toast.makeText(this@MainActivity, chip.text, Toast.LENGTH_SHORT).show()
        }

        val chipClose = findViewById<Chip>(R.id.chip_close)
        chipClose.setOnCloseIconClickListener { view: View? -> chipGroup.removeView(view) }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

MainActivity布局文件如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chip_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:chipSpacing="10dp"
        app:singleSelection="false">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:text="Chip"
            android:textAllCaps="false" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:text="水波纹颜色"
            android:textAllCaps="false"
            app:rippleColor="@color/purple_200" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:text="图标"
            android:textAllCaps="false"
            app:chipIcon="@mipmap/ic_launcher"
            app:chipIconEnabled="true"
            app:chipIconSize="20dp"
            app:iconStartPadding="5dp" />

        <com.google.android.material.chip.Chip
            android:id="@+id/chip_close"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:text="删除按钮"
            android:textAllCaps="false"
            app:closeIconEnabled="true" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:text="背景"
            android:textColor="@color/white"
            android:textAllCaps="false"
            app:chipBackgroundColor="@color/purple_500" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:text="边框"
            android:textAllCaps="false"
            app:chipStrokeColor="@color/purple_500"
            app:chipStrokeWidth="2dp" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checkable="true"
            android:clickable="true"
            android:text="圆角角度"
            android:textAllCaps="false"
            app:chipCornerRadius="0dp" />
    com.google.android.material.chip.ChipGroup>
LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

控件常用属性

ChipGroup的属性

Chip的属性

源码地址

https://github.com/yurensan/MaterialDesignDemo

我是予人三，希望大家点赞支持我哦~ 有大家的鼓励我会分享更多内容