FloatingActionButton在RecycleView中滑动隐藏显示

FloatingActionButton是的Google在com.android.support:design库中的一个悬浮按钮，一般简称（FCB按钮），他也是Material Design 设计的一员，FCB和RecycleView搭配是使用也是很常见的操作，譬如在recycleView中下滑隐藏上滑显示，以及快速返回到RecycleView的第一个行等操作。下面我们来实现个常见的需求，首选我们建立一个project命名为FloatingActionButton. 主界面activity_main.xml布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rcv"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fcb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_margin="@dimen/default_margin"
        android:backgroundTint="@color/colorAccent"
        android:onClick="onClickFCB"
        android:src="@drawable/up"
        app:borderWidth="0dp"
        app:elevation="10dp"
        app:fabSize="normal"
        app:rippleColor="@color/colorPrimary" />
</RelativeLayout>
复制代码

布局很简单就是一个recycleView加上一个FCB按钮，顺便说一下FCB常见用的属性

app:backgroundTint ：设置FAB的背景颜色。
app:rippleColor:设置FAB点击时的背景颜色,也就是水波纹效果的颜色
app:borderWidth：该属性尤为重要，如果不设置0dp，那么在4.1的sdk上FAB会显示为正方形，而且在5.0以后的sdk没有阴影效果，所以设置为borderWidth="0dp"，
app:elevation：默认状态下FAB的阴影大小。。
app:fabSize：设置FAB的大小，该属性有两个值，分别为normal和mini，对应的FAB大小分别为56dp和40dp。
android:src:设置FAB的图标，Google建议符合Design设计的该图标大小为24dp。
app:layout_anchor:设置FAB的锚点，即以哪个控件为参照点设置位置
app:layout_anchorGravity：设置FAB相对锚点的位置，值有 bottom、center、right、left、top等。

接下来重点是监听recycleView的滑动，我RecycleView可通过 recyclerView.addOnScrollListener()方法来监听滑动的距离，

 recyclerView.addOnScrollListener(new RecScrollListener(this));
复制代码

RecScrollListener的具体实现

public class RecScrollListener extends RecyclerView.OnScrollListener {
    private static final int THRESHOLD = 10;//滑动的距离
    private int distance = 0;
    private FCBStateListener fcbStateListener;
    private boolean visible = true;//是否可见

    public RecScrollListener(FCBStateListener hideScrollListener) {
        this.fcbStateListener = hideScrollListener;
    }
    //滚动时回调
    @Override
    public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        if (distance > THRESHOLD && visible) {
            //隐藏
            visible = false;
            fcbStateListener.onFCBHide();
            distance = 0;
        } else if (distance < -20 && !visible) {
            //显示
            visible = true;
            fcbStateListener.onFCBShow();
            distance = 0;
        }
        if (visible && dy > 0 || (!visible && dy < 0)) {
            distance += dy;
        }
    }
}
复制代码

RecScrollListener类继承RecycleView的OnScrollListener类，重写onScrolled的方法，该方法在每次RecycleView滑动的时候回调，其中dy是每次Y轴滑动的距离。

dy > 0 ：手指向上滚动,列表滚动显示下面的内容

dy < 0 ：手指向下滚动,列表滚动显示上面的内容

THRESHOLD是默认滑动的距离，超过该距离就显示或者隐藏FCB，distance是记录滑动距离的累加值，FCBStateListener是回调FCB按钮影藏显示的回调接口，visible判断FCB是否影藏了， MainActivity.java

 private RecyclerView recyclerView;
    private FloatingActionButton floatingActionButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        floatingActionButton = findViewById(R.id.fcb);
        recyclerView = findViewById(R.id.rcv);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        List<String> list = new ArrayList<>();
        for (int i = 0; i < 100; i++) {
            list.add("Item_" + i);
        }
        recyclerView.setAdapter(new RecFcbAdapter(list));
        recyclerView.addOnScrollListener(new RecScrollListener(this));
    }

    //点击FCB后recyclerView回到首页
    public void onClickFCB(View view) {
        recyclerView.smoothScrollToPosition(0);
    }
   
   //隐藏FCB
    @Override
    public void onFCBHide() {
        RelativeLayout.LayoutParams layoutParams = (LayoutParams) floatingActionButton.getLayoutParams();
        floatingActionButton.animate().translationY(floatingActionButton.getHeight() + layoutParams.bottomMargin).setInterpolator(new AccelerateInterpolator(3));
    }
    //显示FCB
    @Override
    public void onFCBShow() {
        floatingActionButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));
    }
}
复制代码

最后效果如下

源码下载

FloatingActionButton在RecycleView中滑动隐藏显示

猜你喜欢