本篇介绍交互效果很6的Floating Action Button（以下简称FAB）和FloatingActionMenu(FAM)，浮动与屏幕上方的按钮和菜单。Google只是提出了符合MD规范的这两个控件，但是自身实现的不是很彻底，因此我们直接介绍较强大的第三方实现库。

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

引用：

dependencies {
    implementation 'com.github.clans:fab:1.6.4'
}

Floating action button

效果图：

布局代码：

    <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"
        app:fab_size="normal"//有normal和mini两种size
        android:src="@drawable/ic_print"//24dp的矢量图
        fab:fab_colorNormal="@color/colorPrimary"//正常颜色
        fab:fab_colorPressed="@color/colorPrimaryDark"//按下去颜色
        fab:fab_colorRipple="@color/colorAccent"/>//水纹颜色

添加监听事件与普通Button一样：

  fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });

以下是FAB的全部属性：

<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/your_icon_drawable"
        app:fab_colorNormal="#DA4336"
        app:fab_colorPressed="#E75043"
        app:fab_colorRipple="#99FFFFFF"
        app:fab_showShadow="true"
        app:fab_shadowColor="#66000000"
        app:fab_shadowRadius="4dp"
        app:fab_shadowXOffset="1dp"
        app:fab_shadowYOffset="3dp"
        app:fab_size="normal"
        app:fab_showAnimation="@anim/fab_scale_up"
        app:fab_hideAnimation="@anim/fab_scale_down"
        app:fab_label=""
        app:fab_progress_color="#FF009688"
        app:fab_progress_backgroundColor="#4D000000"
        app:fab_progress_indeterminate="false"
        app:fab_progress_max="100"
        app:fab_progress="0"
        app:fab_progress_showBackground="true"/>

带滚动条的FAB

图中展示了几种常用滚动条样式：

• 持续滚动
• 向前滚动
• 向后滚动
• 是否带背景色

布局样式与普通的FAB一样，主要根据业务逻辑通过代码来控制滚动条。主要方法如下：

fab_progress = (FloatingActionButton) findViewById(R.id.fab_progress);
fab_progress.setMax(mMaxProgress);//设置滚动条的最大值，例如：100
fab_progress.setShowProgressBackground(true);//滚动条是否有背景色
fab_progress.setIndeterminate(true);//是否持续滚动
fab_progress.hideProgress();//隐藏滚动条/停止滚动

fab_progress.setIndeterminate(false);
fab_progress.setProgress(70, true);//滚动至70
fab_progress.setProgress(70, true);//滚动至30，实现回滚效果

Floating Action Menu

布局代码：

  <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginRight="80dp"
        android:layout_marginBottom="8dp"
        fab:menu_fab_size="normal"//有normal（56dp）和mini（40dp）两种sieze
        fab:menu_colorNormal="#DA4336"
        fab:menu_colorPressed="#E75043"
        fab:menu_colorRipple="#99FFFFFF"
        fab:menu_icon="@drawable/fab_add"
        fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
        fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
        fab:menu_labels_padding="8dp"
        fab:menu_labels_textColor="#FFFFFF"
        fab:menu_labels_colorNormal="#333333"
        fab:menu_labels_colorPressed="#444444"
        fab:menu_labels_colorRipple="#66FFFFFF"
        fab:menu_openDirection="up"//menu展开方向，有上下左右4种
        fab:menu_backgroundColor="@android:color/transparent"
        fab:menu_fab_label="说明文字"//可以为空，即只有图标
        fab:menu_fab_show_animation="@anim/fab_slide_in_from_left"
        fab:menu_fab_hide_animation="@anim/fab_slide_in_from_right">

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/menu_item1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_print"
            fab:fab_size="mini"
            fab:fab_label="" />
        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/menu_item2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_print"
            fab:fab_size="mini"
            fab:fab_label="" />
    </com.github.clans.fab.FloatingActionMenu>

Activity代码：

//动态添加button
 menu.addMenuButton(FloatingActionButton);
 //控制收起或展开
if(menu!=null && menu.isOpened()) {
    menu.close(true);
  }