• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

终于来了Android端个人中心页面滑动冲突优化方案

android 搞代码 3年前 (2022-03-01) 22次浏览 已收录 0个评论

背景

抖音首页右滑可进入“集体核心”页面,对于首页日活上亿的 APP 来说,这个页面的pv实践上应该不会太小。然而某些时候在此页面会呈现滑动抵触的小问题,不太利于用户体验,通过重复的把玩测试,找到了必现的操作,作为一个资深的抖迷和一个非资深的 Android 开发的我,产生了钻牛角尖的想法—想看看问题是怎么产生的,以及有没有可优化的计划。

问题景象

首页右滑可进入“集体核心”页面,而后在底部的 RecylerView 上先左右滑动,然而不触发它们父布局 ViewPager 的切换,而后手指不抬起,进行高低滑动,此时 RecylerView 会接管滑动事件,导致滑动错位,如下图所示:

起因剖析

问题明确了,接下来就是剖析是如何产生的了。我通过综合剖析发现,抖音用的是自定义 LinearLayout 的形式来布局 header + Viewpager + RecyclerView 的,进而通过拦挡 LinearLayout 的 disptachTouchEvent 来解决的嵌套滑动。整体的滑动流程如图所示:

  1. 当手指触摸屏幕时,记录地位,滑动后,判断是横向竖向,只判断一次
  2. 如果是高低滑动,则判断是触发最外层 LinearLayout 的滑动,还是触发 RecyclerView 的本身滑动。
  3. 触发本身的滑动就是调用本人的 scrollBy(0,dy),留神 此时的事件还是会往下传递到 RecyclerView ,然而因为绝对于 RecyclerView 本身来说滑动差值很小,视觉上可疏忽。
  4. 不触发本身的滑动就会间接散发上来,此时 RecyclerView 本身来说竖向(dy)差值变动较大,失常滑动。
  5. 呈现问题时,用户的手先触发左右滑动,这时候因为 RecyclerView 父布局 ViewPager 中的一些临界判断没被触发,所以没拦挡事件,事件还是到了 RecyclerView 中,此时如果再次高低滑动,因为1中的判断单次滑动周期内只触发了一次,还被认为是左右滑动事件,所以 LinearLayout 布局自身没有滚动,然而 RecyclerView 失常响应滚动,导致的呈现滑动偏差。

优化计划

问题剖析的差不多了,其实原本也就完结了,然而惊喜的发现原来这个自定义的滑动布局是扩大自开源库:https://github.com/cpoopc/ScrollableLayout 然而曾经长时间没人保护了。不过通过这个原始的库。能够看到外围逻辑还是统一的,通过调试编译发现,的确这个库也同样存在这个问题,那就基于此库着手试着解决一下吧。

开源库的本来代码:

依据剖析就是在图中 else 中其实又触发了高低滑动逻辑,而外层的自定义 LinearLayout 布局没有追随滑动导致的。那咱们是不是能够在外面加个判断,除去真正的左右滑动逻辑(ViewPager事件),剩下的事件就是触发 RecylcerView 滑动的了(相当于过滤了横向的,留下的竖向的),咱们再次判断外层的自定义 LinearLayout 布局是否须要联动,如果须要再次联动就好了。

站在伟人肩膀上,零碎控件的解决个别都能够借鉴,源码之下,所有清晰,横向的能够参考 ViewPager 的事件拦挡,竖向的能够参考 RecyclerView 的事件处理逻辑。剖析两个控件的 onIntercepetTouchEvent() , 拿到其外围的判断是否响应滑动的逻辑为咱们所用。

ViewPager 相干源码:

外围拦挡逻辑:

  1. 如果横向上有可滑动的子 View ,就不拦挡,让子 View 去解决
  2. 横向的滑动超过临界值 mTouchSlop ,并且大于竖向滑动间隔的2倍,进行拦挡

咱们须要把相干的判断代码都 copy 过去,而后退出到咱们自定义 LinearLayout 中

此时进行 Log 调试发现还是有问题, 原来 ViewPager 中判断了是否是子 View 生产事件,这里咱们不能照搬过去,咱们要取反,即如果以后自定义的 LinearLayout 中有横向可滑动的 View,咱们的 isHorizontalDrag 办法应该返回 true 。

批改后的代码:

到此横向判断的过滤条件写好了。上面看竖向的 RecyclerView 的拦挡代码,非常简单:

当竖向可滑动并且差值 dy 大于临界值 mTouchSlop 时,即响应事件。

经运行测试发现问题曾经解决。

总结

简略来说,用户横向滑动时,通过减少 isHorizontalDrag() 判断是否有子 View 生产横向事件。如果有则啥也不做,如果没有,那么咱们判断是不是要最外层的 LinearLayout 生产其中的竖向局部,满足条件后,本身生产事件滚动。

以上是集体对于抖音“集体核心”页面滑动抵触优化的高见及优化计划,仅仅是本人做过简略测试,集体感觉更好的计划能够应用谷歌的嫡系 CoordinatorLayout 来解决这种嵌套滑动。
原文链接:https://juejin.cn/post/693605…

文末

您的点赞珍藏就是对我最大的激励!
欢迎关注搞代码gaodaima网,分享Android干货,交换Android技术。
对文章有何见解,或者有何技术问题,欢送在评论区一起留言探讨!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:终于来了Android端个人中心页面滑动冲突优化方案

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址