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

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

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

为什么ViewPager不合适

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

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

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

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

为什么RecyclerView不合适

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

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

更优的一种解决方案

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

SlidableLayout 本质是一个包含两个相同大小子 ViewFrameLayout 。两个子 View 分别作为 TopViewBackView

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

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

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

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

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

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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈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-贪吃蛇

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