MaterialDesign系列文章（四）FloatingActionButton的使用

Hi，大家好，我是笔墨Android！相信很多小伙伴在实际开发中都有这样的需求，一个列表滚动到某一位置，然后有一个按钮，回到顶部？很常见的一个效果，在以前我们一般都使用一个图片，放到那里。但是在5.0的时候google推出了FloatingActionButton，并做了相应的兼容，能很好的解决以上问题，并且通过CoordinatorLayout可以很好的联动！

本文知识点：

• FloatingActionButton是什么，使用的时候需要注意什么？
• FloatingActionButton的简单应用及属性说明，
• FloatingActionButton实现一些相应的效果。

1. FloatingActionButton是什么，使用的时候需要注意什么？

FloatingActionButton是一个继承ImageView悬浮的动作按钮，经常用在一些比较常用的操作中，一个页面尽量只有一个FloatingActionButton，否则会给用户一种错乱的感觉！FloatingActionButton的大小分为标准型(56dp)和迷你型(40dp)，google是这么要求的，如果你不喜欢可以自己设置其他大小。并且对于图标进行使用materialDesign的图标，大小在24dp为最佳！

2. FloatingActionButton的属性说明及简单应用

先来一张效果图

其实FloatingActionButton的用法很简单，主要是在布局文件中定义就可以了，这里先将一下各个属性的含义: 大家可以试一下，能更好的理解相应的内容的！

• android:src 设置相应图片
• app:backgroundTint 设置背景颜色
• app:borderWidth 设置边界的宽度。如果不设置0dp，那么在4.1的sdk上FAB会显示为正方形，而且在5.0以后的sdk没有阴影效果。
• app:elevation 设置阴影效果
• app:pressedTranslationZ 按下时的阴影效果
• app:fabSize 设置尺寸normal对应56dp，mini对应40dp
• app:layout_anchor 设置锚点，相对于那个控件作为参考
• app:layout_anchorGravity 设置相对锚点的位置 top/bottom之类的参数
• app:rippleColor 设置点击之后的涟漪颜色

整理的布局是这样的：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/ll_top"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#438b8b"
        android:orientation="horizontal">

        <TextView
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="假装这有内容内容" />
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="20dp"
        android:src="@mipmap/ic_call_white_24dp"
        app:backgroundTint="#FF3030"
        app:borderWidth="0dp"
        app:elevation="6dp"
        app:fabSize="normal"
        app:layout_anchor="@id/ll_top"
        app:layout_anchorGravity="bottom|right"
        app:pressedTranslationZ="120dp"
        app:rippleColor="#00ff00" />
</android.support.design.widget.CoordinatorLayout>

就是上面这样了，忘说了一件很重要的事情……FloatingActionButton的监听就是最原始的监听！！！接下来到了重头戏了

3. FloatingActionButton实现一些相应的效果。

关于FloatingActionButton在项目中的使用，基本上就有以下这么多东西，这些都是我能想到的。如果你有什么好的应用效果可以和我分享一下：

3.1 FloatingActionButton和RecyclerView的联动

简单的说一下实现方案：
- 自定义Behavior的方式实现(但是这里面有一个缺点，就是只能在implementation 'com.android.support:design:26.1.0'25.1.0之前的版本中使用，如果在之后的版本中使用的话，一般隐藏了之后就不会出现了！！！)这里存在一个Behavior和CoordinatorLayout的概念，会在后期讲解，这里直接贴出相应的代码了！

如果你想实现效果切记把com.android.support:design:XXX设置成25.1.0之下的版本

public class ScrollAwareFABBehaviorDefault extends FloatingActionButton.Behavior {

    public ScrollAwareFABBehaviorDefault(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child, final View directTargetChild, final View target, final int nestedScrollAxes) {
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);

    }

    public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child, final View target, final int dxConsumed, final int dyConsumed, final int dxUnconsumed, final int dyUnconsumed) {
        if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
            child.hide();
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            child.show();
        }
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
    }
}

之后在布局中设置一些behavior就可以了

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.jinlong.newmaterialdesign.fab.FABAndRecyclerViewActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimaryDark"
            app:layout_scrollFlags="scroll" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="30dp"
        android:src="@mipmap/ic_call_missed_outgoing_white_24dp"
        app:layout_behavior="com.jinlong.newmaterialdesign.fab.ScrollAwareFABBehaviorDefault" />
    <!--layout_behavior设置的是控件的全路径-->
</android.support.design.widget.CoordinatorLayout>

基本上就是上面这么多，我在网上找了好久，在25.1.0之后的版本，都是可以隐藏，但是怎么也显示不出来了。也没有找到很好的解决办法，所以这里我就换了一种解决方案，所以就有了下面这种解决方案。

• 监听滑动控件的滚动事件(我就是这么实现的，因为当你把design设置成25.1.0的时候，相应的过渡动画会出现很多的问题，所以这里建议这么去弄)这里的代码很简单，就是监听了一个滚动的方向和控件的显示状态，具体内容看代码就明白了！

        mRvContent.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                Log.e(TAG, "onScrolled: " + dy);
                if (dy > 0 && mFab.getVisibility() == View.VISIBLE) {
                    //向下滑动，并且控件显示
                    mFab.hide();
                } else if (dy < 0 && mFab.getVisibility() != View.VISIBLE) {
                    //向上滑动，并且控件为飞显示
                    mFab.show();
                }
            }
        });

上面的gif是用第二种方案实现的，所以关于上面选择那种方案，大家自行斟酌。。。

3.2 推荐一些开源比较好的FloatingActionButton

其实在Google推出FloatingActionButton之前，网上有很多大神都已经创造出来相应的组件了，这里介绍几个比较好的

• android-floating-action-button 这个是通过点击FloatingActionButton弹出一组列表的开源库
• FloatingActionButton 我觉得这个就是GoogleFloatingActionButton的前身。。。

---

其实关于FloatingActionButton的内容我总结的就这么多，希望大家不要介意，还有一些内容是关系到CoordinatorLayout和Behavior的，因为内容比较多，我会在之后的文章单独讲解的，还希望得到您的关注。。。。最后随口唠叨几句，程序员的成长在于不断的积累。每天进步一点点，总有一天我们会成为码农的！！！！！！哈哈。。。

希望自己可以变得更优秀，也希望你也能变得更优秀！！！拜，今天就到这里吧！拜拜。。。