前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >RecyclerView嵌套RecyclerView完美实现京东tab吸顶效果

RecyclerView嵌套RecyclerView完美实现京东tab吸顶效果

原创
作者头像
FangMessi
修改2020-10-27 10:53:08
2.5K0
修改2020-10-27 10:53:08
举报
文章被收录于专栏:码工非码码工非码

效果展示

image.png
image.png

动画展示:https://github.com/FangMessi/nested_scroll_demo/blob/main/screenshot/ajqoe-vk8xu.gif

页面结构

structure.png
structure.png

方案

代码语言:txt
复制
继承RecyclerView,  
重写dispatchNestedPreScroll&dispatchNestedPreFling,  
自行托管事件的消耗  

关于方案的选择

  • CoordinatorLayout&AppBarLayout&RecyclerView
代码语言:txt
复制
该方案有两个问题:
1、tab以上的部分不够灵活。相信大家都运行过material design的demo,
tab以上的部分基本可以理解成一个LinearLayout,需要单独绘制每一个item,
需要产品需要调整顺序就麻烦了
2、AppBarLayout会限制app头部的样式。google的设计很好看,不过像电商之类的App,
头部的复杂程度远超想象,也许就遇到一个AppBarLayout不好支持的效果
  • RecyclerView嵌套RecyclerView,加上事件分发
代码语言:txt
复制
事件分发机制,有个天然的缺陷。
一旦parent选择拦截消耗了事件,child将不再收到parent分发的事件了。
想要实现一次事件(down&move*n&up)一开始由parent消耗,然后由child消耗,事件分发机制就做不到了
  • RecyclerView嵌套RecyclerView,加上嵌套滚动(NestedScrollChild&NestedScrollParent)
代码语言:txt
复制
基于嵌套滚动的机制,RecyclerView$onTouchEvent处理事件的流程是:
---------------- scroll ---------------
1、父类是否消耗scroll事件 dispatchNestedPreScroll()
2、自己消耗 scrollByInternal()
3、父类消耗 dispatchNestedScroll()
---------------- fling ----------------
4、父类是否消耗fling事件 dispatchNestedPreFling()
5、4不消耗,则父类dispatchNestedFling& 自己mViewFlinger.fling()

方案呼之欲出了

代码语言:txt
复制
1、继承RecyclerView
2、重写dispatchNestedPreScroll()&dispatchNestedPreFling(),在询问父类之前,
先尝试把事件分发给内部RecyclerView

源码

  • 一切不放源码的分享都是耍流氓
代码语言:txt
复制
https://github.com/FangMessi/nested_scroll_demo

源码

最后

  • 欢迎提出问题,一起沟通讨论
  • 码字不易,您的点赞是我继续分享的动力

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 效果展示
  • 页面结构
  • 方案
  • 关于方案的选择
  • 源码
  • 最后
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档