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. SqlParameter 使用

                SqlParameter[] param = new SqlParameter[]             {                 new SqlParameter ...

  2. C#代码生成工具:文本模板初体验 使用T4批量修改实体框架(Entity Framework)的类名

    转自:http://www.cnblogs.com/huangcong/archive/2011/07/20/1931107.html 在之前的文本模板(T4)初体验中我们已经知道了T4的用处,下面就 ...

  3. inheritprototype原型继承封装及综合继承最简实例

    1.inheritprototype.js ;(function(){    var s = {        inheritObject:function(o){//对象继承封装           ...

  4. 基于jquery 封装的 select 小控件,解决 IE6 7 8里 select 边框 高度 无法遮挡等问题

    一.基本原理 select控件在浏览器中是个永远的痛,不同的版本解析出来的可谓五花八门.主要有以下问题: 1,IE6中无法设置高度,Z INDEX永远在最上,无法被其它层遮挡 2,IE7中可以设置高度 ...

  5. zepto.js swipe实现触屏tab菜单

    今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功 ...

  6. Android中的AutoCompleteTextView的使用

    最终的效果如下: main.xml代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLa ...

  7. JSP获取绝对物理地址

    session.getServletContext().getRealPath(""); 但是 getRealPath("a"+File.separator); ...

  8. [源代码] SailingEase .NET Resources Tool (.NET 多语言资源编辑器)

    我在2016年10月发过一篇博客,介绍了我写过的一个多语言资源文件编辑器,并且做为免费软件发布给了出来. 陆续收到了一些朋友的反馈,有朋友很热心提了很多建议和关心的话,还有朋友发红包过来,让我很感动. ...

  9. CodeForces 451B

    Sort the Array Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Sub ...

  10. java gc的调用机制 和编程规则

    转载:http://sunzhyng.iteye.com/blog/480148 一个优秀的Java程序员必须了解GC的工作原理.如何优化GC的性能.如何与GC进行有限的交互,有一些应用程序对性能要求 ...