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,在此推薦一個:
有什麼特別?看圖便知道了:
安裝: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 教學