Material Design之-互動效果炸裂的 FloatingActionMenu

自Google推出Material Design設計規範之後，現在越來越多的App設計在參考它，Material Design中的FAB(Floating Action Button) 大家一定已經使用過了，那麼，FloatingActionMenu呢？這篇文章就帶大家一起來了解一下FloatingActionMenu以及它的使用。

1、 什麼是FAB(Floating Action Button) ？

一個Floating Action Button（以下簡稱FAB）位於當前螢幕的最上層（覆蓋於螢幕之上），用來執行最常見或者最重要的操作。它的UI表現形式為一個圓形容器和一個位於圓圈中心的icon。

1 ：圓形容器 2 ：Icon

FAB 有兩種尺寸，標準和mini，按照Material Design標準規定，兩種尺寸對應的size如下：

1、標準 (56 x 56dp) 2、Mini (40 x 40dp) 如下圖所示：

FAB 既可以在當前介面觸發一些動作，也可以執行一個動作去建立一個新的介面，比如：建立、編輯、收藏、分享、重新整理等等操作，都可以使用FAB。

2、 FloatingActionMenu 的作用

有時候，FAB 並不能滿足我們的需求，比如我們有2個或者3個比較關鍵的操作，也想用Floating Action Button 這種方式來實現，該怎麼呢？這個時候FloatingActionMenu 就登場了。

FloatingActionMenu： 當我們點選FAB的時候，FAB 能發射出3-6個相關操作的選單，如果超過了6個或者不足2個選單，那麼就不在適合使用FAB這種方式來實現了。

推薦使用FAB場景(2-6個)：

不推薦使用場景（操作不足2個或者多餘6個）：

3、 FloatingActionMenu 實現

很遺憾，Material Design 雖然給出了FloatingActionMenu的設計規範，但是Google卻沒有給出官方的FAM控制元件。那如果想用，該怎麼辦呢？答案是：自己去實現啊。 看到這兒，估計你想罵娘了，這不是廢話嘛。

別慌，騷年，這裡已經有比較強大的三方實現庫了，完全遵循Material Design設計，相當於官方控制元件。

1、 android-floating-action-button

Github: https://github.com/futuresimple/android-floating-action-button

android-floating-action-button 是基於MD規範實現的FloatingActionnu,有如下特性：

• 支援常規和mini2種尺寸

• 自定義Button 常規、按壓狀態的背景色和Icon

• 可以在xml 新增選單也可以在程式碼中新增選單

• 有展開/收起2中狀態

• 可以選擇是否同時顯示標籤

• 可以向四個方向彈出選單，上、下、左、右。

使用

dependencies {
    compile 'com.getbase:floatingactionbutton:1.10.1'
}
複製程式碼

如果想直接在xml 中新增FloatingActionButon 的話，直接寫在FloatingActionsMenu標籤內就好。FloatingActionsMenu 是一個自定義容器，繼承自ViewGroup。

xml 中使用如下：

    <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/multiple_actions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_labelStyle="@style/menu_labels_style"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/action_a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action A"
            fab:fab_colorPressed="@color/white_pressed"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/action_b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action with a very long name that won\'t fit on the screen"
            fab:fab_colorPressed="@color/white_pressed"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>
複製程式碼

程式碼中使用如下：

       <com.getbase.floatingactionbutton.FloatingActionsMenu
                android:id="@+id/menu_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:fab_addButtonColorNormal="@color/white"
                app:fab_addButtonColorPressed="#f1f1f1"
                app:fab_addButtonPlusIconColor="@color/sport_start_color"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:layout_alignParentTop="true"
                android:layout_alignParentBottom="true"
                android:layout_marginRight="15dp"
                android:layout_centerVertical="true"
                app:fab_addButtonSize="mini"
                android:visibility="visible"
                app:fab_labelStyle="@style/menu_labels_style"
                app:fab_expandDirection="down"
                app:fab_labelsPosition="left">

            </com.getbase.floatingactionbutton.FloatingActionsMenu>
複製程式碼

通過findViewById()獲取到FloatingActionsMenu之後,直接呼叫addButton方法。

FloatingActionButton buttonBW = new FloatingActionButton(context);
buttonBW.setTitle(context.getResources().getString(R.string.tab_blood_weight));
buttonBW.setIcon(R.drawable.floating_action_weight_icon);
buttonBW.setSize(FloatingActionButton.SIZE_MINI);
buttonBW.setColorNormal(context.getResources().getColor(R.color.white));    buttonBW.setColorPressed(context.getResources().getColor(R.color.white));
buttonBW.setTag(TAG_BW);
        
// 將button新增到FloatingActionMenu
mActionsMenu.addButton(button);
複製程式碼

