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

目前网上有诸多如 “仿抖音上下滑...” “仿花椒映客直播...” 之类的技术分享,都有讲述实现上下滑切换页面的方案,其中以 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

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

  1. TabLayout+ViewPager+Fragmet+RecyclerView结合的小demo

    前两天想熟悉一下tablayout,所以就弄了个特别简单的tablayout+viewpager+fragmet+recyclerview结合的小demo.虽然特别简单,但还是遇到了不少问题. tab ...

  2. 仿网易新闻的页面(ViewPager作为RecyclerView的Header)

    需求 > 想实现一个仿网易新闻的页面,上面是轮播的图片,下面是 RecyclerView 显示新闻列表. 本文链接 http://blog.csdn.net/never_cxb/article/ ...

  3. android ViewPager 实现点击小圆点切换页面 案例

    android ViewPager  实现点击小圆点切换页面 说明:在viewpager中,通过左右滑动可以切换页面,同样可以通过点击所指示的小圆点来滑动到某个页面页面. 具体实现方法如下: 主要ac ...

  4. android小圆点滑动切换,android ViewPager 实现点击小圆点切换页面 案例

    android ViewPager  实现点击小圆点切换页面 说明:在viewpager中,通过左右滑动可以切换页面,同样可以通过点击所指示的小圆点来滑动到某个页面页面. 具体实现方法如下: 主要ac ...

  5. viewpager与recyclerview

    经常有需求要求不同标签页加载的列表类型类似,比如标签1是国内新闻,标签2是国外新闻,标签3是娱乐新闻... 实际上每个列表都是相同方式加载的.为了减少控件的重新写的问题,所以用了同一个recycler ...

  6. android tab 切换动画,Android之ViewPager+TabLayout组合实现导航条切换效果(微信和QQ底部多标签切换)...

    前言 之前在另外一篇中用Fragment和button实现了点击切换Fragment的效果,比较简陋.这次改用ViewPager+TabLayout 实现联动的效果. 实现效果 ViewPager 多 ...

  7. ios切换android不用电脑,非 Power User 的无痛切换:iOS to Android

    设备 iPhone 6s to OnePlus 5T 起源 手头上的 iPhone 6s 约莫用了两年多,今年虽然换了电池,续航和流畅度的表现却仍然有些遗憾.然而你果一年一更的新特性却一直没能吸引到我 ...

  8. SwipeRefreshLayout+CoordinatorLayout+AppBarLayout+TabLayout+ViewPager+RecyclerView 刷新,不能滑动等问题

    使用SwipeRefreshLayout+CoordinatorLayout+AppBarLayout+TabLayout+ViewPager+Fragment+RecyclerView 实现首页悬浮 ...

  9. RecyclerView横向滑动与ViewPager冲突问题

    问题出现场景: TabLayout + ViewPager + Fragment,Fragment中包含一个横向滑动的RecyclerView,出现了左右滑动RecyclerView时会与ViewPa ...

最新文章

  1. easyui中的tree数据使用说明
  2. 一篇比较好的介绍(两种线程模式)
  3. grub resourceunknown filesystem异常处理
  4. echarts代码格式化_echarts水球图格式化Format使用
  5. 录音文件下载_苹果手机录音常见问题解答
  6. 包邮送书 50 本,你还有什么理由不上进?
  7. java实验原理和图例_图例解析JDK,JRE,JVM概念及使用
  8. 数据库:Redis数据库优点介绍
  9. 在linux上面找一个脚本,30个Linux Shell脚本经典案例
  10. vector的基本操作简析
  11. 拿4k的前端开发都会做些什么?
  12. 根据银行卡账号获取所属银行php
  13. 谈谈如何使用 opencv 进行图像识别
  14. javaScript点击鼠标改变背景颜色
  15. 关于STM8L系列低功耗井盖板设计记录【云南昆明电子设计开发工程师】
  16. Java将数字金额转换为中文大写
  17. 数学建模之matlab软件学习04——专题四MATLAB绘图
  18. 使用CBrother爬取LOL服务器状态
  19. c语言1000万位圆周率,如何设计C语言程序输出圆周率小数点后的1000位?请大侠出手啊。...
  20. 计算机的开机键在哪里设置,笔记本电脑怎么开机 笔记本电脑开机键在哪

热门文章

  1. Qt添加类文件编译后,再添加宏Q_OBJECT
  2. IOS – OpenGL ES 调节图像灰色 GPUImageGrayscaleFilter
  3. jq之$(“:button“)
  4. Xml转换成html表格代码,如何用C++代码将XML文件转换为HTML表格?
  5. 服务器的可维护性,可靠性和可维护性
  6. C语言优先队列作用,C语言实现优先队列(priority queue)
  7. 2021谷饶中学高考成绩查询,高考成绩
  8. 妖帝q群机器人_有关酷Q 晨风机器人,契约 qqlite qqlight ,mypc等QQ机器人关停一事的一点想法...
  9. vue如何强行停止ajax请求,VueJs和VueResource,从Ajax请求中删除头字段
  10. html 标签 r语言,从R中的字符串中删除html标签