首页 >> 大全

Android技术分享| ViewPager2离屏加载,实现抖音上下视频滑动

2023-06-20 大全 55 作者:考证青年

要实现类似抖音上下滑动视频的丝滑效果,需要有一个预加载的功能。所谓的预加载,

就是需要在显示当前页的情况下,提前将当前页后面的内容加载,以保证用户滑动到下一个视频的时候,

可以减少等待时间,在正常网速下,可以做到丝滑浏览。

在 第四个版本中加入了一个新功能:t

t(int limit)

参数:limit 有多少页面将在任一侧保持在屏幕外。有效值为 >= 1 和 默认值 -1

说明:设置应保留在当前可见页面任一侧的页面数。超出此限制的页面将在需要时从适配器重新创建。设置的值必须大于0或者默认值-1。当前页面的前后(limit数)页面会被添加到视图层次结构中,即使它是不可见的,超出limit数将会从视图删除,但会像 一样被回收。

通过方法说明可以知道,这个特性简直就是做这种功能的神器呀,但能否实现预期效果。

我们简单写一个 Demo 测试一下,在滑动时候,View 的生命周期,这样我们就可以在合适的回调方法里创建。销毁播放器,暂停/播放视频。

使用:

dependencies {implementation("androidx.viewpager2:viewpager2:1.0.0")
}

 inner class VPAdapter() :RecyclerView.Adapter() {override fun onCreateViewHolder( parent: ViewGroup, viewType: Int): BaseViewHolder {val itemView: View = LayoutInflater.from(parent.context).inflate(R.layout.vp_item_layout, parent, false)return BaseViewHolder(itemView)}override fun onBindViewHolder( holder: BaseViewHolder, position: Int) {}override fun getItemCount(): Int {return dataArray.size}override fun onViewDetachedFromWindow(holder: BaseViewHolder) {super.onViewDetachedFromWindow(holder)Log.d("ViewPager2","View 离屏 第${holder.adapterPosition+1}页")}override fun onViewAttachedToWindow(holder: BaseViewHolder) {super.onViewAttachedToWindow(holder)Log.d("ViewPager2","View 加入屏幕 第${holder.adapterPosition+1}页")}inner class BaseViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {var root: RelativeLayout?var image :TextView?init {root = itemView.findViewById(R.id.root)image =  itemView.findViewById(R.id.iv_test)}}}

准备10条数据,设置为1,则在屏幕上的页数一直都是3页。预期是第一页的时候,会创建第二页。滑动到第二页的时候,创建第三页。滑动到第三页的时候,创建第四页,并且第一页走 ndow,从视图删除。接下来我们滑动,看下日志。

进入页面
ViewPager2: View 加入屏幕 第1页
ViewPager2: View 加入屏幕 第2页滑动到第二页
ViewPager2: View 加入屏幕 第3页滑动到第三页
ViewPager2: View 加入屏幕 第4页
ViewPager2: View 离屏 第1页滑动到第四页
ViewPager2: View 加入屏幕 第5页
ViewPager2: View 离屏 第2页返回第三页
ViewPager2: View 加入屏幕 第2页
ViewPager2: View 离屏 第5页

可见,日志输入完全符合我们的预期,除了第一页后,视图中永远都会有三页在上面。

我们只需要在对应的回调中创建播放器,暂停播放,销毁播放器即可。如下

 在View加入窗口的回调中,创建播放器,开始播放随后暂停⏸️override fun onViewAttachedToWindow(holder: BaseViewHolder) {super.onViewAttachedToWindow(holder)Log.d("ViewPager2","View 加入屏幕 第${holder.adapterPosition+1}页")val player =createArLivePlayer()dataArray[holder.adapterPosition].player=playerplayer.startPlay("url")player.pause()}

在View离开窗口的回调中,销毁播放器
override fun onViewDetachedFromWindow(holder: BaseViewHolder) {super.onViewDetachedFromWindow(holder)Log.d("ViewPager2","View 离屏 第${holder.adapterPosition+1}页")dataArray[holder.adapterPosition].player.release()}

创建播放器就暂停,这样播放器就可以缓冲下一页的视频数据,那我们需要再找个地方将当前正在显示的页面的播放器开始播放。

只需注册 的翻页监听,播放当前页的播放器,暂停其他页面的播放即可。

binding.vp.registerOnPageChangeCallback(object :ViewPager2.OnPageChangeCallback(){override fun onPageSelected(position: Int) {super.onPageSelected(position)dataArray.forEachIndexed { index, videoData ->if (index==position){dataArray[index].player?.resumePlay()Log.d("ViewPager2","当前${index}播放")}}else{dataArray[index].player?.pause()Log.d("ViewPager2","当前${index}暂停")}}}}})

运行,发现效果非常的丝滑,如图所示。所以说 非常适合做类似场景的需求~

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了