上拉刷新，下拉加载框架---SmartRefreshLayout

SmartRefreshLayout是什么？

官方解释：
SmartRefreshLayout以打造一个强大，稳定，成熟的下拉刷新框架为目标，并集成各种的炫酷、多样、实用、美观的Header和Footer。 正如名字所说，SmartRefreshLayout是一个“聪明”或者“智能”的下拉刷新布局，由于它的“智能”，它不只是支持所有的View，还支持多层嵌套的视图结构。 它继承自ViewGroup 而不是FrameLayout或LinearLayout，提高了性能。 也吸取了现在流行的各种刷新布局的优点，包括谷歌官方的 SwipeRefreshLayout， 其他第三方的 Ultra-Pull-To-Refresh、TwinklingRefreshLayout 。 还集成了各种炫酷的 Header 和 Footer。

那它具体是用来干啥的呢？

我们在开发过程中往往会遇到很多需要用列表展示数据的地方，最好的方法自然是使用recycleview，有时数据变化不能及时更新到UI，为了用户更好的体验，我们可以定义一个操作来刷新同步UI和服务器之间的数据，比如说你可以定义一个按钮来重新从服务器获取数据，但还是有点鸡肋，比较常见的做法是下拉刷新。还有一种情况，比如后台有几千条数据，数据太多，如果一下部署到UI容易引起卡顿，所以我们通常拿前几条数据，如果你需要往下的数据那你可以上拉加载更多。上面说的下拉刷新，上拉加载更多在日常app中都已经很常见了，在开发中基本都是采用一个很好用的框架来实现的，这就是我们要说的SmartRefreshLayout。
SmartRefreshLayout官网地址

使用前的准备工作：

我们使用最好是配合recycleview使用（不是一定非得配合recycleview），我们先新建一个项目，并在它的布局代码里面添加一个recycleview。

<?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=".MainActivity">
    
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycleView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

然后简单地定义一个recycleview的适配器：

class RecycleAdapter(var datalist: MutableList<String>) :
    RecyclerView.Adapter<RecycleAdapter.MyHolder>() {

    class MyHolder(itemView: View) : RecyclerView.ViewHolder(itemView!!)

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyHolder {
        val view =
            LayoutInflater.from(parent.context).inflate(R.layout.item_recycleview, parent, false)
        return MyHolder(view)
    }

    override fun onBindViewHolder(holder: MyHolder, position: Int) {
        holder.itemView.text.text=datalist[position]
    }

    override fun getItemCount(): Int {
        return datalist.size
    }
}

关于recycleview适配器都是开发中老生常谈的问题了，我也就不解释了，有了适配器当然少不了recycleview的item样式

<?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"
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

然后在activity中对recycleview的适配器进行初始化和赋值：

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val datalist=ArrayList<String>()
        for (i in 0..20){
            datalist.add("这是第$i 项")
        }
        recycleView.layoutManager=LinearLayoutManager(this)
        recycleView.adapter=RecycleAdapter(datalist)
        
    }
}

上面几步我们就已经简单地实现了一个recycleview，如下图：

QQ图片20211130144900.jpg

这是一个最简单的recycleview，接下来我们让它可以实现上拉刷新和下拉加载。

SmartRefreshLayout的简单使用

我把它分成以下几步：
1、添加依赖：

 implementation 'com.scwang.smartrefresh:SmartRefreshLayout:1.1.0-alpha-21'

2、在activity布局代码里面使用SmartRefreshLayout将Recycleview包起来，更改后布局代码如下：

<?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=".MainActivity">

    <com.scwang.smartrefresh.layout.SmartRefreshLayout
        android:id="@+id/refreshLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycleView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </com.scwang.smartrefresh.layout.SmartRefreshLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

3、在activity里面实现SmartRefreshLayout的上拉加载和下拉刷新

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val datalist=ArrayList<String>()
        for (i in 0..20){
            datalist.add("这是第$i 项")
        }
        recycleView.layoutManager=LinearLayoutManager(this)
        recycleView.adapter=RecycleAdapter(datalist)

        //上拉加载方法
        refreshLayout.setOnLoadMoreListener {
            Log.d("zzp","上拉加载")
            refreshLayout.finishLoadMore(500)//加载执行时间上限
        }
        //下拉刷新方法
        refreshLayout.setOnRefreshListener {
            Log.d("zzp","下拉刷新")
            refreshLayout.finishRefresh(500)//刷新时间限制
        }
    }
}

运行效果如下：

1638255532840.gif

同时编译器日志输出如下：

image.png

可以看到当我们上拉或者下拉时都会执行setOnLoadMoreListener 或者setOnRefreshListener 内部的操作，开发中只需要把数据刷新和加载更多数据的方法放在对应的操作内部就可以了。那到这里我们就简单的实现了刷新和加载，下面我们来更深入地了解并学会如何优美地使用它。

如何改变刷新和加载的样式

我们往往在刷新和加载时希望它能显示不一样的效果，下面我们尝试改变它的样式

经典样式

我们在布局代码SmartRefreshLayout内部分别加入ClassicsHeader和ClassicsFooter

<?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=".MainActivity">

    <com.scwang.smartrefresh.layout.SmartRefreshLayout
        android:id="@+id/refreshLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.scwang.smartrefresh.layout.header.ClassicsHeader
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FFF" />
        <com.scwang.smartrefresh.layout.footer.ClassicsFooter
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FFF" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycleView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />


    </com.scwang.smartrefresh.layout.SmartRefreshLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

上述代码分别加入了ClassicsHeader和ClassicsFooter，并将他们的背景设置为白色，效果如下：

1638256900934.gif

下面我们尝试把背景换成一些好看的图片：

<?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=".MainActivity">

    <com.scwang.smartrefresh.layout.SmartRefreshLayout
        android:id="@+id/refreshLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.scwang.smartrefresh.layout.header.ClassicsHeader
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/backimg" />
        <com.scwang.smartrefresh.layout.footer.ClassicsFooter
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/background" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycleView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />


    </com.scwang.smartrefresh.layout.SmartRefreshLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

效果图：

1638257313202.gif
这些都是最基本的使用，设置刷新加载属性样式及更多自定义样式请参考：
Android 智能刷新框架SmartRefreshLayout

这是我在研究jetpack组件paging时看到就想写一篇文章记录一下，至于如何监听下拉上拉操作目前没有用到，只是简单mark一下，有问题大家可以留言讨论一下。