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

JsonChao

Editor's Note

如何实现一套效果炸裂的悬浮菜单？推荐阅读~

这是 JsonChao 的第 301 期分享

自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

推荐使用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更好一点，逻辑简单。需要使用哪一个根据自己的需求选择就好。

END

推荐阅读：

浅谈移动端图片压缩(Android & ios)

自定义AppBarLayout，让它Fling起来更流畅

你真的会写简历吗？

往期推荐

App 黑白化技术实践上篇

飞书前端提到的竞态问题，在 Android 上怎么解决？

RecyclerView 简单到想哭的多条目实现

JNI 从入门到实践，万字爆肝详解！

RecyclerView 自定义 LayoutManager ，打造不规则布局

点击下方卡片关注 JsonChao，为你构建一套