ListView和Recyclerview实现滑动隐藏与显示FloatingActionButton

先看效果:

listview实现

recyclerview实现
ListView和Recyclerview实现滑动隐藏与显示FloatingActionButton_第1张图片

FloatingActionButton

build.gradle 的 dependencies 需要引入

    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:design:27.1.1'

FloatingActionButton XML布局设计


android:src:FAB中显示的图标.
app:backgroundTint:正常的背景颜色 ,这里是在values的colors.xml中引用
app:rippleColor:按下时的背景颜色
app:elevation:正常的阴影大小
app:pressedTranslationZ:按下时的阴影大小
app:layout_anchor:设置FAB的锚点,即以哪个控件为参照设置位置,我在上面设置了listview,所以以 listview为锚点,且父类布局须为CoordinatorLayout
app:layout_anchorGravity:FAB相对于锚点的位置,
app:fabSize:FAB的大小,这里设normal,没试过mini

完整xml布局




    
    


listview结合FloatingActionButton设计

其实不管是listview还是recyclerview都是为其添加监听器检测其滑动动作,如果上滑则显示FAB(FloatingActionButton,以下都简称FAB)按钮,下滑隐藏该按钮。
一开始的效果图是用之前老师布置的作业实现的,额外设计了animal类和animaladapter,这里进行简单的arrayadapter展示
ListView和Recyclerview实现滑动隐藏与显示FloatingActionButton_第2张图片
初始化:

	private ListView listView1;
    private FloatingActionButton button5_change;
    private AnimatorSet hideFabAS;
    private AnimatorSet showFabAS;
    private boolean FAB_VISIBLE = true;
    private int previousFirstVisibleItem;   //记录前面第一个Item
    private int lastScrollY;            //记录ListView中最上面的Item(View)的上一次顶部Y坐标()
    private int scrollThreshold = 2;
    private int getTopItemScrollY() {
        if (listView1 == null || listView1.getChildAt(0) == null) return 0;
        View topItem = listView1.getChildAt(0);
        return topItem.getTop();
    }

Animatiorset就是为FAB添加动画,这里简单设置两个,一个显示一个隐藏。
getTopItemScrollY()是获得listview的最上面位置的Y坐标
设置FAB_VISIBLE是为了防止 设计的FAB(button5_change) 频繁执行动画,比如:
ListView和Recyclerview实现滑动隐藏与显示FloatingActionButton_第3张图片
Oncreate():

		List list = new ArrayList<>();
        for (int i = 0; i < 150; i++) {
            list.add("TestItem_" + i);
        }
        listView1 = (ListView)findViewById(R.id.listview);
        //listView1.setAdapter(adapter);
        listView1.setAdapter(new ArrayAdapter(this,android.R.layout.simple_list_item_1,list));
        button5_change=(FloatingActionButton)findViewById(R.id.fab);
        hideFabAS = (AnimatorSet) AnimatorInflater.loadAnimator(this,R.animator.scroll_hide_fab);
        showFabAS = (AnimatorSet)AnimatorInflater.loadAnimator(this,R.animator.scroll_show_fab);
        //AnimatorInflater.loadAnimator加载动画
        hideFabAS.setTarget(button5_change);
        showFabAS.setTarget(button5_change);
        //设置动画目标控件
        listView1.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
            }
            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
                //listview初始化的时候会回调onScroll
                if(totalItemCount == 0) {
                    showFabAS.start();//
                    return;
                }
                //滚动过程中:ListView中最上面一个Item还是同一个Item
                if(previousFirstVisibleItem == firstVisibleItem) {
                    int newScrollY =  getTopItemScrollY();//获得当前最上方item Y坐标
                    boolean isExceedThreshold = Math.abs(lastScrollY - newScrollY) > scrollThreshold;
                    if (isExceedThreshold) {
                        if (lastScrollY > newScrollY && FAB_VISIBLE == true) {//下滑
                            FAB_VISIBLE = false;
                            hideFabAS.start();//FAB执行动画
                        } else if(lastScrollY < newScrollY && FAB_VISIBLE == false){//上滑
                            FAB_VISIBLE = true;
                            showFabAS.start();//FAB执行动画
                        }
                    }
                    lastScrollY = newScrollY;
                } else {
                    if (firstVisibleItem > previousFirstVisibleItem && FAB_VISIBLE == true){
                        //向下滑动时FAB执行动画
                        FAB_VISIBLE = false;
                        hideFabAS.start();
                    } else if(firstVisibleItem < previousFirstVisibleItem && FAB_VISIBLE == false){
                        //向上滑动时FAB执行动画
                        FAB_VISIBLE = true;
                        showFabAS.start();
                    }
                    lastScrollY =  getTopItemScrollY();
                    previousFirstVisibleItem = firstVisibleItem;
                }
            }
        });

