聊聊滑动嵌套的那些bug

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,236评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,867评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,715评论 0 340
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,899评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,895评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,733评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,085评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,722评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,025评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,447评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,057评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2 343

推荐阅读更多精彩内容