美文网首页优秀案例
basicUI(五)——RecycleView的下拉刷新、加载更

basicUI(五)——RecycleView的下拉刷新、加载更

作者: Peakmain | 来源:发表于2020-07-23 10:33 被阅读0次

    以下是我的基本UI组件该系列的文章,欢迎大家转载和分享:
    基本UI组件的封装库(一)——basicUI
    基本UI组件的封装库(二)——basicUI
    基本UI组件的封装库——basicUI的demo的编写
    基本UI组件的封装库(三)——basicUI
    基本UI组件的封装库(四)——basicUI

    RecycleView封装实现下拉刷新和加载更多

    前言

    • 之前我在GitHub开源过一个项目gankzhihu,当时用到自己封装的recylcerview实现了一套加载更多和下拉刷新,但是存在一点问题,这次就把它解决了。
    • 现在网上很多下拉刷新和加载更多都是自定义view,要么继承RelativeLayout,要么继承LinearLayout等,这就有个问题,会加重布局层次深度,如果一个效果写多个自定view分别继承LinearLayout,FrameLayout,RelativeLayout等等,很明显不太符合实际

    How to

    Step 1. Add the JitPack repository to your build file

    Add it in your root build.gradle at the end of repositories:

        allprojects {
            repositories {
                ...
                maven { url 'https://jitpack.io' }
            }
        }
    

    Step 2. Add the dependency

        dependencies {
                implementation 'com.github.Peakmain:BasicUI:1.0.0'
        }
    

    效果

    录屏软件不行,录制的不清晰


    效果图.gif
    下拉刷新效果2.gif

    使用

    • 封装库类中我封装了一个默认的下拉刷新和加载更多
    • 1、布局
        <com.peakmain.ui.recyclerview.view.LoadRefreshRecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    
    • 2、下拉刷新
            mRecyclerView.addRefreshViewCreator(new DefaultRefreshViewCreator());
            mRecyclerView.setOnRefreshListener(this);
    
    • 3、重写onRefresh的方法,数据获取完之后在其中调用onStopRefresh方法停止下拉刷新
      比如示例中的代码
        public void onRefresh() {
            new Handler().postDelayed(() -> {
                List<String> data = getData();
                mAdapter.setData(data);
                mRecyclerView.onStopRefresh();
            }, 2000);
        }
    
    • 4、加载更多
      mRecyclerView.addLoadViewCreator(new DefalutLoadViewCreator());
            mRecyclerView.setOnLoadMoreListener(this);
    
    • 5、重写onLoad方法,数据获取完之后在其中调用onStopLoad方法停止加载更多
      比如示例中的代码
       public void onLoad() {
            new Handler().postDelayed(() -> {
                List<String> moreData = getMoreData();
                mAdapter.addData(moreData);
                mRecyclerView.onStopLoad();
            }, 2000);
    
        }
    
    • 6、大家还可以自定以下拉刷新和加载更多
      下拉刷新继承RefreshViewCreator实现相关功能即可
      上图下拉刷新效果2示例代码
    public class BestMissRefreshCreator extends RefreshViewCreator {
        // 加载数据的ImageView
        private ImageView mRefreshIv;
        @Override
        public View getRefreshView(Context context, ViewGroup parent) {
            View refreshView = LayoutInflater.from(context).inflate(R.layout.layout__bestmiss_refresh_header_view, parent, false);
            mRefreshIv = refreshView.findViewById(R.id.img_progress);
            return refreshView;
        }
    
        @Override
        public void onPull(int currentDragHeight, int refreshViewHeight, int currentRefreshStatus) {
            if (currentRefreshStatus == LoadRefreshRecyclerView.LOAD_STATUS_PULL_DOWN_REFRESH) {
                mRefreshIv.setImageResource(R.drawable.list_view_pull);
            }
            if (currentRefreshStatus == LoadRefreshRecyclerView.LOAD_STATUS_LOOSEN_LOADING) {
                mRefreshIv.setImageResource(R.drawable.list_view_release);
            }
        }
    
        @Override
        public void onRefreshing() {
            mRefreshIv.setImageResource(R.drawable.load_more_anim);
            ((AnimationDrawable) mRefreshIv.getBackground()).start();
        }
        @Override
        public void onStopRefresh() {
            // 停止加载的时候清除动画
            mRefreshIv.setRotation(0);
            ((AnimationDrawable) mRefreshIv.getBackground()).stop();
            mRefreshIv.clearAnimation();
        }
    }
    
    

    加载更多继承LoadViewCreator即可
    上图下拉刷新2示例代码

    public class LoadMoreCreator extends LoadViewCreator {
        // 加载数据的ImageView
        private TextView mLoadTv;
        private View mRefreshIv;
    
        @Override
        public View getLoadView(Context context, ViewGroup parent) {
            View refreshView = LayoutInflater.from(context).inflate(R.layout.layout_load_footer_view, parent, false);
            mLoadTv = (TextView) refreshView.findViewById(R.id.load_tv);
            mRefreshIv = refreshView.findViewById(R.id.refresh_iv);
            return refreshView;
        }
    
        @Override
        public void onPull(int currentDragHeight, int refreshViewHeight, int currentRefreshStatus) {
            if (currentRefreshStatus == LoadRefreshRecyclerView.LOAD_STATUS_PULL_DOWN_REFRESH) {
                mLoadTv.setText("上拉加载更多");
            }
            if (currentRefreshStatus == LoadRefreshRecyclerView.LOAD_STATUS_LOOSEN_LOADING) {
                mLoadTv.setText("松开加载更多");
            }
        }
    
        @Override
        public void onLoading() {
            mLoadTv.setVisibility(View.INVISIBLE);
            mRefreshIv.setVisibility(View.VISIBLE);
    
            // 加载的时候不断旋转
            RotateAnimation animation = new RotateAnimation(0, 720,
                    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            animation.setRepeatCount(-1);
            animation.setDuration(1000);
            mRefreshIv.startAnimation(animation);
        }
    
        @Override
        public void onStopLoad() {
            // 停止加载的时候清除动画
            mRefreshIv.setRotation(0);
            mRefreshIv.clearAnimation();
            mLoadTv.setText("上拉加载更多");
            mLoadTv.setVisibility(View.VISIBLE);
            mRefreshIv.setVisibility(View.INVISIBLE);
        }
    
    
        @Override
        public void onFinishLoadData() {
           mLoadTv.setText("无更多数据");
        }
    }
    

    RecycleView实现多状态布局

    多状态布局.gif
    使用
    使用WarpRecyclerView(只能添加头部或尾部)、RefreshRecyclerView(下拉刷新)或者LoadRefreshRecyclerView(加载更多或者下拉刷新)
    • 1、可以自定义状态布局,一共四个属性
        <declare-styleable name="MultipleStatusView">
            <attr name="loadingView" format="reference" />
            <attr name="errorView" format="reference" />
            <attr name="emptyView" format="reference" />
            <attr name="noNetworkView" format="reference" />
        </declare-styleable>
    

    所以使用示例如下

        <com.peakmain.ui.recyclerview.view.LoadRefreshRecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:emptyView="@layout/layout_empty_view"
            app:errorView="@layout/layout_error_view"
            app:noNetworkView="@layout/layout_network_view"
            app:loadingView="@layout/layout_loading_view"/>
    

    注意:这里的emptyView、errorView、noNetworkView布局的根布局需要设置id,对应的id分别是:empty_retry_view、error_retry_view、no_network_retry_view

    • 2、basicUI提供了默认的状态布局,可不设置自定义属性

    • 3、没有网络显示

     mRecyclerView.showNoNetwork();
    
    • 4、空布局
      这里大家放在什么位置都可以,源码中会自动根据是否有数据进行显示或隐藏
    mRecyclerView.showEmptyView();
    
    • 5、显示loading和隐藏loading
      mRecyclerView.showLoading();
    
    mRecyclerView.hideLoading();
    
    • 6、显示错误
     mRecyclerView.showError();
    
    • 7、显示内容
    mRecyclerView.showContentView();
    
    • 8、设置emptyView、errorView、noNetworkView可以设置点击事件
     mRecyclerView.setOnRetryClickListener(v -> ToastUtils.showShort("正在重新请求接口..."));
    

    相关文章

      网友评论

        本文标题:basicUI(五)——RecycleView的下拉刷新、加载更

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