0%

Android基础-ViewPager2滑动冲突处理

为什么 ViewPager 没有滑动冲突

可能你会有疑问,在 ViewPager 时代,ViewPager 嵌套 ViewPager 并没有出现过滑动冲突。但为什么在升级了 ViewPager2 之后就出现了滑动冲突呢?

既然如此,我们看下 ViewPager 的 onInterceptTouchEvent 方法(为了方便阅读,代码做了删减):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
      @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 的时候通过 requestParentDisallowInterceptTouchEvent(true) 禁止 Parent View 拦截事件,以便后续的事件还能传到 ViewPager 中来;在 ACTION_MOVE 的时候也会有 水平方向上的滑动距离大于竖直方向的2倍 条件来判断是否需要禁止 Parent View 拦截事件。

所以 ViewPager 时我们只管用,无需担心滑动冲突的问题。再看下 ViewPager2 的 onInterceptTouchEvent 方法:

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

它并没有为我们做冲突处理!为什么呢?因为 ViewPager2 被声明成 final 的,并不能继承,假如它像 ViewPager 一样官方给处理了滑动冲突,那么如果有特殊要求的情况下,官方的冲突处理可能会妨碍我们自己写的冲突处理,所以全权交给开发者自己处理了。

滑动冲突的处理方案

在处理滑动冲突之前先了解处理滑动冲突的两种方案。

外部拦截法

所谓的 “外部拦截法” 这个 “外部” 是指 出现滑动冲突的这两个布局的外层。因为,一个事件序列是由 Parent View 先获取的,如果 Parent View 不拦截事件才会交给子 View 去处理,既然外部先获知事件,那外层 View 根据情况来决定是否要拦截事件就行了。大概思路如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 1     public 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 }

首先也是在 ACTION_DOWN 中不做拦截,其次是在 ACTION_MOVE 中根据需要拦截。

内部拦截法

所谓“内部拦截法”指的是对内部的View 做文章,让内部 View 决定是不是拦截事件。因为 Google 官方提供了 requestDisallowInterceptTouchEvent 方法,它接收一个 Boolean 值,意思是是否要禁止父 ViewGroup 拦截当前事件,如果是 true 的话,父 ViewGroup 就无法对事件进行拦截,看下具体实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 1     public 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 }

在 dispatchTouchEvent 的 ACTION_DOWN 和 ACTION_MOVE 行为中,分别执行相应动作来判断是否允许 Parent View 拦截自己的事件。

处理 ViewPager2 的滑动冲突

在解决冲突之前,我们首先要确定下存在哪些需要拦截哪些不需要拦截的边界条件,来分析下:

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

分析完成后,我们看下应该使用哪种方案来处理滑动冲突,很明显,我们应该使用 内部拦截法,但是,由于 ViewPager2 被设置为了 final ,我们无法通过继承方式来处理。

所以,我们需要在 ViewPager2 外部包裹一层自定义的 Layout,在它里面实现事件拦截逻辑,用它来实现内部拦截!看代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
  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中我们通过循环,遍历自定义 Layout 的所有子 View ,如果没有找到 ViewPager2 就抛出异常

以上内容参考自刘望舒的公众号,如果链接失效,可以查看原文赌一包辣条的博客

谢谢你的鼓励