程式碼中可以控制展開或者收起：

 if (mActionsMenu != null && mActionsMenu.isExpanded()) {
    mActionsMenu.collapse();
 }
複製程式碼

專案使用效果圖：

總結：android-floating-action-button 基本滿足90%的需求，只要是按照material design 規範設計來的，基本都能覆蓋，但是如果設計師比較奇葩的話，想任意更改尺寸、陰影等等，那麼就需要自己下載原始碼按照自己的需求更改。比如，在真實專案中需要在程式碼中改變+的顏色，需要自己修改原始碼：

 /**
     * 程式碼中設定 + 的顏色
     *
     * @param color
     */
    public void setButtonPlusColor(@ColorInt int color) {
        mAddButtonPlusColor = color;
        if (mAddButton != null) {
            //removeButton(mAddButton);
            mAddButton.setPlusColor(color);
        } else {
            createAddButton(getContext());
            invalidate();
        }

    }
複製程式碼

2、 開源庫FloatingActionButton

Github:https://github.com/Clans/FloatingActionButton

這個庫是在前面這個庫android-floating-action-button的基礎上修改的，增加了一些更強大和實用的特性。

特性：

• Android 5.0 以上點選會有水波紋效果

• 可以選擇自定義normal/pressed/ripple 的顏色

• 可以選擇設定FAB的陰影和陰影的大小

• 可以選擇取消標籤和按鈕的陰影

• 可以自定義動畫

• 可以自定義Icon

• 按鈕支援56dp標準尺寸和40dp的mini尺寸

• 可以自定義 FloatingActionMenu icon 動畫

• 選單支援從上到下或者從下到上

• 標籤可以顯示在左邊或者右邊

• 可以為FloactinActionButton顯示進度

• 可以在程式碼中為FloatingActionMenu新增按鈕

使用

dependencies {
    compile 'com.github.clans:fab:1.6.4'
}
複製程式碼

xml 中新增：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <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_menu"
        fab:fab_colorNormal="@color/app_primary"
        fab:fab_colorPressed="@color/app_primary_pressed"
        fab:fab_colorRipple="@color/app_ripple"/>

</FrameLayout>
複製程式碼

FloatingActionMenu 的一些自定義屬性：

<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"
        fab:menu_fab_size="normal"
        fab:menu_showShadow="true"
        fab:menu_shadowColor="#66000000"
        fab:menu_shadowRadius="4dp"
        fab:menu_shadowXOffset="1dp"
        fab:menu_shadowYOffset="3dp"
        fab:menu_colorNormal="#DA4336"
        fab:menu_colorPressed="#E75043"
        fab:menu_colorRipple="#99FFFFFF"
        fab:menu_animationDelayPerItem="50"
        fab:menu_icon="@drawable/fab_add"
        fab:menu_buttonSpacing="0dp"
        fab:menu_labels_margin="0dp"
        fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
        fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
        fab:menu_labels_paddingTop="4dp"
        fab:menu_labels_paddingRight="8dp"
        fab:menu_labels_paddingBottom="4dp"
        fab:menu_labels_paddingLeft="8dp"
        fab:menu_labels_padding="8dp"
        fab:menu_labels_textColor="#FFFFFF"
        fab:menu_labels_textSize="14sp"
        fab:menu_labels_cornerRadius="3dp"
        fab:menu_labels_colorNormal="#333333"
        fab:menu_labels_colorPressed="#444444"
        fab:menu_labels_colorRipple="#66FFFFFF"
        fab:menu_labels_showShadow="true"
        fab:menu_labels_singleLine="false"
        fab:menu_labels_ellipsize="none"
        fab:menu_labels_maxLines="-1"
        fab:menu_labels_style="@style/YourCustomLabelsStyle"
        fab:menu_labels_position="left"
        fab:menu_openDirection="up"
        fab:menu_backgroundColor="@android:color/transparent"
        fab:menu_fab_label="your_label_here"
        fab:menu_fab_show_animation="@anim/my_show_animation"
        fab:menu_fab_hide_animation="@anim/my_hide_animation">

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/menu_item"
            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.FloatingActionMenu>
複製程式碼

效果圖：

3、總結

這個兩個庫都非常優秀，遵循Material Design設計規範，動畫效果很酷，使用簡單。FloatingActionButton是對android-floating-action-button的擴充套件，功能更加強大，但是實現也要複雜一些。如果你要自己修改原始碼，android-floating-action-button更好一點，邏輯簡單。需要使用哪一個根據自己的需求選擇就好。

Material Design 系列文章：

Material Design 之 Toolbar 開發實踐總結

Material Design之 AppbarLayout 開發實踐總結

Material Design 之 Behavior的使用和自定義Behavior Material Design 之 TabLayout 使用

Material Design 之 TextInputLayout和TextInputEditText

Material Design 系列之CardView、FAB和Snackbar