美文网首页
AppBarLayout+SwipeRefreshLayout+

AppBarLayout+SwipeRefreshLayout+

作者: 奔跑的佩恩 | 来源:发表于2020-10-01 14:10 被阅读0次

前言

在上篇文章中,我们已经实现了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滑动冲突问题?
    • 如何解决SwipeRefreshLayoutAppbarLayout滑动冲突?
  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 <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中实现的代码:

相关文章

  • AppBarLayout+SwipeRefreshLayout+

    前言 在上篇文章中,我们已经实现了AppbarLayout+双导航嵌套滑动效果,大家有兴趣的话,可以参看我的上篇文...

网友评论

      本文标题:AppBarLayout+SwipeRefreshLayout+

      本文链接:https://www.haomeiwen.com/subject/vevmuktx.html