为什么我不用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
为什么我不用ViewPager或RecyclerView来做上下滑切换相关推荐
- TabLayout+ViewPager+Fragmet+RecyclerView结合的小demo
前两天想熟悉一下tablayout,所以就弄了个特别简单的tablayout+viewpager+fragmet+recyclerview结合的小demo.虽然特别简单,但还是遇到了不少问题. tab ...
- 仿网易新闻的页面(ViewPager作为RecyclerView的Header)
需求 > 想实现一个仿网易新闻的页面,上面是轮播的图片,下面是 RecyclerView 显示新闻列表. 本文链接 http://blog.csdn.net/never_cxb/article/ ...
- android ViewPager 实现点击小圆点切换页面 案例
android ViewPager 实现点击小圆点切换页面 说明:在viewpager中,通过左右滑动可以切换页面,同样可以通过点击所指示的小圆点来滑动到某个页面页面. 具体实现方法如下: 主要ac ...
- android小圆点滑动切换,android ViewPager 实现点击小圆点切换页面 案例
android ViewPager 实现点击小圆点切换页面 说明:在viewpager中,通过左右滑动可以切换页面,同样可以通过点击所指示的小圆点来滑动到某个页面页面. 具体实现方法如下: 主要ac ...
- viewpager与recyclerview
经常有需求要求不同标签页加载的列表类型类似,比如标签1是国内新闻,标签2是国外新闻,标签3是娱乐新闻... 实际上每个列表都是相同方式加载的.为了减少控件的重新写的问题,所以用了同一个recycler ...
- android tab 切换动画,Android之ViewPager+TabLayout组合实现导航条切换效果(微信和QQ底部多标签切换)...
前言 之前在另外一篇中用Fragment和button实现了点击切换Fragment的效果,比较简陋.这次改用ViewPager+TabLayout 实现联动的效果. 实现效果 ViewPager 多 ...
- ios切换android不用电脑,非 Power User 的无痛切换:iOS to Android
设备 iPhone 6s to OnePlus 5T 起源 手头上的 iPhone 6s 约莫用了两年多,今年虽然换了电池,续航和流畅度的表现却仍然有些遗憾.然而你果一年一更的新特性却一直没能吸引到我 ...
- SwipeRefreshLayout+CoordinatorLayout+AppBarLayout+TabLayout+ViewPager+RecyclerView 刷新,不能滑动等问题
使用SwipeRefreshLayout+CoordinatorLayout+AppBarLayout+TabLayout+ViewPager+Fragment+RecyclerView 实现首页悬浮 ...
- RecyclerView横向滑动与ViewPager冲突问题
问题出现场景: TabLayout + ViewPager + Fragment,Fragment中包含一个横向滑动的RecyclerView,出现了左右滑动RecyclerView时会与ViewPa ...
最新文章
- easyui中的tree数据使用说明
- 一篇比较好的介绍(两种线程模式)
- grub resourceunknown filesystem异常处理
- echarts代码格式化_echarts水球图格式化Format使用
- 录音文件下载_苹果手机录音常见问题解答
- 包邮送书 50 本,你还有什么理由不上进?
- java实验原理和图例_图例解析JDK,JRE,JVM概念及使用
- 数据库:Redis数据库优点介绍
- 在linux上面找一个脚本,30个Linux Shell脚本经典案例
- vector的基本操作简析
- 拿4k的前端开发都会做些什么?
- 根据银行卡账号获取所属银行php
- 谈谈如何使用 opencv 进行图像识别
- javaScript点击鼠标改变背景颜色
- 关于STM8L系列低功耗井盖板设计记录【云南昆明电子设计开发工程师】
- Java将数字金额转换为中文大写
- 数学建模之matlab软件学习04——专题四MATLAB绘图
- 使用CBrother爬取LOL服务器状态
- c语言1000万位圆周率,如何设计C语言程序输出圆周率小数点后的1000位?请大侠出手啊。...
- 计算机的开机键在哪里设置,笔记本电脑怎么开机 笔记本电脑开机键在哪
热门文章
- Qt添加类文件编译后,再添加宏Q_OBJECT
- IOS – OpenGL ES 调节图像灰色 GPUImageGrayscaleFilter
- jq之$(“:button“)
- Xml转换成html表格代码,如何用C++代码将XML文件转换为HTML表格?
- 服务器的可维护性,可靠性和可维护性
- C语言优先队列作用,C语言实现优先队列(priority queue)
- 2021谷饶中学高考成绩查询,高考成绩
- 妖帝q群机器人_有关酷Q 晨风机器人,契约 qqlite qqlight ,mypc等QQ机器人关停一事的一点想法...
- vue如何强行停止ajax请求,VueJs和VueResource,从Ajax请求中删除头字段
- html 标签 r语言,从R中的字符串中删除html标签