效果图
关键代码
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
我是予人三,希望大家点赞支持我哦~ 有大家的鼓励我会分享更多内容