IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> MaterialButton使用解析 -> 正文阅读

[移动开发]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的使用

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2021-07-31 16:45:30  更:2021-07-31 16:47:32 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/7 6:26:41-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码