【APP/Android】如何製作浮動按鈕 FloatingActionButton

tags: APP Android

Common

• FloatingActionButton 建議放在 CoordinatorLayout 中
• CoordinatorLayout：可以讓一個元素浮動在另一個元素之上

Layout 前端常用屬性

點擊前

• src：官方建議的icon的圖片大小為24dp
• fabSize
  • normal：56dp
  • mini：40dp
  • auto
• onClick：click 後要做的動作，和後端的 Method 做連結
• backgroundTint：FAB 的背景顏色
• elevation：在 Material Design 中，強調的陰影的設計
• layout_anchor：指定錨點的物件，該值通常為指定錨點的物件的id
• layout_anchorGravity：在指定錨點的物件中，浮動的位置，該值通常為 bottom、center、right、left、top

點擊時

• rippleColor：FAB 點擊時的背景顏色
• pressedTranslationZ：FAB 點擊時的陰影大小

Example 範例

<android.support.design.widget.CoordinatorLayout>
    
    <!-- 此段程式碼省略 -->
    
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:background="@color/colorSecondaryLighter"
        android:onClick="mapGuide"
        android:src="@drawable/map_guide_btn"
        app:backgroundTint="@color/colorSecondary"
        app:elevation="6dp"
        app:fabSize="normal"
        app:layout_anchor="@id/view_pager"
        app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>

Java 後端

• 通常只需要實作 onClick
• Button 實作 onClick 的各種方式，請參考：onClick事件的5種實現方式

Example 範例

// 設定 FloatingActionButton
public void mapGuide(View view) {
    Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("geo:0,0?q="));
    startActivity(intent);
}

Demo 結果呈現

Extensive Reading 延伸閱讀

1. Material Design

   
   

2. Android实现FloatingActionButton自定义大小：https://www.jianshu.com/p/13c2a7ccc282

Reference 參考資料

1. FAB 範例圖示：
   https://stackoverflow.com/questions/47011592/best-way-to-emulate-a-floatingactionbutton-on-android-appcelerator-titanium
2. Elevation & shadows：
   https://material.io/guidelines/material-design/elevation-shadows.html
3. codepath教程：浮动操作按钮详解
   http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0718/3197.html
4. 如何加入 FAB 官方文件：
   https://developer.android.com/guide/topics/ui/floating-action-button.html
5. FAB method 官方文件：https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html