MaterialDesign系列文章（四）FloatingActionButton的使用

Hi，你們好，我是筆墨Android！相信不少小夥伴在實際開發中都有這樣的需求，一個列表滾動到某一位置，而後有一個按鈕，回到頂部？很常見的一個效果，在之前咱們通常都使用一個圖片，放到那裏。可是在5.0的時候google推出了FloatingActionButton，並作了相應的兼容，能很好的解決以上問題，而且經過CoordinatorLayout能夠很好的聯動！

本文知識點：

• FloatingActionButton是什麼，使用的時候須要注意什麼？
• FloatingActionButton的簡單應用及屬性說明，
• FloatingActionButton實現一些相應的效果。

1. FloatingActionButton是什麼，使用的時候須要注意什麼？

FloatingActionButton是一個繼承ImageView懸浮的動做按鈕，常常用在一些比較經常使用的操做中，一個頁面儘可能只有一個FloatingActionButton，不然會給用戶一種錯亂的感受！FloatingActionButton的大小分爲標準型(56dp)和迷你型(40dp)，google是這麼要求的，若是你不喜歡能夠本身設置其餘大小。而且對於圖標進行使用materialDesign的圖標，大小在24dp爲最佳！

2. FloatingActionButton的屬性說明及簡單應用

先來一張效果圖

其實FloatingActionButton的用法很簡單，主要是在佈局文件中定義就能夠了，這裏先將一下各個屬性的含義: 你們能夠試一下，能更好的理解相應的內容的！

• android:src 設置相應圖片
• app:backgroundTint 設置背景顏色
• app:borderWidth 設置邊界的寬度。若是不設置0dp，那麼在4.1的sdk上FAB會顯示爲正方形，並且在5.0之後的sdk沒有陰影效果。
• app:elevation 設置陰影效果
• app:pressedTranslationZ 按下時的陰影效果
• app:fabSize 設置尺寸normal對應56dp，mini對應40dp
• app:layout_anchor 設置錨點，相對於那個控件做爲參考
• app:layout_anchorGravity 設置相對錨點的位置 top/bottom之類的參數
• app:rippleColor 設置點擊以後的漣漪顏色

整理的佈局是這樣的：

<?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">

    <LinearLayout
        android:id="@+id/ll_top"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#438b8b"
        android:orientation="horizontal">

        <TextView
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="僞裝這有內容內容" />
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:src="@mipmap/ic_call_white_24dp"
        app:backgroundTint="#FF3030"
        app:borderWidth="0dp"
        app:elevation="6dp"
        app:fabSize="normal"
        app:layout_anchor="@id/ll_top"
        app:layout_anchorGravity="bottom|right"
        app:pressedTranslationZ="120dp"
        app:rippleColor="#00ff00" />
</android.support.design.widget.CoordinatorLayout>
複製代碼

就是上面這樣了，忘說了一件很重要的事情......FloatingActionButton的監聽就是最原始的監聽！！！接下來到了重頭戲了

3. FloatingActionButton實現一些相應的效果。

關於FloatingActionButton在項目中的使用，基本上就有如下這麼多東西，這些都是我能想到的。若是你有什麼好的應用效果能夠和我分享一下：

3.1 FloatingActionButton和RecyclerView的聯動

簡單的說一下實現方案：

• 自定義Behavior的方式實現(可是這裏面有一個缺點，就是隻能在implementation 'com.android.support:design:26.1.0'25.1.0以前的版本中使用，若是在以後的版本中使用的話，通常隱藏了以後就不會出現了！！！)這裏存在一個Behavior和CoordinatorLayout的概念，會在後期講解，這裏直接貼出相應的代碼了！

若是你想實現效果切記把com.android.support:design:XXX設置成25.1.0之下的版本

public class ScrollAwareFABBehaviorDefault extends FloatingActionButton.Behavior {

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

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

    }

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

以後在佈局中設置一些behavior就能夠了

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.jinlong.newmaterialdesign.fab.FABAndRecyclerViewActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimaryDark"
            app:layout_scrollFlags="scroll" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="30dp"
        android:src="@mipmap/ic_call_missed_outgoing_white_24dp"
        app:layout_behavior="com.jinlong.newmaterialdesign.fab.ScrollAwareFABBehaviorDefault" />
    <!--layout_behavior設置的是控件的全路徑-->
</android.support.design.widget.CoordinatorLayout>
複製代碼

基本上就是上面這麼多，我在網上找了很久，在25.1.0以後的版本，都是能夠隱藏，可是怎麼也顯示不出來了。也沒有找到很好的解決辦法，因此這裏我就換了一種解決方案，因此就有了下面這種解決方案。

• 監聽滑動控件的滾動事件(我就是這麼實現的，由於當你把design設置成25.1.0的時候，相應的過渡動畫會出現不少的問題，因此這裏建議這麼去弄)這裏的代碼很簡單，就是監聽了一個滾動的方向和控件的顯示狀態，具體內容看代碼就明白了！

mRvContent.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                Log.e(TAG, "onScrolled: " + dy);
                if (dy > 0 && mFab.getVisibility() == View.VISIBLE) {
                    //向下滑動，而且控件顯示
                    mFab.hide();
                } else if (dy < 0 && mFab.getVisibility() != View.VISIBLE) {
                    //向上滑動，而且控件爲飛顯示
                    mFab.show();
                }
            }
        });
複製代碼

上面的gif是用第二種方案實現的，因此關於上面選擇那種方案，你們自行斟酌。。。

3.2 推薦一些開源比較好的FloatingActionButton

其實在Google推出FloatingActionButton以前，網上有不少大神都已經創造出來相應的組件了，這裏介紹幾個比較好的

• android-floating-action-button 這個是經過點擊FloatingActionButton彈出一組列表的開源庫
• FloatingActionButton 我以爲這個就是GoogleFloatingActionButton的前身。。。

---

其實關於FloatingActionButton的內容我總結的就這麼多，但願你們不要介意，還有一些內容是關係到CoordinatorLayout和Behavior的，由於內容比較多，我會在以後的文章單獨講解的，還但願獲得您的關注。。。。最後隨口嘮叨幾句，程序員的成長在於不斷的積累。天天進步一點點，總有一天咱們會成爲碼農的！！！！！！哈哈。。。

但願本身能夠變得更優秀，也但願你也能變得更優秀！！！拜，今天就到這裏吧！拜拜。。。