自 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) 如下图所示:
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 更好一点, 逻辑简单. 需要使用哪一个根据自己的需求选择就好.
来源: https://juejin.im/post/5c87c1efe51d453b7666c26b