这可能是 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
推荐阅读
• 耗时2年,Android进阶三部曲第三部《Android进阶指北》出版!
为了防止失联,欢迎关注我的小号
微信改了推送机制,真爱请星标本公号👇