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

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>

控件常用属性

ChipGroup的属性

类别	属性名称	作用
Checkable	app:checkedChip	初始选中的chip
Paddings	app:chipSpacing	Chip间的间距
Paddings	app:chipSpacingHorizontal	Chip间的水平间距
Paddings	app:chipSpacingVertical	Chip间的垂直间距
Mode	app:singleLine	是否开启单行模式
Mode	app:singleSelection	是否开启单选模式

Chip的属性

类别	属性名称	具体作用
Shape	app:chipCornerRadius	圆角半径
Size	app:chipMinHeight	最小高度
Background	app:chipBackgroundColor	背景颜色
Border	app:chipStrokeColor	边线颜色
Border	app:chipStrokeWidth	边线宽度
Ripple	app:rippleColor	水波纹效果的颜色
Label	android:text	文本内容
Label	android:textColor	修改文本颜色
Label	android:textAppearance	字体样式
Chip Icon	app:chipIconVisible	前面的图标是否展示
Chip Icon	app:chipIcon	chip中文字前面的图标
Chip Icon	app:chipIconTint	文字前面的图标着色
Chip Icon	app:chipIconSize	chip中文字前面的图标
Close Icon	app:closeIconVisible	chip中文字后面的关闭按钮是否可见
Close Icon	app:closeIcon	chip中文字后面的关闭图标
Close Icon	app:closeIconSize	文字后面的关闭图标的大小
Close Icon	app:closeIconTint	文字后面的着色
Checkable	app:checkable	是否可以被选中
Checked Icon	app:checkedIconVisible	选中状态的图标是否可见
Checked Icon	app:checkedIcon	选中状态的图标
Paddings	app:chipStartPadding	chip左边距
Paddings	app:chipEndPadding	chip右边距
Paddings	app:iconStartPadding	chipIcon的左边距
Paddings	app:iconEndPadding	chipIcon的右边距
Paddings	app:textStartPadding	文本左边距
Paddings	app:textEndPadding	文本右边距
Paddings	app:closeIconStartPadding	关闭按钮的做左边距
Paddings	app:closeIconEndPadding	关闭按钮的右边距

源码地址

https://github.com/yurensan/MaterialDesignDemo

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