@author ASCE1885的 Github 简书 微博 CSDN
原文链接
如果你已经读过本系列第一篇文章：导航视图，你可能在想这个新的Android材料设计兼容函数库还为我们提供了哪些新特性呢？本文将介绍浮动操作按钮。
简介
浮动操作按钮（FAB）是在材料设计准则中引入的新组件，用于强调当前屏幕最重要的一些操作，它以大胆时尚的方式吸引用户的注意。
虽然有很多人鼓吹这个组件的有多好，但我们必须头脑清醒，只有在必要时才使用它，而且它提供的应该是高频操作（最好在activity中需要一直显示）。或许你可以听听那些宣称FAB是个糟糕的设计的声音。
使用浮动操作按钮
FAB的使用真的很简单，但在材料设计兼容函数库推出来的这些天，关于这个组件有些争论，因为有些事情并不像预期那样工作。
我会向你介绍FAB正常的工作原理，以及一些使其正确工作的关注点。
首先，你需要做的唯一的事情就是使用FloatingActionButton，它继承自ImageView，你之前所掌握的关于ImageView的知识点有助于你理解FAB。你可以如下所示在XML文件中添加FAB。
<android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_add_black" android:layout_gravity="bottom|end" app:elevation="6dp" app:pressedTranslationZ="12dp"/>如你所见，我只添加了一个图标，一个FAB未按压状态（elevation）的阴影(默认是 6dp)，以及一个FAB按压状态（pressedTranslationZ）的阴影(默认是 12dp)。同时我也设置了FAB按钮位于屏幕右下角，当然这是假设FAB处于一个FrameLayout容器中，当它处于其他容器中你，位置你可以自己再进行适配。
额外的选项
上一节说到的是FAB自定义属性中最简单的几种，默认情况下，FAB会采用主题中定义的accent color作为背景颜色，同时采用colorControlHighlight作为波纹颜色（ripple color），而这两个属性都是可以自定义的。
自定义背景颜色如下所示：
app:backgroundTint="@color/mycolor"自定义波纹颜色如下所示：
app:rippleColor="@android:color/white"你也可以在代码中进行设置，不过设置backgroundTint稍微困难一点，因为它使用了颜色状态列表（state list），需要如下所示进行设置（这一点归功于Carlos Morera）：
fab.setBackgroundTintList(ColorStateList.valueOf("Your color"));FAB有两个可选的尺寸，通过添加如下属性可以将FAB设置为迷你版本的：
app:fabSize="mini"注意事项
虽然下面这个问题在未来会被修复，但这里还是给出一些技巧来使得FAB可以正确的工作。首先，如果你运行前面的代码，你会发现在不同的Android系统版本上会出现很多非预期的行为。所有这些问题似乎都是由borderWidth属性引起的，因此你需要显式的将其设置为0：
app:borderWidth="0dp"此外，你会发现在lollipop之前的版本FAB周边会存在空白，而API版本21之上不存在该问题，CardView也存在相同的问题，原因是一样的：lollipop之前的版本使用drawable进行渲染，它使用自身的空间进行绘制，而lollipop的阴影使用系统进行渲染。CardView有一个属性可以进行兼容填充。
而浮动操作按钮不存在这样一个属性，然而这个很容易进行模拟。只需要添加一个依赖于系统版本的空白就可以了：
android:layout_margin="@dimen/fab_compat_margin"接着你只需要在对应系统版本的dimes.xml文件中定义属性就可以了。
在values文件夹中定义：
app:borderWidth="0dp"在values-v21文件夹中定义：
app:borderWidth="16dp"很简单，不是吗？
点击事件
你也可以给FAB添加一个点击响应事件：
fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Snackbar.make(content, "FAB Clicked", Snackbar.LENGTH_SHORT).show(); }});总结
虽然材料设计兼容函数库给我们的第一印象没有很完美，但使用某些tricks还是可以很好的工作，而且节省很多时间。在后续的文章我会继续研究其他新组建。你可以在MaterializeYourApp这个Github工程中看到所有的源代码。
多谢阅读！
文末摄影鉴赏
