Android Design Support Library v28 新增组件详解

封面

1.简介

Google在近期发布了最新的Design Support Library 28.0.0-alpha3版本，其中新增了一些非常实用的组件，本篇文章将会对其进行详细的介绍，一起来看下！

如果你对Material Design还不太了解，可以点击这篇文章《Design Support Library介绍》了解一下。

引入依赖库

在app根目录的buil.gradle文件中加入依赖：

dependencies {
    ...
    implementation 'com.android.support:design:28.0.0-alpha3'
}

2.MaterialButton

MaterialButton组件继承于Button，因此可以使用Button的大部分属性，可以更便捷的设置按钮圆角、边框、图标等属性，看下效果：

MaterialButton

对应的布局文件：

注意：MaterialButton必须设置textAppearance属性，如果没有的话会报错，不知道是不是bug。

MaterialButton属性速查表：

属性	介绍
app:backgroundTint	按钮背景着色
app:backgroundTintMode	按钮背景的着色模式
app:icon	按钮图标（在文字左边，不能设置位置）
app:iconSize	按钮图标大小
app:iconPadding	按钮图标的内边距
app:iconTint	按钮图标着色
app:iconTintMode	按钮图标的着色模式
app:additionalPaddingStartForIcon	按钮图标的左内边距
app:additionalPaddingEndForIcon	按钮图标的右内边距
app:strokeColor	按钮边框颜色
app:strokeWidth	按钮边框宽度
app:cornerRadius	按钮圆角角度
app:rippleColor	按钮点击水波纹效果颜色

着色模式效果

着色模式效果

3.Chip & ChipGroup

在Chip组件出现之前，我们一直都是通过自定义控件的形式来实现关键字标签等UI效果的，比如《Android 流式布局FlowLayout 实现关键字标签》中实现的效果，现在Chip & ChipGroup组件可以对其进行原生支持了，非常Nice，看下效果：

Chip & ChipGroup

对应的布局文件：

单选或多选功能需要设置android:checkable="true"才可以实现，官方给的设置方式是app:checkable=“true”，会报错找不到，可能是bug，发布正式版的时候再看看。

Chip组件默认不支持点击，需要设置android:clickable="true"才可以。

ChipGroup属性速查表：

属性	介绍
app:chipSpacing	Chip在水平&垂直方向的间距
app:chipSpacingHorizontal	Chip在水平方向的间距
app:chipSpacingVertical	Chip在垂直方向的间距
app:singleLine	是否单行显示Chip，默认为false
app:singleSelection	是否为单选模式，默认为false

Chip属性速查表：

属性	介绍
app:chipBackgroundColor	Chip背景颜色
app:chipCornerRadius	Chip圆角角度
app:chipStrokeColor	Chip边框颜色
app:chipStrokeWidth	Chip边框宽度
app:rippleColor	Chip点击水波纹效果颜色
app:chipIconEnabled	是否在Chip上显示图标，默认为true
app:chipIcon	Chip图标（在文字左边，不能设置位置）
app:chipIconSize	Chip图标大小
app:closeIconEnabled	是否显示Chip关闭按钮，默认为false
app:closeIcon	Chip关闭按钮图标
app:closeIconTint	Chip关闭按钮着色
app:closeIconSize	Chip关闭按钮大小
app:checkedIconEnabled	是否显示Chip选中图标，默认为true
app:checkedIcon	Chip选中图标
app:chipStartPadding	Chip左内边距
app:chipEndPadding	Chip右内边距
app:iconStartPadding	Chip图标左内边距
app:iconEndPadding	Chip图标右内边距
app:textStartPadding	Chip文字左内边距
app:textEndPadding	Chip文字右内边距
app:closeIconStartPadding	Chip关闭图标左内边距
app:closeIconEndPadding	Chip关闭图标右内边距

4.MaterialCardView

与普通CardView相比，可以设置边框样式，看下效果：

MaterialCardView

对应的布局文件：

MaterialCardView属性速查表：

属性	介绍
app:strokeColor	MaterialCardView边框颜色
app:strokeWidth	MaterialCardView边框宽度

5.BottomAppBar

BottomAppBar组件通常会与FloatingActionButton组件一起使用，但是在开发过程中不是很常用，看下效果：

BottomAppBar

对应的布局文件：

根布局需要使用CoordinatorLayout，FloatingActionButton通过layout_anchor属性与BottomAppBar绑定在一起。

BottomAppBar属性速查表：

属性	介绍
app:backgroundTint	BottomAppBar背景着色
app:fabAlignmentMode	FAB位置（居中或居右），默认为居右
app:fabAttached	是否绑定FAB，默认为true
app:fabCradleMargin	BottomAppBar与FAB的距离，默认为5dp
app:fabCradleRoundedCornerRadius	BottomAppBar与FAB相邻处的圆角角度，默认为8dp
app:fabCradleVerticalOffset	FAB在BottomAppBar中的垂直偏移量，默认为0dp

6.写在最后

到这里Design Support Library v28新增组件就介绍完了，如有错误或者遗漏的地方可以给我留言评论，谢谢！

代码已上传至GitHub，欢迎Star、Fork！

GitHub地址：https://github.com/alidili/DesignSupportDemo

本文Demo的Apk下载地址：https://github.com/alidili/DesignSupportDemo/raw/master/DesignSupportDemo.apk