换一个思路,超简单的RecyclerView预加载
bigegpt 2024-10-22 10:04 4 浏览
作者:唐子玄 链接:https://juejin.cn/post/6885146484791050247/
列表的内容是由服务器返回的分页数据,每次浏览到当前页的尾部,都会拉取下一页的数据。这中断用户的浏览,不免产生等待。产品希望让这个过程无感知。一种实现方案是预加载,即在一页数据还未看完时就请求下一页数据,让用户感觉列表的内容是无穷的。
监听列表滚动状态
第一个想到的方案是监听列表滚动状态,当列表快滚动到底部时执行预加载,RecyclerView.OnScrollListener提供了两个回调:
public class RecyclerView {
public abstract static class OnScrollListener {
public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState){}
public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy){}
}
}
在onScrolled()可以拿到LayoutManager,它提供了很多和表项位置有关的方法:
// 为 RecyclerView 新增扩展方法,用于监听预加载事件
fun RecyclerView.addOnPreloadListener(preloadCount: Int, onPreload: () -> Unit) {
// 监听 RecyclerView 滚动状态
addOnScrollListener(object : RecyclerView.OnScrollListener() {
override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
super.onScrolled(recyclerView, dx, dy)
// 获取 LayoutManger
val layoutManager = recyclerView.layoutManager
// 如果 LayoutManager 是 LinearLayoutManager
if (layoutManager is LinearLayoutManager) {
// 如果列表正在往上滚动,并且表项最后可见表项索引值 等于 预加载阈值
if (dy > 0 && layoutManager.findLastVisibleItemPosition() == layoutManager.itemCount - 1 - preloadCount) {
onPreload()
}
}
}
})
}
当列表滚动时,实时检测列表中最后一个可见表项索引 和 预加载阈值 是否相等,若相等则表示列表快滚动到底部了,则触发预加载回调。然后就可以像这样实现预加载:
recyclerView.addOnPreloadListener(3) {// 当距离列表底部还有 3 个表项时执行预加载
// 预加载业务逻辑
}
一运行 Demo 就测出 bug:当快速滚动列表时onPreload()没有执行,当慢慢滚动列表时onPrelaod()会执行多次。
原因是RecyclerView并不保证每个表项出现时onScrolled()都会被调用,若滚动非常快,某个表项错过该回调是有可能发生的。
为了避免错过,只能放宽条件:
if (dy > 0 && layoutManager.findLastVisibleItemPosition() >= layoutManager.itemCount - 1 - preloadCount) {
onPreload()
}
将==改成>=,条件是放宽了,但多次调用的问题更加严重了。在正常滑动过程中,这个方案无法做到精准匹配预加载阈值,即无法实现只回调一次onPreload(),因为onScroll()是像素粒度的回调,而预加载要做的表项粒度的检测。
这个方案还有一个缺点:和LayoutManager类型耦合。代码中使用了if (layoutManager is LinearLayoutManager)这样的判断,如果要适配StaggeredGridLayoutManager则必须新增else分支,如果又多了一个自定义LayoutManager呢?
类型无关预加载
判断是否预加载的关键是获取表项索引,刚才通过layoutManager.findLastVisibleItemPosition()获取,其实饶了一大圈。
列表在被显示之前必然经历了onBindViewHolder(holder: ViewHolder, position: Int),该方法中就能轻松地获取表项索引,可以把刚才的判断逻辑移到RecyclerView.Adapter中:
class PreloadAdapter: RecyclerView.Adapter<ViewHolder>() {
// 预加载回调
var onPreload: (() -> Unit)? = null
// 预加载偏移量
var preloadItemCount = 0
// 列表滚动状态
private var scrollState = SCROLL_STATE_IDLE
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
checkPreload(position)
}
override fun onAttachedToRecyclerView(recyclerView: RecyclerView) {
recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
// 更新滚动状态
scrollState = newState
super.onScrollStateChanged(recyclerView, newState)
}
})
}
// 判断是否进行预加载
private fun checkPreload(position: Int) {
if (onPreload != null
&& position == max(itemCount - 1 - preloadItemCount, 0)// 索引值等于阈值
&& scrollState != SCROLL_STATE_IDLE // 列表正在滚动
) {
onPreload?.invoke()
}
}
}
然后就可以像这样使用:
val preloadAdapter = PreloadAdapter().apply {
// 在距离列表尾部还有2个表项的时候预加载
preloadItemCount = 2
onPreload = {
// 预加载业务逻辑
}
}
这个方案有如下优点:
- 不需要关心列表滑动的快慢,因为所有表项都会经历onBindViewHolder(),索引值和预加载阈值就可以用==做判断。
- 不要担心用户在列表底部多次上拉导致回调多次预加载,因为这种情况下onBindViewHolder()不会执行多次。当RecyclerView更换LayoutManager时,也不需要修改代码。
唯一需要担心的是,列表滚动到底部触发了一次预加载后,又往回滚动(阈值位表项滚出屏幕),假设预加载迟迟没有完成,此时再次滚动到底部,移出屏幕的阈值位表项需要重新执行`onBindViewHolder(),会再触发一次预加载。
当然可以通过增加标记位解决这个问题:
class VarietyAdapter: RecyclerView.Adapter<ViewHolder>() {
// 增加预加载状态标记位
var isPreloading = false
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
checkPreload(position)
}
// 判断是否进行预加载
private fun checkPreload(position: Int) {
if (onPreload != null
&& position == max(itemCount - 1 - preloadItemCount, 0)// 索引值等于阈值
&& scrollState != SCROLL_STATE_IDLE // 列表正在滚动
&& !isPreloading // 预加载不在进行中
) {
isPreloading = true // 表示正在执行预加载
onPreload?.invoke()
}
}
}
然后在业务层中控制该标记位,列表内容请求成功、失败或者超时时将该标记位置为false。
但我更倾向于让业务层维护这个标记位,因为若Adapter只单纯地提供预加载时机,它就不需要关心业务层加载何时结束。
---END---
相关推荐
- Docker篇(二):Docker实战,命令解析
-
大家好,我是杰哥上周我们通过几个问题,让大家对于Docker有了一个全局的认识。然而,说跟练往往是两个概念。从学习的角度来说,理论知识的学习,往往只是第一步,只有经过实战,才能真正掌握一门技术所以,本...
- docker学习笔记——安装和基本操作
-
今天学习了docker的基本知识,记录一下docker的安装步骤和基本命令(以CentOS7.x为例)一、安装docker的步骤:1.yuminstall-yyum-utils2.yum-con...
- 不可错过的Docker完整笔记(dockerhib)
-
简介一、Docker简介Docker是一个开源的应用容器引擎,基于Go语言并遵从Apache2.0协议开源。Docker可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,...
- 扔掉运营商的 IPTV 机顶盒,全屋全设备畅看 IPTV!
-
其实现在看电视节目的需求确实大大降低了,折腾也只是为了单纯的让它实现,享受这个过程带来的快乐而已,哈哈!预期构想家里所有设备直接接入网络随时接收并播放IPTV直播(电信点播的节目不是太多,但好在非常稳...
- 第五节 Docker 入门实践:从 Hello World 到容器操作
-
一、Docker容器基础运行(一)单次命令执行通过dockerrun命令可以直接在容器中执行指定命令,这是体验Docker最快捷的方式:#在ubuntu:15.10容器中执行ech...
- 替代Docker build的Buildah简单介绍
-
Buildah是用于通过较低级别的coreutils接口构建OCI兼容镜像的工具。与Podman相似,Buildah不依赖于Docker或CRI-O之类的守护程序,并且不需要root特权。Builda...
- Docker 命令大全(docker命令大全记录表)
-
容器生命周期管理run-创建并启动一个新的容器。start/stop/restart-这些命令主要用于启动、停止和重启容器。kill-立即终止一个或多个正在运行的容器rm-于删除一个或...
- docker常用指令及安装rabbitMQ(docker安装rabbitmq配置环境)
-
一、docker常用指令启动docker:systemctlstartdocker停止docker:systemctlstopdocker重启docker:systemctlrestart...
- 使用Docker快速部署Storm环境(docker部署confluence)
-
Storm的部署虽然不是特别麻烦,但是在生产环境中,为了提高部署效率,方便管理维护,使用Docker来统一管理部署是一个不错的选择。下面是我开源的一个新的项目,一个配置好了storm与mono环境的D...
- Docker Desktop安装使用指南:零基础教程
-
在之前的文章中,我多次提到使用Docker来安装各类软件,尤其是开源软件应用。鉴于不少读者对此有需求,我决定专门制作一期关于Docker安装与使用的详细教程。我主要以Macbook(Mac平台)为例进...
- Linux如何成功地离线安装docker(linux离线安装httpd)
-
系统环境:Redhat7.2和Centos7.4实测成功近期因项目需要用docker,所以记录一些相关知识,由于生产环境是不能直接连接互联网,尝试在linux中离线安装docker。步骤1.下载...
- Docker 类面试题(常见问题)(docker面试题目)
-
Docker常见问题汇总镜像相关1、如何批量清理临时镜像文件?可以使用sudodockerrmi$(sudodockerimages-q-fdanging=true)命令2、如何查看...
- 面试官:你知道Dubbo怎么优雅上下线的吗?你:优雅上下线是啥?
-
最近无论是校招还是社招,都进行的如火如荼,我也承担了很多的面试工作,在一次面试过程中,和候选人聊了一些关于Dubbo的知识。Dubbo是一个比较著名的RPC框架,很多人对于他的一些网络通信、通信协议、...
- 【Docker 新手入门指南】第五章:Hello Word
-
适合人群:完全零基础新手|学习目标:30分钟掌握Docker核心操作一、准备工作:先确认是否安装成功打开终端(Windows用户用PowerShell或GitBash),输入:docker--...
- 松勤软件测试:详解Docker,如何用portainer管理Docker容器
-
镜像管理搜索镜像dockersearch镜像名称拉取镜像dockerpullname[:tag]列出镜像dockerimages删除镜像dockerrmiimage名称或id删除...
- 一周热门
- 最近发表
-
- Docker篇(二):Docker实战,命令解析
- docker学习笔记——安装和基本操作
- 不可错过的Docker完整笔记(dockerhib)
- 扔掉运营商的 IPTV 机顶盒,全屋全设备畅看 IPTV!
- 第五节 Docker 入门实践:从 Hello World 到容器操作
- 替代Docker build的Buildah简单介绍
- Docker 命令大全(docker命令大全记录表)
- docker常用指令及安装rabbitMQ(docker安装rabbitmq配置环境)
- 使用Docker快速部署Storm环境(docker部署confluence)
- Docker Desktop安装使用指南:零基础教程
- 标签列表
-
- mybatiscollection (79)
- mqtt服务器 (88)
- keyerror (78)
- c#map (65)
- resize函数 (64)
- xftp6 (83)
- bt搜索 (75)
- c#var (76)
- mybatis大于等于 (64)
- xcode-select (66)
- mysql授权 (74)
- 下载测试 (70)
- linuxlink (65)
- pythonwget (67)
- androidinclude (65)
- logstashinput (65)
- hadoop端口 (65)
- vue阻止冒泡 (67)
- oracle时间戳转换日期 (64)
- jquery跨域 (68)
- php写入文件 (73)
- kafkatools (66)
- mysql导出数据库 (66)
- jquery鼠标移入移出 (71)
- 取小数点后两位的函数 (73)