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

32次阅读

共计 2055 个字符,预计需要花费 6 分钟才能阅读完成。

背景

抖音首页右滑可进入“集体核心”页面,对于首页日活上亿的 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…

文末

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

正文完
 0