[Android Material Design]组件11 - Chip

发布于:2022-11-07 ⋅ 阅读:(411) ⋅ 点赞:(0)

效果图

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

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


网站公告

今日签到

点亮在社区的每一天
去签到