FloatingActionButton（簡稱FAB）的使用方法非常的簡單

和一個普通控制元件一樣，在xml佈局檔案中定義（記得匯入Design包）

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        android:layout_margin="20dp"
 

        android:src="@android:drawable/ic_dialog_email"
        app:backgroundTint="#00ff00"
        app:borderWidth="0dp"
        app:elevation="6dp"
        app:fabSize="normal"
        app:pressedTranslationZ="10dp"
        app:rippleColor="#ff87ffeb"/>

• src：設定FAB的圖示，google建議圖示的大小為24dp
• backgroundTint：按鈕的預設顏色
• borderWidth：設定為0dp，不然在4.1的SDK上會顯示方塊形，在5.x的系統上執行會沒有陰影
• pressedTranslationZ：設定立體感，點選時的陰影大小，預設是12dp
• fabSize：設定FloatingActionButton的大小樣式，normal為正常大小（56dp），mini為小號的（40dp）
• elevation：設定立體感，正常情況下陰影的大小，預設為6dp
• rippleColor：點選時的顏色，預設取theme中colorControlHighlight的顏色

FAB的點選事件和普通View的點選事件一樣，使用OnClickListener設定監聽

原生的FAB在體驗上並不友好，因為它遮擋住了要顯示的內容，尤其是在和ListView等控制元件搭配時，如果頁面滾動到了最後，那麼遮住的部位就顯示不出來了。
解決方法：在頁面向下滑動的時候隱藏FAB，向上滑動時再顯示出來

檢視原始碼可以發現，FAB為我們提供了顯示和隱藏的方法

    /**
     * Hides the button.
     * <p>This method will animate the button hide if the view has already been laid out.</p>
     */
    public void hide() {
        hide(null);
    }

    /**
     * Shows the button.
     * <p>This method will animate the button show if the view has already been laid out.</p>
     */
    public void show() {
        show(null);
    }

想實現這樣的效果，需要使用到CoordinatorLayout佈局，它幫我們協調好了這一系列互動
CoordinatorLayout中通過Behavior間接的來控制其子View的各種行為，在FAB內部已經實現了Behavior介面

    /**
     * Behavior designed for use with {@link FloatingActionButton} instances. It's main function
     * is to move {@link FloatingActionButton} views so that any displayed {@link Snackbar}s do
     * not cover them.
     */
    public static class Behavior extends CoordinatorLayout.Behavior<FloatingActionButton> {
        // We only support the FAB <> Snackbar shift movement on Honeycomb and above. This is
        // because we can use view translation properties which greatly simplifies the code.
        private static final boolean SNACKBAR_BEHAVIOR_ENABLED = Build.VERSION.SDK_INT >= 11;

        private ValueAnimatorCompat mFabTranslationYAnimator;
        private float mFabTranslationY;
        private Rect mTmpRect;

        ......

實現Behavior能讓FAB監聽CoordinatorLayout裡其它子View控制元件的狀態，如FAB和Snackbar的配合顯示，當Snackbar彈出時，FAB會上移給Snackbar騰出位置

由於目前FAB內部實現的Behavior只對Snackbar進行了處理，所以我們需要自定義Behavior，來達到需要的顯示效果

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior{

    public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
                                       View directTargetChild, View target, int nestedScrollAxes) {
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL ||
                super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target,
                        nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
                               View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
            child.hide();
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            child.show();
        }
    }
}

然後在佈局檔案中通過layout_behavior關聯該類，路徑為包名加類名
app:layout_behavior=”zhuwentao.com.usedesigndemo.ScrollAwareFABBehavior”
注意：需要用RecyclerView替換掉ListView，並使用CoordinatorLayout作為根佈局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_data"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email"
        app:backgroundTint="#00ff00"
        app:elevation="6dp"
        app:fabSize="normal"
        app:layout_anchor="@id/rv_data"
        app:layout_anchorGravity="bottom|right|end"
        app:layout_behavior="zhuwentao.com.usedesigndemo.ScrollAwareFABBehavior"
        app:pressedTranslationZ="8dp"
        app:rippleColor="#ff87ffeb"
        app:useCompatPadding="false"/>

</android.support.design.widget.CoordinatorLayout>

FAB要記得加上layout_anchor關聯RecyclerView

官方自帶的顯示和隱藏效果就是這樣的，縮小隱藏，放大呈現