MaterialButton相比我们前面介绍的ShapeableImageView等组件来说，用的相对较少一些，但是在某些场景下，还是很有用的，多个朋友多条路，所以多掌握一些总是没错的。

主题的迁移

MaterialButton的使用，需要使用到最新的Theme.MaterialComponents主题，否则会报错，所以在使用前，需要进行Theme的升级，官方提供了非常详细的说明文档，可以让大家非常方便的进行迁移，甚至还提供了用于过渡的bridge版本，具体的说明文档，大家可以参考下面的官方链接。

https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md

https://github.com/material-components/material-components-android/blob/master/docs/components/Button.md

对于MaterialButton来说，不侵入项目的最简单的方式，就是给button设置Theme，代码如下所示。

android:theme="@style/Theme.MaterialComponents.Light.NoActionBar.Bridge"

MaterialButton继承AppCompatButton，在原有Button的基础上进行了扩展，例如圆角、描边、内置icon（icon支持设置Size、Tint、Padding、Gravity等之前Button不支持的属性），同时也支持了MD的一些属性，例如支持按压水波纹并且设置color等。

公开属性如下所示：

基本上都是对Button的属性补充。

background

MaterialButton的背景，可以支持设置纯色和其它Drawable两种方式。

纯色背景色通过backgroundTint设置，代码如下所示。

image-20210329151657903

而如果是渐变等Drawable，那就需要自己创建Drawable，代码如下所示。

最重要的是，要设置backgroundTint="@null"，同时，由于设置了background，会导致圆角失效。

默认Padding

MaterialButton的上下边，默认有6dp边距，这是MD的设计规范，可以通过insetxxx来进行修改，代码如下所示。

image-20210329151737200

这个新的名词——inset，可以通过这张图了解。

img

相信通过这张图，大家可以很清楚的了解什么是inset了。

MaterialButton Style

MaterialButton可以设置几种Style。

• 默认样式style="@style/Widget.MaterialComponents.Button"：有填充色、有阴影

• style="@style/Widget.MaterialComponents.Button.UnelevatedButton"：有填充色、没有阴影

• style="@style/Widget.MaterialComponents.Button.OutlinedButton"：透明背景、彩色文字、有轮廓，没有阴影

• style="@style/Widget.MaterialComponents.Button.TextButton"：透明背景、彩色文字、没有轮廓，没有阴影

• style="@style/Widget.MaterialComponents.Button.Icon"：有填充色、有阴影、使用图标

例如设置无阴影，可以使用下面的代码。

style="@style/Widget.MaterialComponents.Button.UnelevatedButton"

MaterialButton Icon

MaterialButton比Button更加灵活，它提供了更多的icon操作，代码如下所示。

app:icon="@drawable/abc_vector_test"

image-20210329153218740

除此之外，还可以设置例如iconSize、iconGravity、iconPadding等属性，这里就不一一演示了。

shapeAppearance

MaterialButton同样可以通过shapeAppearance配合ShapeAppearanceModel来处理形状，代码如下所示。

image-20210329155533599

MD系列组件的Shape，都可以使用shapeAppearance来实现，大家需要触类旁通。

MaterialButtonToggleGroup

MaterialButtonToggleGroup是类似iOS的Segment的一个新组件，用于取代Android之前的RadioGroup，使用方式也和RadioGroup非常类似，但是同样的，提供了更多的MD设计元素属性，下面这个例子演示了最基本的使用。

image-20210329153549217

和RadioGroup一样，通过下面的代码可以给MaterialButtonToggleGroup添加监听。

toggleGroup.addOnButtonCheckedListener { group, checkedId, isChecked -> }

MaterialButtonToggleGroup还有几个主要的属性：

• singleSelection：是否单选

• selectionRequired：是否必须要选中

• checkedButton：默认选中的ID

• orientation：排列方式

借助MaterialButtonToggleGroup和MaterialButton的配合使用，可以让类似这种选择器的使用变得更加简单。

向大家推荐下我的网站 https://xuyisheng.top/  点击原文一键直达

专注 Android-Kotlin-Flutter 欢迎大家访问