美文网首页
聊聊滑动嵌套的那些bug

聊聊滑动嵌套的那些bug

作者: Master_文 | 来源:发表于2021-02-27 23:03 被阅读0次
SmartRefreshLayout中的效果

以上效果是app中很常见的一个滑动效果,我们可以用ListView,RecycleView,自定义ViewGroup添加头部布局,中间布局和底部布局。其内部实现原理也很简单,当用户滑动的时候,如果头部布局和底部布局可滑动,就滑动头部布局和底部布局,反之,则滑动中间的内容布局。

Talk is cheap. Show me the code,话不多说,我们就来聊聊该如何实现这个功能,这边就讲讲自定义ViewGroup的方式,假设我们有3个子View,分别是头部布局,中间布局,底部布局。了解安卓的都知道有个View事件分发机制,所以我们要在ViewGroup中的onInterceptTouchEvent和onTouchEvent方法中做处理(具体代码不展开了,不是本文重点,这里只讲大致实现)在头部布局和底部布局需要移动的时候拦截这次事件,即onInterceptTouchEvent返回true,同时在onTouchEvent方法中做相应的滑动处理,反之,则onInterceptTouchEvent返回为false,由子View去处理这次事件

    /**
     * 是否应该拦截子View的事件,true拦截
     * @param ev
     * @return
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return super.onInterceptTouchEvent(ev);
    }

    /**
     *  手指滑动事件,在这里做具体的滑动操作
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
    }

下图是github上SuperSwipeRefreshLayout的效果,可以看到实现了下拉刷新和加载更多,相信有不少小伙伴也用过这个开源库,同时也遇到过一些不太好解的滑动bug,先别急!俗话说的好,磨刀不误砍柴工,让我们先来看下View事件分发的流程图,相信看完图之后,会有种一拍大腿,长叹道,原来如此啊。

SuperSwipeRefreshLayout的效果

下面是我从网上找的一个事件分发图,可以看到如果这次事件被ViewGroup拦截了,那就不会在下发给子View,看到这里,是不是有种感觉,此处会出现bug呢?

事件分发机制.png

看完View的事件分发机制后,我们在回过头来看看bug,可以看到在下拉刷新的时候继续往上滑动,中间布局没有继续向上滑动,在加载更多的时候,往上滑动直接出现空白页面了

遇到bug的时候不要慌,如果程序员写出的程序没有bug,那不知道得有多少程序员要去街头炒饭啊,我们应该先去度娘,谷歌,如果还是没有解决,推荐去看开发者文档。经过一番折腾之后,我发现了NestedScrolling这个机制,下面是事件分发机制和NestedScrolling机制的简单介绍。

事件分发机制是这样的:子View首先得到事件处理权,处理过程中,父ViewGroup可以对其拦截,但是拦截了以后就无法再还给子View(本次手势内,敲重点,这就是上述bug产生的原因)。
NestedScrolling机制是这样的:内部View在滚动的时候,首先将dx,dy交给NestedScrollingParent,NestedScrollingParent可对其进行部分消耗,剩余的部分还给内部View。

Android-StickyNavLayout.gif

上图就是用NestedScrolling机制来实现的,可以看到,之前那个bug已经没有了。NestedScrolling机制简单来说就是在子View的onTouchEvent方法的MotionEvent.ACTION_DOWN,MotionEvent.ACTION_MOVE,MotionEvent.ACTION_UP等做了接口回调,有兴趣的小伙伴可以看下源码,大致就是下面一个调用顺序

RecyclerView的onTouchEvent为例:
onTouchEvent(MotionEvent.ACTION_DOWN)->startNestedScroll(NestedScrollingChildHelper)->onStartNestedScroll(NestedScrollingParent)
onTouchEvent(MotionEvent.ACTION_MOVE)->dispatchNestedPreScroll(NestedScrollingChildHelper)->onNestedPreScroll(NestedScrollingParent)->
如果子view的还有剩余调用dispatchNestedScroll(NestedScrollingChildHelper)->onNestedScroll(NestedScrollingParent)
onTouchEvent(MotionEvent.ACTION_UP)->stopNestedScroll(NestedScrollingChildHelper)->onStopNestedScroll(NestedScrollingParent)

onTouchEvent(MotionEvent.ACTION_UP)会调用fling方法
fling->dispatchNestedPreFling(NestedScrollingChildHelper)->onNestedPreFling(NestedScrollingParent)->dispatchNestedFling(NestedScrollingChildHelper)>onNestedFling(NestedScrollingParent)->startNestedScroll(NestedScrollingChildHelper)->onNestedScrollAccepted(NestedScrollingParent)

以下代码只是个展示,具体的还需要各位小伙伴自己去看源码

            case MotionEvent.ACTION_DOWN: {
                mScrollPointerId = e.getPointerId(0);
                mInitialTouchX = mLastTouchX = (int) (e.getX() + 0.5f);
                mInitialTouchY = mLastTouchY = (int) (e.getY() + 0.5f);

                int nestedScrollAxis = ViewCompat.SCROLL_AXIS_NONE;
                if (canScrollHorizontally) {
                    nestedScrollAxis |= ViewCompat.SCROLL_AXIS_HORIZONTAL;
                }
                if (canScrollVertically) {
                    nestedScrollAxis |= ViewCompat.SCROLL_AXIS_VERTICAL;
                }
                 // TODO: 这里是NestedScrolling相关的调用  
                startNestedScroll(nestedScrollAxis, TYPE_TOUCH);
快速下滑.gif

细心的小伙伴可能已经发现这个问题现象了,没错当用户快速下滑的时候,没有显示头部布局,如果产品比较较真的话,肯定不能接受这个现象啊,那咋办,只能继续搞了呗,程序员天天加班也不是没有道理的。从现有的代码来说不太好处理这个问题,但是有个好消息
Google也发现了这个bug,同时在之后的版本里面推出了NestedScrolling最新的代码,那我们来试试用最新的NestedScrollingParent2接口来看看效果

用NestedScrollingParent2实现

总结:我们知道安卓的事件分发机制采用的是责任链模式,事件一旦中途消费掉了,就没法继续往后传递了,所以Google采用了一个很巧妙的方式,在子View的onTouchEvent里面做操作,把这次手势事件传递给父类,父类传递完成后,子类在继续处理剩余的事件。

感谢以下博客和github对本人的帮助:

博客:

https://segmentfault.com/a/1190000019272870
https://blog.csdn.net/lmj623565791/article/details/52204039
https://www.jianshu.com/p/3682dde60dbf

github:

https://github.com/hongyangAndroid/Android-StickyNavLayout
https://github.com/scwang90/SmartRefreshLayout
https://github.com/nuptboyzhb/SuperSwipeRefreshLayout

本文如果有错误的地方,感谢各位大佬指正!!!

相关文章

网友评论

      本文标题:聊聊滑动嵌套的那些bug

      本文链接:https://www.haomeiwen.com/subject/lhxifltx.html