浮动操作按钮详解

概览

浮动操作按钮 (简称 FAB) 是: “一个特殊的promoted操作案例。因为一个浮动在UI之上的圆形图标而显得格外突出，同时它还具有特殊的手势行为”

比如，如果我们在使用email app，在列出收件箱邮件列表的时候，promoted操作可能就是新建一封邮件。

浮动操作按钮代表一个屏幕之内最基本的额操作。关于FAB按钮的更多信息和使用案例请参考谷歌的官方设计规范。

用法

谷歌在2015年的 I/O大会上公布了可以创建浮动操作按钮的支持库，但是在这之前，则须使用诸如makovkastar/FloatingActionButton 和 futuresimple/android-floating-action-button 这样的第三方库。

Design Support Library

首先确保你按照Design Support Library中的指导来配置。

现在你可以把android.support.design.widget.FloatingActionButton添加到布局中了。其中src属性指的是浮动按钮所要的图标。

<>

android:src='@drawable/ic_done'

app:fabSize='normal'

android:layout_width='wrap_content'

android:layout_height='wrap_content' />

另外，如果在布局的最顶部声明了xmlns:app='http://schemas.android.com/apk/res-auto命名空间，你还可以定义一个fabSize属性，该属性决定按钮是正常大小还是小号。

放置浮动操作按钮需要使用CoordinatorLayout。CoordinatorLayout帮助我们协调它所包含的子view之间的交互，这一点在我们后面讲如何根据滚动的变化让按钮动画隐藏与显示的时候有用。但是目前我们能从CoordinatorLayout得到的好处是它可以让一个元素浮动在另一个元素之上。我们只需让FloatingActionButton和ListView被包含在CoordinatorLayout中，然后使用layout_anchor 与 layout_anchorGravity 属性就可以了。

<>

android:id='@+id/main_content'

android:layout_width='match_parent'

android:layout_height='match_parent'>

<>

android:id='@+id/lvToDoList'

android:layout_width='match_parent'

android:layout_height='match_parent'>

<>

android:layout_width='wrap_content'

android:layout_height='wrap_content'

android:layout_gravity='bottom|right'

android:layout_margin='16dp'

android:src='@drawable/ic_done'

app:layout_anchor='@id/lvToDoList'

app:layout_anchorGravity='bottom|right|end' />

按钮应该处于屏幕的右下角。建议在手机上下方的margin设置为16dp而平板上设置为24dp。上面的例子中，使用的是16dp。

而根据谷歌的设计规范，drawable的尺寸应该是24dp。

浮动操作按钮的动画

当用户往下滚动一个页面，浮动操作按钮应该消失，一旦向上滚动，则重现。

要让这个过程有动画效果，你需要利用好CoordinatorLayout，CoordinatorLayout帮助协调定义在里面的view之间的动画。