Android Design控件MaterialButton使用详解

前言

我们在平时写布局时，当遇到按钮需要圆角、或者描边等，通常的方法是新建一个xml文件，在shape标签下写，然后通过setBackground(drawable)设置。这本来没什么问题，但是射击师会喜欢看起来和别人不一样的效果，也许是为了审（zhuang）美（bi），例如这个页面用4dp的圆角，那个页面用10dp的圆角，要有描边，颜色还不太一样……如果我们每个界面都新建个xml写shape，那么后期维护起来就像无底洞……那么有没有这样一个控件，能满足平时开发的基本UI需求？当然有，GitHub上第三方的库大把。不过Google官方在SDK28的时候也推出了一个新控件 —— MaterialButton，但是我发现很多人还不知道这个控件，今天就来安利下。

导入依赖

implementation 'com.android.support:design:28.0.0'

MaterialButton在design包，继承AppCompatButton，在原来Button的基础上做了一些扩展，如圆角、描边、前置icon（icon支持设置Size，Tint，Padding）等，还支持按压水波纹并且设置color，基本能满足日常的需求。

先来看一波效果图：


按压水波纹，支持设置波纹颜色

使用

MaterialButton在使用的时候，必须要指定android:textAppearance，否则会报错！其值有如下几个：

公开属性如下：

属性	描述
app:backgroundTint	背景着色
app:backgroundTintMode	着色模式
app:strokeColor	描边颜色
app:strokeWidth	描边宽度
app:cornerRadius	圆角大小
app:rippleColor	按压水波纹颜色
app:icon	图标（注：位置只能在文本左侧）
app:iconSize	图标大小
app:iconGravity	图标重心（start
app:iconTint	图标着色
app:iconTintMode	图标着色模式
app:iconPadding	图标和文本之间的间距

关于backgroundTint

Tint即着色的意思，backgroundTint就表示对背景进行着色，官网文档是这么描述的：

Specify background tint using the app:backgroundTint and app:backgroundTintMode attributes, which accepts either a color or a color state list.

大致意思是，可以使用app:backgroundTint和app:backgroundTintMode指定背景色，该属性接收color。
Button的background可以设置shape、select的drawable，但是MaterialButton只能设置color drawable。源码里有这么一段：

Log中明确表示，“MaterialButton不支持设置自定义background”，这里的background指的是像shape、select之类的drawable。
所以说MaterialButton只能设置color背景，像颜色渐变的drawable是不支持的。

关于TintMode

TintMode就是是改变背景的着色模式，Mode的取值有六种：
1、add——两层绘制叠加融合
2、screen——上下层都显示（就像是多了块tint色的玻璃）
3、src_over——tint色覆盖住图片，都显示
4、src_in——默认取交集，显示上层
5、multiply——取两层绘制的交集
6、src_atop——取下层非交集部分与上层交集部分
具体可参考PorterDuff.Mode

关于insetTop、insetBottom

看下面的代码：

<android.support.design.button.MaterialButton
        android:id="@+id/btn1"
        android:layout_width="150dp"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="MaterialButton"
        android:textAppearance="?android:attr/textAppearance"
        android:textColor="@android:color/white"
        android:textSize="18sp"
/>

xml预览图：

有没有感觉怪怪的？貌似button上下多了一个padding！咦！代码里面明明没有设置padding啊！把代码padding改为0dp试试，然后看看效果，还是没变化！这就坑了！莫非MaterialButton内部设置了padding？
查了资料发现，MaterialButton默认上下留了一定dp的透明padding，使得height看起来并没有Button一样高（至于为什么留了padding，这个没有去细究）。

解决的办法就是，在xml将MaterialButton的insetTop和insetBottom都设置为0dp，这样MaterialButton的高度就和实际设置的高度一致了。

关于带背景描边

先来看看这个图：

看到什么了吗？再仔细看，发现描边的四个圆角，都有一丢丢的背景色没覆盖。如果去掉按钮背景色，或者app:backgroundTint设置为透明，就不会有问题。

总结

对于MaterialButton，会有如下几个问题：
（1）只能使用app:backgroundTint设置背景色，而不能使用自定义drawable；
（2）默认上下会留有一点dp的padding，想要height达到实际值，可以将insetTop和insetBottom都设置为0dp；
（3）带背景色并设置描边的时候，会有问题，具体原因及解决方案暂时没想到，如果大家有思路，欢迎交流。
总的来说，MaterialButton可以实现背景色、圆角，描边、按压水波纹、前置icon等，适合处理一些常规的任务，但是如果需要实现复杂些的drawable，如背景渐变drawable，就显得抓襟见肘了，具体还是看需求。

参考：

Design Support Library 28