为什么我不用ViewPager或RecyclerView来做上下滑切换

上下滑切换翻页大概是这样的效果:

目前网上有诸多如 “仿抖音上下滑...” “仿花椒映客直播...” 之类的技术分享,都有讲述实现上下滑切换页面的方案,其中以 ViewPager 和 RecyclerView + SnapHelper 两种方案为多,但是都有明显的缺点。以下是一些个人的看法:

为什么ViewPager不合适

ViewPager 自带的滑动效果完全满足场景,而且支持 Fragment 和 View 等UI绑定,只要对布局和触摸事件部分作一些修改,就可以把横向的 ViewPager 改成竖向。

但是没有复用是个最致命的问题。在 onLayout 方法中,所有子View会实例化并一字排开在布局上。当Item数量很大时,将会是很大的性能浪费。

其次是可见性判断的问题。很多人会以为 Fragment 在 onResume 的时候就是可见的,而 ViewPager 中的 Fragment 就是个反例,尤其是多个 ViewPager 嵌套时,会同时有多个父 Fragment 多个子 Fragment 处于 onResume 的状态,却只有其中一个是可见的。除非放弃 ViewPager 的预加载机制。在页面内容曝光等重要的数据上报时,就需要判断很多条件:onResumed 、 setUserVisibleHint 、 setOnPageChangeListener 等。

最后是嵌套滑动的问题。同向嵌套滑动是很常见的场景,Google 新出的滑动布局基本都使用 NestedScrolling 机制来解决嵌套滑动。但是 ViewPager 依然需要开发者自己来处理复杂的滑动冲突。

为什么RecyclerView不合适

RecyclerView + SnapHelper 的方案比 ViewPager 好得多,既有对 View 的复用,滑动事件也已经处理好。

但是依然无法双向无限滑动。我们可以在 getItemCount 方法中返回 Integer.MAX_VALUE 来假装无限个滑动元素。但是为了从头开始就可以下拉滑到上一个,元素列表的索引就不能初始化为0,那初始值为 Integer.MAX_VALUE/2 ? 无论怎么掩饰,理论上还是有滑动到头的一天。

更优的一种解决方案

使用两个 View 轮流切换就能完成上下滑的场景。这种方案也有APP在用,但是网上几乎找不到源码。因此我把它抽成独立的库放在Github仓库:致力于打造通用、易用和流畅的上下滑动翻页布局SlidableLayout。

SlidableLayout 本质是一个包含两个相同大小子 View 的 FrameLayout 。两个子 View 分别作为 TopView 和 BackView 。

静止状态下,用户只会看见 TopView ,而 BackView 被移除或隐藏。

手指向上拖动时, TopView 在y轴上向上偏移, BackView 开始出现,而且 BackView 的顶部与 TopView 的底部相接。

手指向上拖动一定距离后放手,TopView 继续在y轴上做动画直到完全消失, BackView 向上直到完全出现。然后 TopView 和 BackView 互换身份,原来的 BackView 成为现在的 TopView ,原来的 TopView 被移除或隐藏,成为下一次滑动的 BackView 。互换后完成一次滑动。

反之,手指向下滑动亦然。

同时要考虑手指放手后,滑动距离不够或者速度不够时,TopView 会沿着y轴回弹到原来的位置。 BackView 也跟着原路返回,直到被移除或隐藏。

SlidableLayout 还实现了 NestedScrollingChild 接口,使其能够与自定义的下拉刷新布局嵌套滑动。

源码和使用例子参照 github.com/YvesCheung/… 。如有不同意的地方,请在 Github 留下 Issue。

转载于:https://juejin.im/post/5cd185e5e51d456e6479b528

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.tpcf.cn/news/536479.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

web项目上之深入理解Java国际化

作者:https://blog.csdn.net/yangbo787827967/article/details/81124439 假设我们正在开发一个支持多国语言的Web应用程序,要求系统能够根据客户端的系统的语言类型返回对应的界面:英文的操作系统返回英文界面,而中文的操作系统则…

Chrome运行时性能瓶颈分析

一,初探,根据现象发现问题 chrome的performance知道很久了,但总是没有特别权威且跟上时代的学习资料,这次痛定思痛,直接看英文文档,一点点把这块啃掉,本笔记基于Chrome 59 step 1: 隐身模式打开…

vue-router之路由钩子(八)

路由钩子,即导航钩子,其实就是路由拦截器,vue-router一共有三类:全局钩子:最常用路由单独钩子组件内钩子1、全局钩子在src/router/index.js中使用,代码如下:// 定义路由配置const router new V…

java第一 ++--

大的转换小的自动转换 byte -> short -> int -> long -> float -> double l 自动类型转换 表示范围小的数据类型转换成范围大的数据类型,这种方式称为自动类型转换 自动类型转换格式: 范围大的数据类型 变量 范围小的数据类型值&#xf…

在加拿大读大学被开除了,以后该怎么办?

