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等。
实现的代码如下:
<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的更多相关文章
- Android Material Design的FloatingActionButton,Snackbar和CoordinatorLayout
如果是为了兼容低版本的Android系统,则需要引用Android Material Design的扩展支持库,我在之前的一篇文章张,较为详细的说明了如何导入Android Material Desi ...
- Material Design学习之 Button(具体分析,传说中的水滴动画)
转载请注明出处:王亟亟的大牛之路 上一篇大致介绍了Material Design的一些基本概念传送门:http://blog.csdn.net/ddwhan0123/article/details/5 ...
- Material Design学习笔记
Wiki->移动开发->Android->Material Design-原质化设计 (友情链接:http://wiki.jikexueyuan.com/project/materi ...
- Material Design学习
前言: 最为一个用习惯了bootstrap的前端小菜,今天偶然听闻material design 这个从未听闻的前端框架,带着好奇开始了新的尝试,并将bootstrap跟material design ...
- Android Material Design 学习笔记 - Matrial Theme
google在2014年 I/O大会上推出了一种新的设计设计语言—Material design,这种设计语言语言旨在为手机.平板电脑.台式机和“其他平台”提供更一致.更广泛的“外观和感觉”(附上官方 ...
- Material Design之FloatingActionButton的使用
FloatingActionButton是继承至ImageView,所以FloatingActionButton拥有ImageView的全部属性. CoordinatorLayout能够用来配合Flo ...
- Material Design学习之 ProgreesBar
转载奇怪注明出处:王亟亟的大牛之路 继续我们Material Design的内容,这一篇讲的是进度条,上一篇是Switch地址例如以下:http://blog.csdn.net/ddwhan0123/ ...
- Material Design学习之 Camera
转载请注明出处:王亟亟的大牛之路 年后第一篇,自从来了某司产量骤减,这里批评下自己,这一篇的素材来源于老牌Material Design控件写手afollestad的 https://github.c ...
- Material Design学习之 Bottom navigation
转载请注明出处:王亟亟的大牛之路 礼拜4一天由于事假没有去单位然后礼拜3由于生日也没写文章,今天一早上班就补一篇MD的内容.这一篇是关于颇有争议的Bottom navigation相关内容(主要是翻译 ...
随机推荐
- 【蓝牙数据采集模块】-01-Sensor Controller 功能介绍
一. CC2650芯片内部的结构框图如图,内部包含: 一个Cortex-M3主控制器,用来做整个芯片的功能与任务实现 一个Cortex-M0射频控制器,用来驱动RF相关电路 一个Sensor Cont ...
- scale等比缩放才能做到看上去能让线条以中心点展开
.nav-menu>ul>li>a::before { background: #333 none repeat scroll 0 0; bottom: -2px; conte ...
- centos6 安装mysql
如果要在Linux上做j2ee开发,首先得搭建好j2ee的开发环境,包括了jdk.tomcat.eclipse的安装(这个在之前的一篇随笔中已经有详细讲解了Linux学习之CentOS(七)--Cen ...
- osgEarth学习笔记(转载)
osgEarth学习笔记1. 通过earth文件创建图层时,可以指定多个影像数据源和多个高程数据源,数据源的顺序决定渲染顺序,在earth文件中处于最前的在渲染时处于最底层渲染:所以如果 ...
- html 5 本地数据库(Web Sql Database)核心方法openDatabase、transaction、executeSql 详解
Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范.它通过一套API来操纵客户端的数据库.Safari.Chrome. Firefox.Opera等主流浏览器都已经支持Web ...
- Android Studio快捷键汇总
- file_get_contents无法请求https连接的解决方法
PHP.ini默认配置下,用file_get_contents读取https的链接,就会如下错误: Warning: fopen() [function.fopen]: Unable to find ...
- QT第六天学习
基本事件: 鼠标事件 键盘事件 绘制事件 1.QT中的事件: 事件是对各应用程序需要知道的由应用程序内部或外部产生的事情或动作的通称. QT中事件的处理: 在QT中使用一个对象来表示一个事件,继承自Q ...
- HDU-1233-还是畅通工程(并查集)
题目链接http://acm.hdu.edu.cn/showproblem.php?pid=1233题目很简单(最小生成树) #include<cstdio> #include<io ...
- 《Linux多线程服务端编程》笔记——多线程服务器的适用场合
如果要在一台多核机器上提供一种服务或执行一个任务,可用的模式有 运行一个单线程的进程 运行一个多线程的进程 运行多个单线程的进程 运行多个多线程的进程 这些模式之间的比较已经是老生常谈,简单地总结 模 ...