自去年12月份ViewPager2正式版釋出以後，ViewPager2已經逐漸開始替代舊版本的ViewPager。許多開發者也已經在專案中使用了ViewPager2。相比ViewPager，ViewPager2的功能不可謂不強大，我在之前寫過的一篇文章《學不動也要學！深入瞭解ViewPager2 》中對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的原始碼中看到以下程式碼(方便閱讀，程式碼做了刪減)：
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
final int action = ev.getAction() & MotionEvent.ACTION_MASK;
if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {
// 在事件取消或者擡起手指後重置狀態
resetTouch();
return false;
}
switch (action) {
case MotionEvent.ACTION_MOVE: {
// 這裡判斷在水平方向上的滑動距離大於豎直方向的2倍，則認為是有效的切換頁面的滑動
if (xDiff > mTouchSlop && xDiff * 0.5f > yDiff) {
mIsBeingDragged = true;
// 禁止Parent View攔截事件，即事件要能夠傳遞到ViewPager
requestParentDisallowInterceptTouchEvent(true);
setScrollState(SCROLL_STATE_DRAGGING);
} else if (yDiff > mTouchSlop) {
mIsUnableToDrag = true;
}
break;
}
case MotionEvent.ACTION_DOWN: {
if (mScrollState == SCROLL_STATE_SETTLING
&& Math.abs(mScroller.getFinalX() - mScroller.getCurrX()) > mCloseEnough) {
// 在Down事件中禁止Parent View攔截事件，是為了事件序列能夠傳遞到ViewPager
requestParentDisallowInterceptTouchEvent(true);
setScrollState(SCROLL_STATE_DRAGGING);
} else {
completeScroll(false);
mIsBeingDragged = false;
}
break;
}
case MotionEvent.ACTION_POINTER_UP:
onSecondaryPointerUp(ev);
break;
}
return mIsBeingDragged;
}
複製程式碼可以看到在ACTION_DOWN與ACTION_MOVE中根據一些判斷條件呼叫了requestParentDisallowInterceptTouchEvent(true)方法來禁止Parent View攔截事件，也就是說ViewPager已經幫我們處理了滑動衝突，所以我們只管用即可，無需擔心滑動衝突問題。
現在，我們轉到ViewPager2中，翻閱原始碼發現只有在RecyclerView 的實現類中有onInterceptTouchEvent的相關方法，而且這句程式碼僅僅是處理禁用了使用者輸入的邏輯！
private class RecyclerViewImpl extends RecyclerView {
.... // 省略部分程式碼
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return isUserInputEnabled() && super.onInterceptTouchEvent(ev);
}
}
複製程式碼也就是說ViewPager2其實並沒有幫我們處理滑動衝突！這是為什麼呢？難道是ViewPager2的開發者們把這件事忘了？這裡我敢保證肯定不是這樣子的。其實，只要我們看一看ViewPager2的結構大概就能知道了。ViewPager2被聲明瞭final，意味著我們不能像繼承ViewPager一樣來修改ViewPager2。如果官方在ViewPager2內部自行處理了滑動衝突，那麼如果有特殊的需求，需要根據我們自己的情況來處理ViewPager2的滑動，那麼官方寫的處理滑動衝突的程式碼是不是會影響到我們自己的需求？所以我覺得也正因為這樣，乾脆不做任何處理，全權交給了開發者自行解決。
二、滑動衝突的處理方案
既然官方不給我們處理，那就需要我們自己動手了。在開始之前我們先來了解以下處理滑動衝突的兩種方案。既然出現滑動衝突，那麼一定是由於兩個佈局相互巢狀引起的 。既然是兩個佈局，那麼我們就可以分為兩個方向來處理。即所謂的外部攔截法和內部攔截法。
1.外部攔截法
所謂的“外部攔截法“中的外部是指出現滑動衝突的這兩個佈局的外層。我們知道，一個事件序列是由Parent View先獲取到的，如果Parent View不攔截事件那麼才會交由子View去處理。既然是外層先獲知事件，那外層View根據自身情況來決定是否要攔截事件不就行了嗎？因此外部攔截法的實現是非常簡單的，大概思路如下：
public boolean onInterceptTouchEvent(MotionEvent event) {
boolean intercepted = false;
int x = (int) event.getX();
int y = (int) event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
intercepted = false;
break;
}
case MotionEvent.ACTION_MOVE: {
if (needIntercept) { // 這裡根據需求判斷是否需要攔截
intercepted = true;
} else {
intercepted = false;
}
break;
}
case MotionEvent.ACTION_UP: {
intercepted = false;
break;
}
default:
break;
}
mLastXIntercept = x;
mLastYIntercept = y;
return intercepted;
}
複製程式碼2.內部攔截法
所謂的”內部攔截法“指的是對內部的View做文章，讓內部View決定是不是攔截事件。但是現在就有問題了，你怎麼知道外部的View是不是要攔截事件啊？？如果外部View把事件攔截了，內部的View豈不是連西北風都喝不到了？彆著急，Google官方當然有考慮到這種情況。在ViewGroup中有一個叫requestDisallowInterceptTouchEvent的方法，這個方法接受一個boolean值，意思是是否要禁止ViewGroup攔截當前事件。如果是true的話那麼該ViewGroup則無法對事件進行攔截。有了這個方法那我們就可以讓內部View大顯神通了。來看下內部攔截法的程式碼：
public boolean dispatchTouchEvent(MotionEvent event) {
int x = (int) event.getX();
int y = (int) event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
// 禁止parent攔截down事件
parent.requestDisallowInterceptTouchEvent(true);
break;
}
case MotionEvent.ACTION_MOVE: {
int deltaX = x - mLastX;
int deltaY = y - mLastY;
if (disallowParentInterceptTouchEvent) { // 根據需求條件來決定是否讓Parent View攔截事件。
parent.requestDisallowInterceptTouchEvent(false);
}
break;
}
case MotionEvent.ACTION_UP: {
break;
}
default:
break;
}
mLastX = x;
mLastY = y;
return super.dispatchTouchEvent(event);
}
複製程式碼這麼處理之後，兩個巢狀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就變成了內層。好了，廢話不多說了，直接貼程式碼了。
class ViewPager2Container @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : RelativeLayout(context, attrs, defStyleAttr) {
private var mViewPager2: ViewPager2? = null
private var disallowParentInterceptDownEvent = true
private var startX = 0
private var startY = 0
override fun onFinishInflate() {
super.onFinishInflate()
for (i in 0 until childCount) {
val childView = getChildAt(i)
if (childView is ViewPager2) {
mViewPager2 = childView
break
}
}
if (mViewPager2 == null) {
throw IllegalStateException("The root child of ViewPager2Container must contains a ViewPager2")
}
}
override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
val doNotNeedIntercept = (!mViewPager2!!.isUserInputEnabled
|| (mViewPager2?.adapter != null
&& mViewPager2?.adapter!!.itemCount <= 1))
if (doNotNeedIntercept) {
return super.onInterceptTouchEvent(ev)
}
when (ev.action) {
MotionEvent.ACTION_DOWN -> {
startX = ev.x.toInt()
startY = ev.y.toInt()
parent.requestDisallowInterceptTouchEvent(!disallowParentInterceptDownEvent)
}
MotionEvent.ACTION_MOVE -> {
val endX = ev.x.toInt()
val endY = ev.y.toInt()
val disX = abs(endX - startX)
val disY = abs(endY - startY)
if (mViewPager2!!.orientation == ViewPager2.ORIENTATION_VERTICAL) {
onVerticalActionMove(endY, disX, disY)
} else if (mViewPager2!!.orientation == ViewPager2.ORIENTATION_HORIZONTAL) {
onHorizontalActionMove(endX, disX, disY)
}
}
MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> parent.requestDisallowInterceptTouchEvent(false)
}
return super.onInterceptTouchEvent(ev)
}
private fun onHorizontalActionMove(endX: Int, disX: Int, disY: Int) {
if (mViewPager2?.adapter == null) {
return
}
if (disX > disY) {
val currentItem = mViewPager2?.currentItem
val itemCount = mViewPager2?.adapter!!.itemCount
if (currentItem == 0 && endX - startX > 0) {
parent.requestDisallowInterceptTouchEvent(false)
} else {
parent.requestDisallowInterceptTouchEvent(currentItem != itemCount - 1
|| endX - startX >= 0)
}
} else if (disY > disX) {
parent.requestDisallowInterceptTouchEvent(false)
}
}
private fun onVerticalActionMove(endY: Int, disX: Int, disY: Int) {
if (mViewPager2?.adapter == null) {
return
}
val currentItem = mViewPager2?.currentItem
val itemCount = mViewPager2?.adapter!!.itemCount
if (disY > disX) {
if (currentItem == 0 && endY - startY > 0) {
parent.requestDisallowInterceptTouchEvent(false)
} else {
parent.requestDisallowInterceptTouchEvent(currentItem != itemCount - 1
|| endY - startY >= 0)
}
} else if (disX > disY) {
parent.requestDisallowInterceptTouchEvent(false)
}
}
/**
* 設定是否允許在當前View的{@link MotionEvent#ACTION_DOWN}事件中禁止父View對事件的攔截，該方法
* 用於解決CoordinatorLayout+CollapsingToolbarLayout在巢狀ViewPager2Container時引起的滑動衝突問題。
*
* 設定是否允許在ViewPager2Container的{@link MotionEvent#ACTION_DOWN}事件中禁止父View對事件的攔截，該方法
* 用於解決CoordinatorLayout+CollapsingToolbarLayout在巢狀ViewPager2Container時引起的滑動衝突問題。
*
* @param disallowParentInterceptDownEvent 是否允許ViewPager2Container在{@link MotionEvent#ACTION_DOWN}事件中禁止父View攔截事件，預設值為false
* true 不允許ViewPager2Container在{@link MotionEvent#ACTION_DOWN}時間中禁止父View的時間攔截，
* 設定disallowIntercept為true可以解決CoordinatorLayout+CollapsingToolbarLayout的滑動衝突
* false 允許ViewPager2Container在{@link MotionEvent#ACTION_DOWN}時間中禁止父View的時間攔截，
*/
fun disallowParentInterceptDownEvent(disallowParentInterceptDownEvent: Boolean) {
this.disallowParentInterceptDownEvent = disallowParentInterceptDownEvent
}
}
複製程式碼上邊程式碼限於篇幅我就不做過多解釋了，注意一下在onFinishInflate中我們通過迴圈，遍歷了ViewPager2Container的所有子View，如果沒有找到ViewPager2就丟擲異常。另外，disallowParentInterceptDownEvent方法註釋寫的比較詳細就不多說了。
使用方法也很簡單，直接用ViewPager2Container包裹ViewPager2即可：
<com.zhpan.sample.viewpager2.ViewPager2Container
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/view_pager2"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.zhpan.indicator.IndicatorView
android:id="@+id/indicatorView"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_margin="@dimen/dp_20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</com.zhpan.sample.viewpager2.ViewPager2Container>
複製程式碼這是關於ViewPager2滑動出衝突的處理方案，當然，由於BannerViewPager支援迴圈輪播，所以BannerViewPager的滑動衝突處理相對會更麻煩些。如果有興趣的同學可以點選檢視BannerViewPager的原始碼。
同時，ViewPager2Container 的原始碼我也放到了Github，需要用到的可以自取。