这可能是 ViewPager2 滑动冲突最全处理方案！-技术圈

BATcoder技术群，让一部分人先进大厂

大家好，我是刘望舒，腾讯TVP，著有三本业内知名畅销书，连续四年蝉联电子工业出版社年度优秀作者，谷歌开发者社区特邀讲师，百度百科收录的高级技术专家。

前华为技术专家，现大厂技术总监。

想要加入 BATcoder技术群，公号回复BAT 即可。

作者:赌一包辣条
来源:https://juejin.cn/post/6911456860533063688

ViewPager2 已经逐渐开始替代旧版本的ViewPager。许多开发者也已经在项目中使用了 ViewPager2。相比ViewPager，ViewPager2的功能不可谓不强大，我在之前写过的一篇文章https://zhpanvip.gitee.io/2019/12/14/24.Know%20about%20ViewPager2
中对 ViewPager2 的使用做过详细的讲解。

但是，由于当时没有太多实战，所以并没有发现 ViewPager2 的嵌套使用存在严重的滑动冲突。直到今年三月份用 ViewPager2 重构 BannerViewPager 的时候才发现这个问题。因此，在BVP
3.0版本中额外对 ViewPager2 做了滑动冲突处理，效果还算差强人意。另外，曾在论坛上看到过不少ViewPager2滑动冲突的求助帖子，甚至还有同学因为搜索ViewPager2滑动冲突而找到了BannerViewPager的Github主页。

既然如此，不如写篇文章将BVP处理滑动冲突的经验分享给大家，没准还能涨知
(fěn) 识 (sī) ，嘿嘿嘿。

一、为什么ViewPager没有滑动冲突？

不知道你是否有这个疑问，在ViewPager时代，ViewPager嵌套ViewPager并没有出现过滑动冲突。可是为什么在ViewPager的升级版ViewPager2中却出现了滑动冲突呢？想要搞清楚这个问题就需要我们深入到ViewPager和ViewPager2的内部分析一下它们的源码了。

我们知道，滑动冲突是需要在onInterceptTouchEvent方法中进行处理的，根据自身条件来决定是否要拦截事件。在ViewPager的源码中看到以下代码(方便阅读，代码做了删减)：

 1@Override
 2    public boolean onInterceptTouchEvent(MotionEvent ev) {
 3
 4        final int action = ev.getAction() & MotionEvent.ACTION_MASK;
 5        if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {
 6            // 在事件取消或者抬起手指后重置状态
 7            resetTouch();
 8            return false;
 9        }
10
11        switch (action) {
12            case MotionEvent.ACTION_MOVE: {
13                // 这里判断在水平方向上的滑动距离大于竖直方向的2倍，则认为是有效的切换页面的滑动
14                if (xDiff > mTouchSlop && xDiff * 0.5f > yDiff) { 
15                    mIsBeingDragged = true;
16                    // 禁止Parent View拦截事件，即事件要能够传递到ViewPager
17                    requestParentDisallowInterceptTouchEvent(true);
18                    setScrollState(SCROLL_STATE_DRAGGING);
19                } else if (yDiff > mTouchSlop) {
20                    mIsUnableToDrag = true;
21                }
22                break;
23            }
24
25            case MotionEvent.ACTION_DOWN: {     
26                if (mScrollState == SCROLL_STATE_SETTLING
27                        && Math.abs(mScroller.getFinalX() - mScroller.getCurrX()) > mCloseEnough) {
28                       // 在Down事件中禁止Parent View拦截事件，是为了事件序列能够传递到ViewPager
29                    requestParentDisallowInterceptTouchEvent(true);
30                    setScrollState(SCROLL_STATE_DRAGGING);
31                } else {
32                    completeScroll(false);
33                    mIsBeingDragged = false;
34                }
35                break;
36            }
37
38            case MotionEvent.ACTION_POINTER_UP:
39                onSecondaryPointerUp(ev);
40                break;
41        }
42        return mIsBeingDragged;
43    }

可以看到在ACTION_DOWN与ACTION_MOVE中根据一些判断条件调用了requestParentDisallowInterceptTouchEvent(true)方法来禁止Parent
View拦截事件，也就是说ViewPager已经帮我们处理了滑动冲突，所以我们只管用即可，无需担心滑动冲突问题。

