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的使用

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

阿福的时光机

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值