Animator中的scroll_hide_fab.xml



    
    

Animator中的scroll_hide_fab.xml



    
    

实现这个效果从网上找了很多对listview的监听的方法,该监听方法是针对listview的所有item来对FAB进行动画执行,以下的链接给了很大帮助。
参考地址

RecyclerView结合FloatingActionButton设计

RecyclerView是新控件,较于listview可以实现更多的功能。
在使用RecyclerView时候,必须指定一个适配器Adapter和一个布局管理器LayoutManager。适配器继承RecyclerView.Adapter类。
该设计比较常见所以网上有很多实现,我是直接参考下面的链接的
参考地址
先设计了FAB动画的接口:

package com.example.myapplication_1;

public interface FABStateListener {

    public void onFABHide();

    public void onFABShow();
}

activity中:onFABHide()和onFABShow()是对接口的实现,onClickFAB是点击FAB回到顶端

	private RecyclerView recyclerView;
    private FloatingActionButton floatingActionButton;
    public void onClickFAB(View view) {
        recyclerView.smoothScrollToPosition(0);
    }

    @Override
    public void onFABHide() {
        RelativeLayout.LayoutParams layoutParams = (LayoutParams) floatingActionButton.getLayoutParams();
        floatingActionButton.animate().translationY(floatingActionButton.getHeight() + layoutParams.bottomMargin).setInterpolator(new AccelerateInterpolator(3));
    }

    @Override
    public void onFABShow() {
        floatingActionButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));
    }

Oncreate():

floatingActionButton = findViewById(R.id.fabr);
        recyclerView = findViewById(R.id.rcv);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        List list = new ArrayList<>();
        for (int i = 0; i < 150; i++) {
            list.add("TestItem_" + i);
        }
        recyclerView.setAdapter(new RecFabAdapter(list));//设置自己构建的适配器
        recyclerView.addOnScrollListener(new RecScrollListener(this));
        //设置自己构建的监听器

自己构建适配器 继承RecyclerView.Adapter类 重写三个方法:
onCreateViewHolder()方法,负责承载每个子项的布局。它有两个参数,其中一个是 int viewType;
onBindViewHolder()方法,负责将每个子项holder绑定数据。俩参数分别是RecyclerView.ViewHolder holder, int position;
getItemCount() 返回数组的size

package com.example.myapplication_1;


import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;


public class RecFabAdapter extends RecyclerView.Adapter {
    private List list;

    public RecFabAdapter(List list) {
        this.list = list;
    }


    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.rev_litem, viewGroup, false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, int position) {
        String str = list.get(position);
        MyViewHolder holder = (MyViewHolder) viewHolder;
        holder.textView.setText(str);
    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    class MyViewHolder extends RecyclerView.ViewHolder {
        private TextView textView;

        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.rec_tv);//自定义布局
        }
    }
}

监听器 重写onScrolled方法

package com.example.myapplication_1;


import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.util.Log;


public class RecScrollListener extends RecyclerView.OnScrollListener {
    private static final int THRESHOLD = 10;
    private int distance = 0;
    private FABStateListener fabStateListener;
    private boolean visible = true;//是否可见

    public RecScrollListener(FABStateListener hideScrollListener) {
        this.fabStateListener = hideScrollListener;
    }

    @Override
    public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        //Log.i("mtx","dy:"+dy);
        if (distance > THRESHOLD && visible) {
            //隐藏
            visible = false;
            fabStateListener.onFABHide();
            distance = 0;
        } else if (distance < -20 && !visible) {
            //显示
            visible = true;
            fabStateListener.onFABShow();
            distance = 0;
        }
        if (visible && dy > 0 || (!visible && dy < 0)) {
            distance += dy;
        }
    }
}

自定义布局 rev_litem




    


listview滑动实现FAB的隐藏显示是比较简单的,不需要多实现adapter和相关类,不过显然用recyclerview可以实现更多的功能,设计贴合自己需要的类,功能也更为强大,FAB的动画可以通过animator和anim的配置文件实现,也可以通过设计函数实现。

作者:陈诗泱
原文地址

你可能感兴趣的:(ListView和Recyclerview实现滑动隐藏与显示FloatingActionButton)