现在，我们转到ViewPager2中，翻阅源码发现只有在RecyclerView
的实现类中有onInterceptTouchEvent的相关方法，而且这句代码仅仅是处理禁用了用户输入的逻辑！

1private class RecyclerViewImpl extends RecyclerView {
2
3        .... // 省略部分代码
4
5        @Override
6        public boolean onInterceptTouchEvent(MotionEvent ev) {
7            return isUserInputEnabled() && super.onInterceptTouchEvent(ev);
8        }
9    }

也就是说ViewPager2其实并没有帮我们处理滑动冲突！这是为什么呢？难道是ViewPager2的开发者们把这件事忘了？这里我敢保证肯定不是这样子的。其实，只要我们看一看ViewPager2的结构大概就能知道了。ViewPager2被声明了final，意味着我们不能像继承ViewPager一样来修改ViewPager2。如果官方在ViewPager2内部自行处理了滑动冲突，那么如果有特殊的需求，需要根据我们自己的情况来处理ViewPager2的滑动，那么官方写的处理滑动冲突的代码是不是会影响到我们自己的需求？所以我觉得也正因为这样，干脆不做任何处理，全权交给了开发者自行解决。

二、滑动冲突的处理方案

既然官方不给我们处理，那就需要我们自己动手了。在开始之前我们先来了解以下处理滑动冲突的两种方案。既然出现滑动冲突，那么一定是由于两个布局相互嵌套引起的
。既然是两个布局，那么我们就可以分为两个方向来处理。即所谓的 外部拦截法 和 内部拦截法 。

1.外部拦截法

所谓的“外部拦截法“中的外部是指出现滑动冲突的这两个布局的外层。我们知道，一个事件序列是由Parent View先获取到的，如果Parent
View不拦截事件那么才会交由子View去处理。既然是外层先获知事件，那外层View根据自身情况来决定是否要拦截事件不就行了吗？因此外部拦截法的实现是非常简单的，大概思路如下：

 1public boolean onInterceptTouchEvent(MotionEvent event) {
 2        boolean intercepted = false;
 3        int x = (int) event.getX();
 4        int y = (int) event.getY();
 5        switch (event.getAction()) {
 6            case MotionEvent.ACTION_DOWN: {
 7                intercepted = false;
 8                break;
 9            }
10            case MotionEvent.ACTION_MOVE: {
11                if (needIntercept) { // 这里根据需求判断是否需要拦截
12                    intercepted = true;
13                } else {
14                    intercepted = false;
15                }
16                break;
17            }
18            case MotionEvent.ACTION_UP: {
19                intercepted = false;
20                break;
21            }
22            default:
23                break;
24        }
25        mLastXIntercept = x;
26        mLastYIntercept = y;
27        return intercepted;
28    }

2.内部拦截法

所谓的”内部拦截法“指的是对内部的View做文章，让内部View决定是不是拦截事件。但是现在就有问题了，你怎么知道外部的View是不是要拦截事件啊？？如果外部View把事件拦截了，内部的View岂不是连西北风都喝不到了？别着急，Google官方当然有考虑到这种情况。在ViewGroup中有一个叫requestDisallowInterceptTouchEvent的方法，这个方法接受一个boolean值，意思是是否要禁止ViewGroup拦截当前事件。如果是true的话那么该ViewGroup则无法对事件进行拦截。有了这个方法那我们就可以让内部View大显神通了。来看下内部拦截法的代码：

 1public boolean dispatchTouchEvent(MotionEvent event) {
 2        int x = (int) event.getX();
 3        int y = (int) event.getY();
 4
 5        switch (event.getAction()) {
 6            case MotionEvent.ACTION_DOWN: {
 7                // 禁止parent拦截down事件
 8                parent.requestDisallowInterceptTouchEvent(true);
 9                break;
10            }
11            case MotionEvent.ACTION_MOVE: {
12                int deltaX = x - mLastX;
13                int deltaY = y - mLastY;
14                if (disallowParentInterceptTouchEvent) { // 根据需求条件来决定是否让Parent View拦截事件。
15                    parent.requestDisallowInterceptTouchEvent(false);
16                }
17                break;
18            }
19            case MotionEvent.ACTION_UP: {
20                break;
21            }
22            default:
23                break;
24        }
25
26        mLastX = x;
27        mLastY = y;
28        return super.dispatchTouchEvent(event);
29    }

这么处理之后，两个嵌套View就可以和谐工作了。

