浮动操作按钮详解

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

               

http://guides.codepath.com/android/Floating-Action-Buttons

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0718/3197.html

原文：Floating Action Buttons 

概览

浮动操作按钮 (简称 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属性指的是浮动按钮所要的图标。

1 2 3 4 5

<android.support.design.widget.FloatingActionButton          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 属性就可以了。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<android.support.design.widget.CoordinatorLayout      android:id= "@+id/main_content"      xmlns:android= "http://schemas.android.com/apk/res/android"      xmlns:app= "http://schemas.android.com/apk/res-auto"      android:layout_width= "match_parent"      android:layout_height= "match_parent" >              <ListView                android:id= "@+id/lvToDoList"                android:layout_width= "match_parent"                android:layout_height= "match_parent" ></ListView>              <android.support.design.widget.FloatingActionButton                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"  /> </android.support.design.widget.CoordinatorLayout>

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

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

浮动操作按钮的动画

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

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

用RecyclerView替换ListViews

目前，你需要用RecyclerView来替换ListViews。就如这节所描述的，RecyclerView是ListViews的继承者。根据谷歌的这篇文章所讲的，不支持CoordinatorLayout和ListView一起使用。你可以查看这篇指南，它帮助你过渡到RecyclerView。