FAB 听说你还没用过？-你没听说过吗英语

一、前言

Design Support Library 是 Google 发布的一个全新的兼容函数库，它可以在 Android 2.1 (Api level 7)及以上的设备中，实现 Material Design 的效果，这个函数库同时也提供了一系列控件。今天介绍的 Floating Action Button 就是其中之一。

在使用 Design Support Library 之前，需要在 build.gradle 文件中，添加依赖。

compile 'com.android.support:design:25.3.0'

浮动操作按钮(下文简称 FAB )是 Material Design 新引入的组件，主要用于强调当前页面的一些重要操作。虽然在 Material Design 的风格里，大家都很推崇使用 FAB ，但是因为它在页面中特别的引人注目，所以在使用的时候最好慎重，只在必要的时候才去使用它，它应该使用在一些高频的操作上。

二、FAB的基本使用

FAB 使用起来非常的简单，它本身也是继承自 ImageView 的，所以之前 ImageView 的使用方法，在 FAB 上也有一些可以借鉴。

1、在布局中加载 FAB

既然 FAB 是继承自 ImageView ，所以它可以和 ImageVIew 一样被加在 xml 布局中。

加上之后，就可以发现在右下角出现一个 FAB 按钮。

FAB 有自己的属性可以被设置，这些可以从源码中了解到。

下面分别介绍 FAB 支持的几个属性和含义：

app:backgroundTint : 设定 FAB 的背景色。
app:rippleColor : 设定点击的 Ripple 效果的波纹颜色。
app:fabSize : 设定 FAB 的尺寸，它支持三种设定：auto、normal、mini。
app:borderWidth : 设定 FAB 边框宽度，不明显，需要仔细看。
app:elevation：设定 FAB 未按下状态时的阴影，默认是 6dp。
app:pressedTranslationZ：设定 FAB 按下状态时候的阴影，默认是 12dp。

在 FAB 中，虽然可以根据 xml 属性来设定 FAB 的样式，还可以通过 Java 代码的形式修改它， FAB 也对这些属性提供了对应的方法，就不对这些设定样式的方法一一介绍了。

2、FAB的一些操作

除了修改样式的方法，FAB 还提供了一些 API 供我们操作它。

setOnClickListener : 为 FAB 设定点击事件。
show()：显示一个 FAB，通过参数可以设定是否需要动画。
hide()：隐藏一个 FAB，通过参数可以设定是否需要动画。
isShow()：判断当前 FAB 是否在显示状态。

3、基本使用的 Demo

下面我们定义个 FAB ，并设定一个点击点击的时候，出现一个 SnackBar。然后使用一个按钮，控制 FAB 的显示和隐藏。

运行效果如下：

三、FAB 一些需要知道的点

虽然 FAB 使用起来非常的简单，只要了解一些属性和方法，基本上就可以直接使用了。但是 FAB 也是有一些需要特殊的特性需要知道的，有些就需要从文档中找答案了。

1、配合 SnackBar使用

Material Design 中包含的很多控件，其实是可以配合使用的。Google 推荐 FAB 方在右下角，而 SnackBar 同时也在下方，如果两个控件同时存在的时候，必然有一个会遮挡住另一个。而这个问题 Google 其实已经帮我们考虑好了。

使用 CoordinatorLayout 这个View 作为 FAB 和 SnackBar 的父布局，就可以避免出现这样的问题。CoordinatorLayout 在 Material Design 的作用非常大，有时间再详细介绍，这里只需要知道，为了避免 FAB 和 SnackBar 在布局上冲突，可以使用它。它会在 SnackBar 弹出的时候，将 FAB 上移到一个合适的位置，避免 SnackBar 遮挡它。

有关 SnackBar 的内容，可以参见另外一篇文章：用SnackBar替换掉Toast?看完再决定

2、FAB 可以不可以自定义动画

最上面的效果可以看到，FAB 的 show() 的时候的动画，是一个从小到大放大的效果，hide() 则是相反的，那么我们能不能给它指定一个动画效果呢?

这个就需要我们来查看源码了，就从 show() 方法入手。

可以看到 show() 方法最终会调用 getImpl().show() 去执行具体的显示动作，再继续看 getImpl() 的方法获取的是什么。

FloationgActionButtonImpl 是一个接口，并且为了兼容不同的Android 版本，这里做了一个兼容，对于不同的版本，使用不同的实例来做具体操作，内部源码就不一一看了，有兴趣的可以看看他们的区别，肯定就是一个处理 API 限制的方法。

FAB 的显示和隐藏动画，都是根据不同的 Android 版本各自实现的，它内部已经处理好不同版本的兼容性问题，所以是不是说明没法统一设定动画呢?其实并不是，从源码可以注意到 show() 方法是共有的，所以如果需要设定不同的动画，我们重写 show() 和 hide() 方法即可，再不济我们直接对 FAB 这个 View 进行动画操作，不去调用 FAB 原本提供的方法。

3、FAB 的图标尺寸应该是多少?

既然 FAB 中央可以指定一个图标去显示，那么这个图标的尺寸应该怎么设定。这个问题其实官方已经给了设计文档了。