下面是来自外部View和内部View的对话。

外部View：”我想拦截事件！“

内部View：”不，你不想。这事件我要定了，耶稣都留不住他。“

三、处理ViewPager2的滑动冲突

上一章讲了滑动冲突处理的两种方案，那么本章我们就来解决ViewPager2的滑动冲突。首先，应该确定一下存在在哪些需要拦截和不需要拦截的边界条件。在写这篇文章之前，我Google搜索了一下ViewPager2的滑动冲突处理方案，关于这方面的文章还不算少，不过大部分的文章对于ViewPager2的滑动冲突处理考虑的都不够完善。

下面我们详细来分析一下：

如果设置了userInputEnable=false,那么ViewPager2不应该拦截任何事件；
如果只有一个Item，那么ViewPager2也不应该拦截事件；
如果是多个Item，且当前是第一个页面，那么只能拦截向左的滑动事件，向右的滑动事件就不应该由ViewPager2拦截了；
如果是多个Item，且当前是最后一个页面，那么只能拦截向右的滑动事件，向左的滑动事件不应该由当前的ViewPager2拦截；
如果是多个Item，且是中间页面，那么无论向左还是向右的事件都应该由ViewPager2拦截；
最后，由于ViewPager2是支持竖直滑动的，那么竖直滑动也应该考虑以上条件。

分析完了边界条件之后，我们看下应该使用哪种方案来处理滑动冲突？很明显，这里应该使用内部拦截法处理。但是，由于ViewPager2被设置成了final，我们无法通过继承的方式来处理，因此就需要我们在ViewPager2外部加一层自定义的Layout。这层Layout其实相当于夹在了内层View和外层View的中间，其实就是这层Layout就变成了内层。好了，废话不多说了，直接贴代码了。

  1class ViewPager2Container @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : RelativeLayout(context, attrs, defStyleAttr) {
  2
  3    private var mViewPager2: ViewPager2? = null
  4    private var disallowParentInterceptDownEvent = true
  5    private var startX = 0
  6    private var startY = 0
  7
  8    override fun onFinishInflate() {
  9        super.onFinishInflate()
 10        for (i in 0 until childCount) {
 11            val childView = getChildAt(i)
 12            if (childView is ViewPager2) {
 13                mViewPager2 = childView
 14                break
 15            }
 16        }
 17        if (mViewPager2 == null) {
 18            throw IllegalStateException("The root child of ViewPager2Container must contains a ViewPager2")
 19        }
 20    }
 21
 22    override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
 23        val doNotNeedIntercept = (!mViewPager2!!.isUserInputEnabled
 24                || (mViewPager2?.adapter != null
 25                && mViewPager2?.adapter!!.itemCount <= 1))
 26        if (doNotNeedIntercept) {
 27            return super.onInterceptTouchEvent(ev)
 28        }
 29        when (ev.action) {
 30            MotionEvent.ACTION_DOWN -> {
 31                startX = ev.x.toInt()
 32                startY = ev.y.toInt()
 33                parent.requestDisallowInterceptTouchEvent(!disallowParentInterceptDownEvent)
 34            }
 35            MotionEvent.ACTION_MOVE -> {
 36                val endX = ev.x.toInt()
 37                val endY = ev.y.toInt()
 38                val disX = abs(endX - startX)
 39                val disY = abs(endY - startY)
 40                if (mViewPager2!!.orientation == ViewPager2.ORIENTATION_VERTICAL) {
 41                    onVerticalActionMove(endY, disX, disY)
 42                } else if (mViewPager2!!.orientation == ViewPager2.ORIENTATION_HORIZONTAL) {
 43                    onHorizontalActionMove(endX, disX, disY)
 44                }
 45            }
 46            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> parent.requestDisallowInterceptTouchEvent(false)
 47        }
 48        return super.onInterceptTouchEvent(ev)
 49    }
 50
 51    private fun onHorizontalActionMove(endX: Int, disX: Int, disY: Int) {
 52        if (mViewPager2?.adapter == null) {
 53            return
 54        }
 55        if (disX > disY) {
 56            val currentItem = mViewPager2?.currentItem
 57            val itemCount = mViewPager2?.adapter!!.itemCount
 58            if (currentItem == 0 && endX - startX > 0) {
 59                parent.requestDisallowInterceptTouchEvent(false)
 60            } else {
 61                parent.requestDisallowInterceptTouchEvent(currentItem != itemCount - 1
 62                        || endX - startX >= 0)
 63            }
 64        } else if (disY > disX) {
 65            parent.requestDisallowInterceptTouchEvent(false)
 66        }
 67    }
 68
 69    private fun onVerticalActionMove(endY: Int, disX: Int, disY: Int) {
 70        if (mViewPager2?.adapter == null) {
 71            return
 72        }
 73        val currentItem = mViewPager2?.currentItem
 74        val itemCount = mViewPager2?.adapter!!.itemCount
 75        if (disY > disX) {
 76            if (currentItem == 0 && endY - startY > 0) {
 77                parent.requestDisallowInterceptTouchEvent(false)
 78            } else {
 79                parent.requestDisallowInterceptTouchEvent(currentItem != itemCount - 1
 80                        || endY - startY >= 0)
 81            }
 82        } else if (disX > disY) {
 83            parent.requestDisallowInterceptTouchEvent(false)
 84        }
 85    }
 86
 87    /**
 88     * 设置是否允许在当前View的{@link MotionEvent#ACTION_DOWN}事件中禁止父View对事件的拦截，该方法
 89     * 用于解决CoordinatorLayout+CollapsingToolbarLayout在嵌套ViewPager2Container时引起的滑动冲突问题。
 90     *
 91     * 设置是否允许在ViewPager2Container的{@link MotionEvent#ACTION_DOWN}事件中禁止父View对事件的拦截，该方法
 92     * 用于解决CoordinatorLayout+CollapsingToolbarLayout在嵌套ViewPager2Container时引起的滑动冲突问题。
 93     *
 94     * @param disallowParentInterceptDownEvent 是否允许ViewPager2Container在{@link MotionEvent#ACTION_DOWN}事件中禁止父View拦截事件，默认值为false
 95     *                          true 不允许ViewPager2Container在{@link MotionEvent#ACTION_DOWN}时间中禁止父View的时间拦截，
 96     *                          设置disallowIntercept为true可以解决CoordinatorLayout+CollapsingToolbarLayout的滑动冲突
 97     *                          false 允许ViewPager2Container在{@link MotionEvent#ACTION_DOWN}时间中禁止父View的时间拦截，
 98     */
 99    fun disallowParentInterceptDownEvent(disallowParentInterceptDownEvent: Boolean) {
100        this.disallowParentInterceptDownEvent = disallowParentInterceptDownEvent
101    }
102}

