Material Design 元件之FloatingActionBu

Material Design 設計規範在 Google I/O 2014 推出，這種設計理念一經推出就受到廣大開發者的喜愛，主要側重於紙墨化創作和突出設計的實體感，使得設計更接近於真實世界，力求平滑、連續的互動方式與使用者體驗，這種設計規範更能促進 Android 生態系統的發展，為此，Google 提供了一系列的符合 Material Design 風格的控制元件，如 FloatingActionButton、Snackbar、TabLayout 等。雖然經常在開發中用到，但是沒有做記錄，打算從頭開始記錄一下這些元件的使用，今天說一下 CoordinatorLayout 和 FloatingActionButton 相關的知識。

CoordinatorLayout

CoordinatorLayout 是一個加強版的 FramLayout，意味著如果不加任何限制，在 CoordinatorLayout 裡面的子 View 都會預設出現在左上角，CoordinatorLayout 有兩個主要的使用方式：

1. 作為應用的頂層佈局
2. 作為與一個或多個子 View 互動的容器

可為 CoordinatorLayout 裡面的子 View 指定 Behavior，就在單個父佈局中提供許多不同的互動效果，子 View 之間也可以相互互動，CoordinatorLayout 可以使用 CoordinatorLayout.DefaultBehavior 註解來指定子 View 的預設行為，總之，可以藉助 CoordinatorLayout 實現不同的滾動效果。

FloatingActionButton

FloatingActionButton 是 Material Design 型別的按鈕控制元件，一般表現是浮動在 UI 上層的圓形圖示，有自己的 behavior 並可以設定錨點。

FloatingActionButton 有兩種大小，分別是 normal(56dp) 和 mini(40dp) ，預設是 mini(40dp)，其大小可以透過屬性 fabSize 來指定需要的大小，當然也可以設定 fabSize 為 auto，系統會根據不同的螢幕選擇合適的大小。

FloatingActionButton 間接繼承 ImageView，可以使用如下方式在程式碼中設定圖示：

//設定圖示
fab.setImageDrawable(getResources().getDrawable(R.drawable.fab));
fab.setImageResource(R.drawable.fab);

FloatingActionButton 的背景顏色預設是主題的 colorAccent 表示的值，在程式碼中可以透過如下方式修改 FloatingActionButton 的背景顏色，具體如下：

//設定背景顏色
fab.setBackgroundTintList(ColorStateList.valueOf(Color.parseColor("#000000")));
       

可以透過如下方式設定 FloatingActionButton 的大小，具體如下：

//設定大小
fab.setSize(FloatingActionButton.SIZE_MINI);

那麼，如何自定義 FloatingActionButton 的大小呢，可以從 FloatingActionButton 部分原始碼中看到決定其大小的尺寸是定義到 dimens 檔案中的，具體由 design_fab_size_mini 和 design_fab_size_normal 來決定，部分程式碼如下：

//原始碼
private int getSizeDimension(@Size final int size) {
    final Resources res = getResources();
    switch (size) {
        case SIZE_AUTO:
            // If we're set to auto, grab the size from resources and refresh
            final int width = res.getConfiguration().screenWidthDp;
            final int height = res.getConfiguration().screenHeightDp;
            return Math.max(width, height) < AUTO_MINI_LARGEST_SCREEN_WIDTH
                    ? getSizeDimension(SIZE_MINI)
                    : getSizeDimension(SIZE_NORMAL);
        case SIZE_MINI:
            return res.getDimensionPixelSize(R.dimen.design_fab_size_mini);
        case SIZE_NORMAL:
        default:
            return res.getDimensionPixelSize(R.dimen.design_fab_size_normal);
    }
}

所以只需要建立 dimens 資料夾，在裡面重新設定 design_fab_size_mini 和 design_fab_size_normal 的值即可自定義 FloatingActionButton 的大小了，具體如下：

/**dimens.xml**/
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="">
    <dimen name="design_fab_size_mini" tools:override="true">20dp</dimen>
    <dimen name="design_fab_size_normal" tools:override="true">100dp</dimen>
</resources>

當然 FloatingActionButton 間接繼承 ImageView，ImageView 的一些屬性肯定可以使用，這裡就不在說了。

FloatingActionButton 的屬性

下面是一些常用的屬性，具體如下：

android:src             //設定圖示(24dp)
app:backgroundTint      //設定圖示背景顏色。  
app:rippleColor         //設定點選時水波紋顏色  
app:elevation           //設定陰影大小
app:fabSize             //設定大小 
app:pressedTranslationZ //按下時距離Z軸的距離  
app:layout_anchor       //設定錨點  
app:layout_anchorGravity//設定相對錨點的位置

關於屬性，瞭解一下，具體使用時設定後觀察效果不失為一種直觀的學習方式。

簡單使用

總覺得做筆記還是有效果圖比較好，那就簡單使用 CoordinatorLayout 和 FloatingActionButton 看一下具體效果，佈局如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android=""
    xmlns:tools=""
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app=""
    tools:context="com.manu.materialdesignsamples.samples.SampleActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvData"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:layout_marginEnd="12dp"
        android:visibility="visible"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="12dp"
        android:layout_gravity="bottom|end"
        android:src="@drawable/fab"
        android:scaleType="center"
        app:backgroundTint="@color/colorAccent"
        app:backgroundTintMode="src_in"
        app:elevation="5dp"
        app:rippleColor="#000000"
        app:fabSize="auto"
        app:pressedTranslationZ="10dp"/>

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

然後在設定 FloatingActionButton 的點選事件，具體如下：

findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Snackbar.make(v,"我是Snackbar...",Snackbar.LENGTH_SHORT)
                .setAction("取消", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(SampleActivity.this, "取消", Toast.LENGTH_SHORT).show();
                    }
                }).show();
    }
});

先來一張效果圖，具體如下：

可知 FloatingActionButton 會自動給 Snackbar 留出位置，避免 Snackbar 彈出時遮擋 FloatingActionButton，因為在 FloatingActionButton 內部已經實現了使用 Snackbar 對應的 Behavior，CoordinatorLayout 會根據對應的 Behavior 的具體表現自動調整子 View 的位置，這裡當然是 FloatingActionButton 的位置，可以試一試將根佈局設定為 RelativeLayout 等，當然，此時 Snackbar 彈出時會遮擋 FloatingActionButton，顧名思義 CoordinatorLayout 就是協調佈局，關於 Behavior 這部分留到後面整理。