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

前言

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

今天涉及内容：

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

先来波效果图吧

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 extends RecyclerView.Adapter{

    protected Context mContext;
    protected View mLayoutView;
    protected List mData;

    public DefaultAdapter(Context context,Listdata){
        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代码如下：

3.2 activity中实现代码

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