在加拿大读大学被开除了,以后该怎么办? 一天晚上正准备睡觉的时候,手机振动,打开一看,是一条微消息,“在加拿大读大学被开除了,以后该怎么办?”又一个留学生遇到的棘手问题。在国内上…

GO编程程序员修炼秘籍:十本经典书单

随着BAT、今日头条、京东、抖音等大型互联网公司对Go语言的大范围应用,带动更多互联网企业采取技术跟随战略,Go语言发展前景一片大好。5月20日工业和信息化部信息中心发布《2018中国区块链产业白皮书》,Go语言与区块链成为“数字中国”建设的…

AngularJs 冷兵器杂谈

一、指令 scope.template中的dom属性值可以直接用{{attr}}表达式取到scope中的属性attrlink中attr.$observe可以监听scope属性attr的动态变化需要改变$scope上的属性值时:$scope.$apply(function(){$scope.attr newValue }) 复制代码二、服务 循环依赖(…

02-print的用法

print的常用: print(hello world!)print(hello,world!) # 逗号自动添加默认的分隔符:空格。print(hello world!) # 加号表示字符拼接。print(hello,world,sep***) # 单词间用***分隔。print(# * 20) # *号表示重复20遍。print(are you sure?, end)…

单田芳白眉大侠全320回下载

1、搜索“十方评书网”。 2、要下载那个评书家的选择那个评书家。 3、然后选择自己要下载的下载可以了。 转载于:https://blog.51cto.com/14204019/2392323

pip模块 redis、xlrd、xlutils、nnlog、requests

# import模块的实质:把python文件执行一遍,# 导入模块的顺序,1、从当前模块找,如果当前模块没有,2、就去python环境变量里面找 pip install redispip install xlrd pip install xlutilspip install nnlogpip install requests pip…

react.js基础

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点长,耐心读完,你会有…

第 11 章 日志管理 - 089 - 初探 ELK

在开源的日志管理方案中,最出名的莫过于 ELK 了。 ELK 是三个软件的合称:Elasticsearch、Logstash、Kibana。 Elasticsearch 一个近乎实时查询的全文搜索引擎。Elasticsearch 的设计目标就是要能够处理和搜索巨量的日志数据。 Logstash 读取原始日志&…

【转】Kotlin 新版来了,支持跨平台!

作者:Tamic 原文链接:juejin.im/post/5cd8f9… 谷歌在今年的 I/O 大会上宣布,Kotlin 编程语言现在是 Android 应用程序开发人员的首选语言(谷歌宣布 Kotlin 成为安卓开发首选)。 还有一个好消息, Kotlin 1.3.30 正式发布,做了对ap…

WebSocket轻松单台服务器5w并发jmeter实测

测试结论 nginx最多只能维持(65535*后端服务器IP个数)条websocket的长连接,如果后端websocket服务器IP只有一个,那么就只能最多支持65535条连接。瓶颈就产生在了nginx上建议采用LVS的DR模式来做负载均衡,这样最大长连接数目就只和websocket服…

人工智能的历史

AI(Artificial Intelligence)即人工智能,最初是在1956 年被提出,人工智能研究如何用计算机去模拟、延伸和扩展人的智能;如何把计算机用得更聪明;如何设计和建造具有高智能水平的计算机应用系统;如何设计和制造更聪明的…

nginx配置 vue打包后的项目 解决刷新页面404问题|nginx配置多端访问

访问vue页面时,/# 使url看着不美观,使用 H5 history模式可以完美解决这个问题,但需要后端nginx帮助。接下来我们自己配置一下。 使用前端路由,但切换新路由时,想要滚动到页面顶部,或者保持原先的滚动位置&a…

算法导论2nd 10.1-7

为什么80%的码农都做不了架构师?>>> 思路:两个队列q1和q2,两个队列指针pusher和poper分别指向q1和q2,push时调用pusher->enqueue,然后将poper里的元素全部dequeue并enqueue到pusher,最后交换…

阿里云Windows2012 R2服务器IPV6配置记录

要上苹果APP,则必须要支持IPV6和HTTPS,阿里云本身没有开放IPV6地址。因此需要进行IPV6的相关配置。查了很多IPV6的配置资料,最终选择用HE进行IPV6设置。在这过程中遇到一些问题,以记录下来以备注。 1、IPV6 Tunnel Broker设置 在H…

mycat 1.6.5 for mysql 8分表攻略

2019独角兽企业重金招聘Python工程师标准>>> 简述 mycat 对于 mysql 的支持有版本要求,目前 1.6.5 不支持 mysql 8.0 版本。因为mysql 8.0 的加密方式发生了变化。 mycat 1.6.5 连接 mysql 8.0 的两个方式 mysql 8.0 采用兼容方式,&#xff0…

Funcode-贪吃蛇

自己编写的一个小游戏,本来打算做贪吃蛇,结果不会使蛇的身子随蛇头方向改变而改变就换了种想法,最后变成了这样一个另类的小游戏,“笑哭“,下面是程序的主要代码,如果有兴趣也可以下载完整程序代码资源&…