MaterialButton使用解析

简介

Material Design (质感设计，又译为材质设计、材料设计），研发代号：量子纸张（英语：Quantum Paper），是由Google开发的设计语言 。扩展于Google即时的“卡片”设计，材质设计基于网格的布局、响应动画与过渡、填充、深度效果（如光线和阴影）。设计师马迪亚斯·杜阿尔特解释说：“与真正的纸张不同，我们的数字材质可以智能地扩大和变形。材质具有实体的表面和边缘。接缝和阴影表明组件的含义。“Google指出他们的新设计语言基于纸张和油墨。”

质感设计于2014年6月25日的Google I/O大会上宣布。质感设计可借助v7 appcompat库用于Android 2.1及以上版本，支持几乎所有2009年以后制造的Android设备。材质设计将逐步扩展到Google的网络和移动产品阵列，提供一致的跨平台和应用程序体验。Google还为第三方开发人员发布了API，开发人员可将质感设计应用到他们的应用程序中。

谷歌官方提供了一系列Material Design风格的Ui组件、在遵循MaterialDesig风格设计、完成基本的功能之外，还拓展许多强大的功能，如原生支持圆角、阴影、icon等属性，方便开发者快速构建出界面美观、功能多样的应用。

官方组件介绍网站 https://material.io

MaterialButton

MaterialButton是材料设计的增强型Button组件，自带阴影和悬浮效果。

属性

Icon

设置按钮的Icon

backgroundTint

设置按钮的背景色，值得注意的是Materialbutton设置背景颜色不是background属性、而是新的backgroundTint属性，它代表着给控件着色，background代表的含义包含颜色、形状、阴影等等。

cornerRadius

设置圆角、不需要再单独定义一个xml文件了 cornerRadius=“xxdp”,但是这样有一个问题，这个属性只能定义四周圆角的Button。开发中也会有需求只要求下方两个圆角，这种情况该怎么处理呢。

依然不用单独定义一个xml文件，只需要定义一个新的style就可以了 shapeAppearance中引用即可，当染

<style name="DoubleFilletButtonStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyBottomRight">rounded</item>
    <item name="cornerSizeBottomLeft">25dp</item>
    <item name="cornerSizeBottomRight">25dp</item>
</style>

如何去掉button的阴影效果呢，简单的方法使用内置的TextButon的样式，就可以去掉阴影效果了。

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

更进一步，为什么这个样式，可以去掉阴影效果呢，那些属性可以影响按钮的阴影呢？

<style name="Widget.MaterialComponents.Button.TextButton" parent="Widget.MaterialComponents.Button.UnelevatedButton">
    <item name="android:textColor">@color/mtrl_text_btn_text_color_selector</item>
    <item name="android:paddingLeft">@dimen/mtrl_btn_text_btn_padding_left</item>
    <item name="android:paddingRight">@dimen/mtrl_btn_text_btn_padding_right</item>
    <item name="iconTint">@color/mtrl_text_btn_text_color_selector</item>
    <item name="iconPadding">@dimen/mtrl_btn_text_btn_icon_padding</item>
    <item name="backgroundTint">@color/mtrl_btn_text_btn_bg_color_selector</item>
    <item name="rippleColor">@color/mtrl_btn_text_btn_ripple_color</item>

</style>

<style name="Widget.MaterialComponents.Button.TextButton" parent="Widget.MaterialComponents.Button.UnelevatedButton">
    <item name="android:textColor">@color/mtrl_text_btn_text_color_selector</item>
    <item name="android:paddingLeft">@dimen/mtrl_btn_text_btn_padding_left</item>
    <item name="android:paddingRight">@dimen/mtrl_btn_text_btn_padding_right</item>
    <item name="iconTint">@color/mtrl_text_btn_text_color_selector</item>
    <item name="iconPadding">@dimen/mtrl_btn_text_btn_icon_padding</item>
    <item name="backgroundTint">@color/mtrl_btn_text_btn_bg_color_selector</item>
    <item name="rippleColor">@color/mtrl_btn_text_btn_ripple_color</item>

</style>

可以看出关键属性在于rippleColor，继续深入一级看，发现其定义了透明度，在value.xml发现其alpha为0,即透明，所以消除阴影是讲阴影颜色设置为了透明

  <item android:alpha="@dimen/mtrl_low_ripple_default_alpha" android:color="?attr/colorPrimary"/>

Insert(Top|Bottom|Left|Right)

在我们使用materialButton的时候，会发现button设置的背景颜色不能完全填满，insert属性定义了这部分空间的填充大小，设置为0dp即可完全填充。

strokeColor

描边颜色

ripleColor

阴影颜色

Material Design Components之MaterialButton的使用