Material Design之FloatingActionButton的使用

FloatingActionButton是繼承至ImageView，所以FloatingActionButton擁有ImageView的全部屬性。

CoordinatorLayout能夠用來配合FloatingActionButton浮動button。設置app：layout_anchor和app:layout_anchorGravity構建出特定的位置與效果的FloatingActionButton。

我們來看看怎么使用FloatingActionButton吧：

<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="@mipmap/icon"
        app:backgroundTint="#30469b"
        app:borderWidth="0dp"
        app:elevation="6dp"
        app:fabSize="normal"
        app:layout_anchor="@id/coordinator_layout"
        app:layout_anchorGravity="bottom|right"
        app:pressedTranslationZ="12dp"
        app:rippleColor="#a6a6a6" />

各個屬性的意思：

• app:backgroundTint - 設置FAB的背景顏色。

• app:rippleColor - 設置FAB點擊時的背景顏色。
• app:borderWidth - 該屬性尤為重要。假設不設置0dp。那么在4.1的sdk上FAB會顯示為正方形。並且在5.0以后的sdk沒有陰影效果。所以設置為borderWidth="0dp"。
• app:elevation - 默認狀態下FAB的陰影大小。
• app:pressedTranslationZ - 點擊時候FAB的陰影大小。

• app:fabSize - 設置FAB的大小，該屬性有兩個值，分別為normal和mini，相應的FAB大小分別為56dp和40dp。
• src - 設置FAB的圖標，Google建議符合Design設計的該圖標大小為24dp。

• app:layout_anchor - 設置FAB的錨點，即以哪個控件為參照點設置位置。

• app:layout_anchorGravity - 設置FAB相對錨點的位置，值有 bottom、center、right、left、top等。

這樣設置后，就能夠在屏幕右下角創建出一個FloatingActionButton了。

如：

普通情況下。FAB與Snackbar配合使用時候會出現Snackbar遮住FAB：如：

為了解決問題，我們把Snackbar.make(View view,,).show();的第一個參數View設置為CoordinatorLayout，即：

//把mCoordinatorLayout傳給Snackbar
Snackbar.make(mCoordinatorLayout, "Snackbar", Snackbar.LENGTH_SHORT).show();

這樣CoordinatorLayout就能夠協調各個View之間的動畫效果。效果就變為了：

即Snackbar不會遮擋FAB的顯示了，當Snackbar出現時FAB會自己主動上移。

當然FAB的點擊事件也是通過setOnClickListener()設置就可以。

我們再看一個效果：

這個效果事實上就是通過改變FAB的Layout_anchor和layout_anchorGravity來實現的，看看布局就明確了：

<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:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="#30469b"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/bg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/icon"
        app:backgroundTint="#30469b"
        app:borderWidth="0dp"
        app:elevation="6dp"
        app:fabSize="normal"
        app:layout_anchor="@id/collapsingToolbarLayout"
        app:layout_anchorGravity="bottom|center"
        app:pressedTranslationZ="12dp"
        app:rippleColor="#a6a6a6" />
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

源代碼地址：http://download.csdn.net/detail/u010687392/8913513