美文网首页自定义控件
实现下拉刷新+上拉加载功能,多款炫酷样式供你选择!

实现下拉刷新+上拉加载功能,多款炫酷样式供你选择!

作者: 千夜零一 | 来源:发表于2020-10-24 21:31 被阅读0次

    引言

      想要实现RecyclerView中的下拉刷新+上拉加载功能,我们除了使用谷歌提供给我们的SwipeRefreshLayout控件,还有一款相当漂亮的控件SmartRefreshLayout,它继承自SwipeRefreshLayout,但比原生的更强大。
      今天就来使用这款控件,实现RecyclerView的下拉刷新+上拉加载,讲真的,很漂亮!因为本期主要做刷新讲解,RecyclerView的相关代码请走传送门这边自行查看:RecyclerView实现代码传送门


    效果预览

    • 下拉刷新(经典头)
    • 下拉刷新(谷歌头)
    • 下拉刷新(雷达头)
    • 上拉加载(经典尾)
    • 上拉加载(脉冲尾)

    用法

    第一步:添加依赖(app下build.gradle中)

     //下拉刷新+上拉加载
        implementation 'androidx.appcompat:appcompat:1.2.0'                 //必须 1.0.0 以上
        implementation  'com.scwang.smart:refresh-layout-kernel:2.0.1'      //核心必须依赖
        implementation  'com.scwang.smart:refresh-header-classics:2.0.1'    //经典刷新头
        implementation  'com.scwang.smart:refresh-footer-classics:2.0.1'    //经典加载尾
        implementation  'com.scwang.smart:refresh-header-radar:2.0.1'       //雷达刷新头
        implementation  'com.scwang.smart:refresh-footer-ball:2.0.1'        //球脉冲加载尾
        implementation  'com.scwang.smart:refresh-header-falsify:2.0.1'     //虚拟刷新头
        implementation  'com.scwang.smart:refresh-header-material:2.0.1'    //谷歌刷新头
        implementation  'com.scwang.smart:refresh-header-two-level:2.0.1'   //二级刷新头
    

    第二步:布局文件使用控件

    <?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="match_parent"
        tools:context=".blog.Case54"
        tools:ignore="MissingConstraints">
    
        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@color/blue"
            android:gravity="center"
            android:text="RecyclerView中的下拉刷新、上拉加载"
            android:textColor="@color/white"
            android:textSize="20dp" />
    
        <com.scwang.smart.refresh.layout.SmartRefreshLayout
            android:id="@+id/refreshLayout"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@id/title">
    
            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recyclerview"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
    
        </com.scwang.smart.refresh.layout.SmartRefreshLayout>
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    第三步:在Activity中书写业务逻辑

    //下拉刷新、上拉加载
    public class Case54 extends AppCompatActivity {
        private RecyclerView recyclerView;
        private FruitRecyclerViewAdapter adapter;
        private LinearLayoutManager layoutManager;
        private List<Fruit> mList = new ArrayList();
        private int n = 1;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_case54);
    
            initView();
            initData(n);
            setRecyclerView();
            setRefreshLayout();
        }
        private void initView(){
            recyclerView = findViewById(R.id.recyclerview);
        }
        private void initData(int n){
            for ( int i=1 ; i<13 ; i++){
                mList.add(new Fruit("apple"+(12*(n-1)+i),R.mipmap.apple));
            }
        }
        private void setRecyclerView(){
            //瀑布流布局
            adapter = new FruitRecyclerViewAdapter(mList);
            layoutManager = new LinearLayoutManager(this);
            layoutManager.setOrientation(RecyclerView.VERTICAL);
            recyclerView.setLayoutManager(layoutManager);
            recyclerView.setAdapter(adapter);
            recyclerView.setItemAnimator(new DefaultItemAnimator());
        }
        private void setRefreshLayout(){
            RefreshLayout refreshLayout = (RefreshLayout)findViewById(R.id.refreshLayout);
    //        refreshLayout.setRefreshHeader(new ClassicsHeader(this)); //经典头
    //        refreshLayout.setRefreshFooter(new ClassicsFooter(this)); //经典尾
            refreshLayout.setRefreshHeader(new BezierRadarHeader(this).setEnableHorizontalDrag(true));//雷达刷新头
    //        refreshLayout.setRefreshHeader(new MaterialHeader(this));//谷歌刷新头
    //        refreshLayout.setRefreshHeader(new TwoLevelHeader(this));//二级刷新头
            refreshLayout.setRefreshFooter(new BallPulseFooter(this).setSpinnerStyle(SpinnerStyle.Scale)); //脉冲尾
    
            refreshLayout.setOnRefreshListener(new OnRefreshListener() {
                @Override
                public void onRefresh(RefreshLayout refreshlayout) {
                    mList.clear();
                    refreshlayout.finishRefresh(2000/*,false*/);//传入false表示刷新失败
                    initData(1);
                }
            });
            refreshLayout.setOnLoadMoreListener(new OnLoadMoreListener() {
                @Override
                public void onLoadMore(RefreshLayout refreshlayout) {
                    dataRefresh();
                    refreshlayout.finishLoadMore(2000/*,false*/);//传入false表示加载失败
                }
            });
        }
        private void dataRefresh(){
            new Thread(new Runnable() {
                @Override
                public void run() {
                    try {
                        Thread.sleep(1000);//为了体现出刷新效果,所以这里休眠了线程
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    //切回主线程
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            initData(++n);//加载更多数据
                            adapter.notifyDataSetChanged();//通知数据已发生变化
                        }
                    });
                }
            }).start();
        }
    }
    

    大功告成!

    相关文章

      网友评论

        本文标题:实现下拉刷新+上拉加载功能,多款炫酷样式供你选择!

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