Material Design Patterns 教學 (2) - Floating Action Buttons

Floating Action Button (FAB)，直譯為「浮動動作按鈕」，為 Material Design 的其一大標誌。它是一個「浮」在畫面上的一個按鈕，按下去則執行該畫面常用的功能。

加入 FAB

FAB 的使用非常簡單，我們繼續使用 Part 1 的 project ，將 activity_main.xml 中的 LinearLayout 轉為 FrameLayout ，然後加上以下 code:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:src="@drawable/ic_add_circle_outline_white"
    android:elevation="6dp"
    app:pressedTranslationZ="12dp" />

當然用其他 Layout 也可，不過記得更新對應的 positioning 資料。另外，Material Design Guideline 建議 margin 為 16dp 。

加 click 則是在 onCreate() 加上

FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "Fab clicked", Toast.LENGTH_LONG).show();
    }
});

這樣便完成。

就是這麼簡單。

外觀選項

預設下，FAB 的顏色是用 theme 的 accentColor ，按下去漣綺的效果顏色是 colorControlHighlight，要改的話可以在 style.xml 的 AppTheme 中加入：

<item name="colorAccent">@color/myColorAccent</item>
<item name="colorControlHighlight">@color/myColorHighlight</item>

不過 colorAccent 和 colorControlHighlight 都會影響整個 app ，若只想改變 FAB 的顏色的話可以加上 backgroundTint 和 rippleColor：

<android.support.design.widget.FloatingActionButton
    ....
    app:backgroundTint="@color/myColorAccent"
    app:rippleColor="@color/myColorHighlight"
/>

另外它提供兩款大小，加上 app:fabSize="mini" 則為 mini 版。

不過 Guideline 建議如非必要，大部份情況下應用 normal 大小。

其他 library

Android Design Library 旳用法很簡單，但效果也是，就只是一個圓形的按鈕而已。若需要更多效果則要用其他 library，在此推薦一個：

https://github.com/Clans/FloatinActionButton

有什麼特別？看圖便知道了：

dependencies {
    compile 'com.github.clans:fab:1.6.0'
}

使用方法沒什麼分別：

<com.github.clans.fab.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_marginBottom="8dp"
    android:layout_marginRight="8dp"
    android:src="@drawable/ic_add_circle_outline_white"
    fab:fab_colorNormal="@color/app_primary"
    fab:fab_colorPressed="@color/app_primary_pressed"
    fab:fab_colorRipple="@color/app_ripple"/>

用 FloatingActionMenu 包著數個 FAB，便成為一個 expandable FAB 了，可算是一大強項：

<com.github.clans.fab.FloatingActionMenu
    android:id="@+id/menu"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:layout_marginLeft="10dp">

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/menu_item1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_star"
        fab:fab_size="mini"
        fab:fab_label="Menu item 1" />

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/menu_item2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_star"
        fab:fab_size="mini"
        fab:fab_label="Menu item 2" />

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/menu_item3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_star"
        fab:fab_size="mini"
        fab:fab_label="Menu item 3" />

</com.github.clans.fab.FloatingActionMenu>

結語

使用 FAB 真的很簡單，但不要因為簡單便加一個 FAB 到每一個畫面上。雖然 Google 推薦使用這種 UI pattern，但是其實也有很多人反對，最重要是弄清楚你的 UX 需求。

今次的 source code 同樣在 github 可找到：

https://github.com/goofyz/android-material-design-tutorial/tree/part2_floating_action_button

相關連結

• Buttons: Floating Action Button - Google's Material Design Guideline
• FloatingActionButton - 更強大的 Open Source Floating Action Button
• Material Design: Why the Floating Action Button is bad UX design - 為可 FAB 是很差的 UX ?
• Material Design Patterns 教學