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

自Google推出Material Design設計規範以後，如今愈來愈多的App設計在參考它，Material Design中的FAB(Floating Action Button) 你們必定已經使用過了，那麼，FloatingActionMenu呢？這篇文章就帶你們一塊兒來了解一下FloatingActionMenu以及它的使用。

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

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

1 ：圓形容器 2 ：Icon

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

一、標準 (56 x 56dp) 二、Mini (40 x 40dp) 以下圖所示：

FAB 既能夠在當前界面觸發一些動做，也能夠執行一個動做去建立一個新的界面，好比：建立、編輯、收藏、分享、刷新等等操做，均可以使用FAB。

二、 FloatingActionMenu 的做用

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

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

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

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

三、 FloatingActionMenu 實現

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

別慌，騷年，這裏已經有比較強大的三方實現庫了，徹底遵循Material Design設計，至關於官方控件。

一、 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();
        }

    }
複製代碼

二、 開源庫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>
複製代碼

效果圖：

三、總結

這個兩個庫都很是優秀，遵循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