上边代码限于篇幅我就不做过多解释了，注意一下在onFinishInflate中我们通过循环，遍历了ViewPager2Container的所有子View，如果没有找到ViewPager2就抛出异常。另外，disallowParentInterceptDownEvent方法注释写的比较详细就不多说了。

使用方法也很简单，直接用ViewPager2Container包裹ViewPager2即可：

 1<com.zhpan.sample.viewpager2.ViewPager2Container
 2        android:layout_width="match_parent"
 3        android:layout_height="match_parent"
 4        app:layout_constraintBottom_toBottomOf="parent"
 5        app:layout_constraintLeft_toLeftOf="parent"
 6        app:layout_constraintRight_toRightOf="parent"
 7        app:layout_constraintTop_toTopOf="parent">
 8
 9        <androidx.viewpager2.widget.ViewPager2
10            android:id="@+id/view_pager2"
11            android:layout_width="match_parent"
12            android:layout_height="match_parent" />
13
14        <com.zhpan.indicator.IndicatorView
15            android:id="@+id/indicatorView"
16            android:layout_centerHorizontal="true"
17            android:layout_alignParentBottom="true"
18            android:layout_margin="@dimen/dp_20"
19            android:layout_width="wrap_content"
20            android:layout_height="wrap_content"/>
21
22    </com.zhpan.sample.viewpager2.ViewPager2Container>

https://github.com/zhpanvip/BannerViewPager

·················END·················

推荐阅读
• 耗时2年，Android进阶三部曲第三部《Android进阶指北》出版！
• 『BATcoder』做了多年安卓还没编译过源码？一个视频带你玩转！
• 写一本技术书到底有多赚？实话告诉你200万轻轻松松！
• 重生！进阶三部曲第一部《Android进阶之光》第2版 出版！

为了防止失联，欢迎关注我的小号

  微信改了推送机制，真爱请星标本公号👇