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

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

![FAB Sample](/content/images/2015/08/fab_sample.jpg)
Floating Action Button (image from Material Design Pattern)

加入 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();
    }
});

這樣便完成。

![](/content/images/2015/08/fab1.jpg)
搞掂

就是這麼簡單。

外觀選項

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

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

不過 colorAccentcolorControlHighlight 都會影響整個 app ,若只想改變 FAB 的顏色的話可以加上 backgroundTintrippleColor

<android.support.design.widget.FloatingActionButton
    ....
    app:backgroundTint="@color/myColorAccent"
    app:rippleColor="@color/myColorHighlight"
/>
![](/content/images/2015/08/fab2.jpg)
用其他顏色也沒問題

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

![Normal and mini](/content/images/2015/08/fab_normal_mini.jpg)
大與小

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

其他 library

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

https://github.com/Clans/FloatinActionButton

有什麼特別?看圖便知道了:

![](/content/images/2015/08/image_2015_08_26_11_01_38.jpg)
有 expandable FAB 和更細緻的設定(Source from github page)
安裝:
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

相關連結