AppBarLayout+SwipeRefreshLayout+上拉加载实现滑动效果

前言

在上篇文章中，我们已经实现了AppbarLayout+双导航嵌套滑动效果，大家有兴趣的话，可以参看我的上篇文章
AppbarLayout+双导航嵌套滑动效果
那么今天就让我们来学习下AppBarLayout,SwipeRefreshLayout以及上拉加载控件组合的界面效果吧。

今天涉及内容：

要实现的效果
库依赖
代码实现
3.1 adapter适配器
3.2 activity中实现代码
3.3 activity对应布局代码
需要注意的点
- 如何实现整体下刷新效果？
- 滑动过程，如何实现大图跟随滑动显示和隐藏，而大图下的布局顶在标题栏下面不动？
- SmartRefreshLayout外面为啥要包裹NestedScrollView?
- SmartRefreshLayout为上拉加载下拉刷新控件，如何做到只有上拉刷新功能，且在SwipeRefreshLayout下拉刷新的时候，刷新了SmartRefreshLayout包裹的RecyclerView的数据？
- 如何解决AppBarLayout+NestedScrollView+RecyclerView滑动冲突问题？
- 如何解决SwipeRefreshLayout和AppbarLayout滑动冲突?
效果图及项目结构图

先来波效果图吧

1.gif

一. 要实现的效果

下面简述下要实现的效果：

标题栏下有一张大图，在程序打开时会展现出来，但是界面向下滑的时候，图片会渐渐消失，然后当界面往上滑的时候，大图又会渐渐出来
大图下面有一个横向展示的布局，当界面不窜向下滑的时候，此布局会顶在标题栏下面不动，当界面往上滑的时候，此布局又会随着大图的出现，向下滑去
横向布局下是一个上拉加载更多的布局
整个界面除标题栏以外，均用SwipeRefreshLayout布局包裹，当界面处在最上面的时候，下拉刷新可刷新整个加载更多布局的数据

二.库依赖

下拉刷新我用的是SwipeRefreshLayout，其库引用如下：

    //swiperefreshlayout
    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'

上拉加载更多，我用的是SmartRefreshLayout，其库引用如下：

    //SmartRefreshLayout
    implementation 'com.scwang.smartrefresh:SmartRefreshLayout:1.1.0-x'
    implementation 'com.scwang.smartrefresh:SmartRefreshHeader:1.1.0-x'

三. 代码实现

3.1 adapter适配器

在此布局中，我们肯定要使用到适配器展示数据的问题，然后我写了一个数据展示的适配器DefaultAdapter，下面给出DefaultAdapter代码：

public class DefaultAdapter <T>extends RecyclerView.Adapter{

    protected Context mContext;
    protected View mLayoutView;
    protected List<T> mData;

    public DefaultAdapter(Context context,List<T>data){
        this.mContext=context;
        this.mData=data;
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        mLayoutView= LayoutInflater.from(mContext).inflate(R.layout.item_one,parent,false);
        ViewHolder viewHolder=new ViewHolder(mLayoutView);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        String name=mData.get(position).toString();
        ((ViewHolder)holder).mTvName.setText(name);
    }

    @Override
    public int getItemCount() {
        return mData==null?0:mData.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder{

        TextView mTvName;

        public ViewHolder(View view) {
            super(view);
            mTvName=(TextView)view.findViewById(R.id.tv_text);
        }
    }

}

DefaultAdapter对应布局item_one.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"
    android:background="@color/white">

    <TextView
        android:id="@+id/tv_text"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:text="Hello World!"
        android:textColor="@color/black"
        android:textSize="16sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

3.2 activity中实现代码

下面给出此效果在TempActivity中实现的代码：

还有 73% 的精彩内容

支付 ¥6.00 继续阅读