FloatingActionButton是悬浮操作按钮,它继承自imageview,所以说它具备有imageview所有的方法和属性。与其他按钮不同的是,FloatingActionButton默认就是圆形的,只要设置背景色和背景图片,展现出来的就圆形按钮,FloatingActionButton常用的属性有:

  • app:backgroundTint - 设置FAB的背景颜色。
  • app:rippleColor - 设置FAB点击时的背景颜色。
  • app:borderWidth - 该属性尤为重要,如果不设置0dp,那么在4.1的sdk上FAB会显示为正方形,而且在5.0以后的sdk没有阴影效果。所以设置为borderWidth="0dp"。
  • app:elevation - 默认状态下FAB的阴影大小。
  • app:pressedTranslationZ - 点击时候FAB的阴影大小。
  • app:fabSize - 设置FAB的大小,该属性有两个值,分别为normal和mini,对应的FAB大小分别为56dp和40dp。
  • src - 设置FAB的图标,Google建议符合Design设计的该图标大小为24dp。
  • app:layout_anchor - 设置FAB的锚点,即以哪个控件为参照点设置位置。
  • app:layout_anchorGravity - 设置FAB相对锚点的位置,值有 bottom、center、right、left、top等。

  实现的代码如下:

 <android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@mipmap/icon"
app:backgroundTint="#ff87ffeb"
app:rippleColor="#33728dff"
app:elevation="6dp"
app:pressedTranslationZ="12dp" />

  同时有时为了实现和背面控件的同步滑动(如:有时候要调用Snackbar的时候,不同步滑动会有相互遮挡的问题),这个时候就需要把需要同步滑动的控件都放在CollapsingToolbarLayout控件中,关于CollapsingToolbarLayout的使用方式,在前面的博客中介绍过。

  5.x存在的一些问题

  • 木有阴影

记得设置app:borderWidth="0dp"

  • 按上述设置后,阴影出现了,但是竟然有矩形的边界(未设置margin时,可以看出)

需要设置一个margin的值。在5.0之前,会默认就有一个外边距(不过并非是margin,只是效果相同)。

so,良好的实践是:

  • 添加属性app:borderWidth="0dp"
  • 对于5.x设置一个合理的margin

不是闷骚的程序员算不上程序员。我的微信公众号“那点鼻事”,在这里周一到周五每天一篇文章,与技术无关,只哈牛逼。

Material Design学习-----FloatingActionButton的更多相关文章

  1. Android Material Design的FloatingActionButton,Snackbar和CoordinatorLayout

    如果是为了兼容低版本的Android系统,则需要引用Android Material Design的扩展支持库,我在之前的一篇文章张,较为详细的说明了如何导入Android Material Desi ...

  2. Material Design学习之 Button(具体分析,传说中的水滴动画)

    转载请注明出处:王亟亟的大牛之路 上一篇大致介绍了Material Design的一些基本概念传送门:http://blog.csdn.net/ddwhan0123/article/details/5 ...

  3. Material Design学习笔记

    Wiki->移动开发->Android->Material Design-原质化设计 (友情链接:http://wiki.jikexueyuan.com/project/materi ...

  4. Material Design学习

    前言: 最为一个用习惯了bootstrap的前端小菜,今天偶然听闻material design 这个从未听闻的前端框架,带着好奇开始了新的尝试,并将bootstrap跟material design ...

  5. Android Material Design 学习笔记 - Matrial Theme

    google在2014年 I/O大会上推出了一种新的设计设计语言—Material design,这种设计语言语言旨在为手机.平板电脑.台式机和“其他平台”提供更一致.更广泛的“外观和感觉”(附上官方 ...

  6. Material Design之FloatingActionButton的使用

    FloatingActionButton是继承至ImageView,所以FloatingActionButton拥有ImageView的全部属性. CoordinatorLayout能够用来配合Flo ...

  7. Material Design学习之 ProgreesBar

    转载奇怪注明出处:王亟亟的大牛之路 继续我们Material Design的内容,这一篇讲的是进度条,上一篇是Switch地址例如以下:http://blog.csdn.net/ddwhan0123/ ...

  8. Material Design学习之 Camera

    转载请注明出处:王亟亟的大牛之路 年后第一篇,自从来了某司产量骤减,这里批评下自己,这一篇的素材来源于老牌Material Design控件写手afollestad的 https://github.c ...

  9. Material Design学习之 Bottom navigation

    转载请注明出处:王亟亟的大牛之路 礼拜4一天由于事假没有去单位然后礼拜3由于生日也没写文章,今天一早上班就补一篇MD的内容.这一篇是关于颇有争议的Bottom navigation相关内容(主要是翻译 ...

随机推荐

  1. Mysql 创建数据库后修改属性

    添加表字段 alter table table1 add transactor varchar(10) not Null; alter table   table1 add id int unsign ...

  2. centOS IP能ping通但是域名ping不通

    centOS IP能ping通但是域名ping不通, 导致了yum update 无更新. 百度了很久,最后有个方法试过解决了: iptables -X iptables -F 然后重新 yum up ...

  3. Delphi中的窗体创建与销毁

    Delphi中的窗体,有模式窗体与非模式窗体两种.两种窗体的调用方式不同,模式窗体使用ShowModal显示,非模式窗体使用Show显示.当显示模式窗体的时候你是不能操作本程序的其他窗体的,你不能把焦 ...

  4. 封装 INI 文件读写函数

    delphi读写ini文件实例 //--两个过程,主要实现:窗体关闭的时候,文件保存界面信息:窗体创建的时候,程序读取文件文件保存的信息. //--首先要uses IniFiles(单元) //--窗 ...

  5. 创建第一个Android应用程序 HelloWorld

    按照博客的进程,今天应该进行程序编写啦,下面让我们开写一个简单的HelloWorld程序. 提示:这里对于如何使用Eclipse创建一个Android程序就不多讲啦,不会的同学可以去查阅相关文档. 程 ...

  6. 深入理解HTTP协议(转)

    http协议学习系列 1. 基础概念篇 1.1 介绍 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web C ...

  7. jQuery事件触发和参数传递

    jQuery事件触发和参数传递: 参考:http://www.jb51.net/article/36249.htm <%@ page language="java" impo ...

  8. easyui message show中msg嵌入一个按钮如何绑定事件

    http://www.oschina.net/question/945028_171927

  9. Bagging决策树:Random Forests

    1. 前言 Random Forests (RF) 是由Breiman [1]提出的一类基于决策树CART的Bagging算法.论文 [5] 在121数据集上比较了179个分类器,效果最好的是RF,准 ...

  10. HTML5 & CSS3初学者指南(3) – HTML5新特性

    介绍 本文介绍了 HTML5 的一些新特性.主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件 Web存储 HTML5 Web 存储的设计与构想是一个更好的机制来存储客户端的网络数据 ...