zoukankan      html  css  js  c++  java
  • Material Design学习-----FloatingActionButton

      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等。

      实现的代码如下:

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

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

      5.x存在的一些问题

    • 木有阴影

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

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

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

    so,良好的实践是:

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

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

  • 相关阅读:
    html添加遮罩层
    html绝对定位如何居中
    springboot上传文件到本地服务器
    遍历一个文件目录,把所有的子目录都列出来
    Java判断cookie中是否有某个具体的cookie
    Redis 如何打开rdb 文件
    crontab -e 如何保存退出
    linux服务器设备上没有空间
    IDEA的SonarLint插件报错Unable to create symbol table for
    使用Rome读取RSS报错,org.xml.sax.SAXParseException: 前言中不允许有内容。
  • 原文地址:https://www.cnblogs.com/YaoJianXun/p/5438918.html
Copyright © 2011-2022 走看看