ViewPager2滑動沖突解決方案

更新時間：2020年12月30日 09:30:46 作者：我賭一包辣條

這篇文章主要介紹了ViewPager2滑動沖突解決方案，幫助大家更好的進行Android開發(fā)，感興趣的朋友可以了解下

自去年12月份ViewPager2正式版發(fā)布以后，ViewPager2已經(jīng)逐漸開始替代舊版本的ViewPager。許多開發(fā)者也已經(jīng)在項目中使用了ViewPager2。相比ViewPager，ViewPager2的功能不可謂不強大，我在之前寫過的一篇文章《學(xué)不動也要學(xué)！深入了解ViewPager2 》中對ViewPager2的使用做過詳細的講解。但是，由于當(dāng)時沒有太多實戰(zhàn)，所以并沒有發(fā)現(xiàn)ViewPager2的嵌套使用存在嚴(yán)重的滑動沖突。直到今年三月份用ViewPager2重構(gòu)BannerViewPager的時候才發(fā)現(xiàn)這個問題。因此，在BVP 3.0版本中額外對ViewPager2做了滑動沖突處理，效果還算差強人意。另外，曾在論壇上看到過不少ViewPager2滑動沖突的求助帖子，甚至還有同學(xué)因為搜索ViewPager2滑動沖突而找到了BannerViewPager的Github主頁。既然如此，不如寫篇文章將BVP處理滑動沖突的經(jīng)驗分享給大家，沒準(zhǔn)還能漲知 (fěn) 識 **(sī)**，嘿嘿嘿。

一、為什么ViewPager沒有滑動沖突？

不知道你是否有這個疑問，在ViewPager時代，ViewPager嵌套ViewPager并沒有出現(xiàn)過滑動沖突?？墒菫槭裁丛赩iewPager的升級版ViewPager2中卻出現(xiàn)了滑動沖突呢？想要搞清楚這個問題就需要我們深入到ViewPager和ViewPager2的內(nèi)部分析一下它們的源碼了。

我們知道，滑動沖突是需要在onInterceptTouchEvent方法中進行處理的，根據(jù)自身條件來決定是否要攔截事件。在ViewPager的源碼中看到以下代碼(方便閱讀，代碼做了刪減)：

@Override
 public boolean onInterceptTouchEvent(MotionEvent ev) {

  final int action = ev.getAction() & MotionEvent.ACTION_MASK;
  if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {
  	// 在事件取消或者抬起手指后重置狀態(tài)
   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中根據(jù)一些判斷條件調(diào)用了requestParentDisallowInterceptTouchEvent(true)方法來禁止Parent View攔截事件，也就是說ViewPager已經(jīng)幫我們處理了滑動沖突，所以我們只管用即可，無需擔(dān)心滑動沖突問題。

現(xiàn)在，我們轉(zhuǎn)到ViewPager2中，翻閱源碼發(fā)現(xiàn)只有在RecyclerView 的實現(xiàn)類中有onInterceptTouchEvent的相關(guān)方法，而且這句代碼僅僅是處理禁用了用戶輸入的邏輯！

private class RecyclerViewImpl extends RecyclerView {

  .... // 省略部分代碼

  @Override
  public boolean onInterceptTouchEvent(MotionEvent ev) {
   return isUserInputEnabled() && super.onInterceptTouchEvent(ev);
  }
 }

也就是說ViewPager2其實并沒有幫我們處理滑動沖突！這是為什么呢？難道是ViewPager2的開發(fā)者們把這件事忘了？這里我敢保證肯定不是這樣子的。其實，只要我們看一看ViewPager2的結(jié)構(gòu)大概就能知道了。ViewPager2被聲明了final，意味著我們不能像繼承ViewPager一樣來修改ViewPager2。如果官方在ViewPager2內(nèi)部自行處理了滑動沖突，那么如果有特殊的需求，需要根據(jù)我們自己的情況來處理ViewPager2的滑動，那么官方寫的處理滑動沖突的代碼是不是會影響到我們自己的需求？所以我覺得也正因為這樣，干脆不做任何處理，全權(quán)交給了開發(fā)者自行解決。

二、滑動沖突的處理方案

既然官方不給我們處理，那就需要我們自己動手了。在開始之前我們先來了解以下處理滑動沖突的兩種方案。既然出現(xiàn)滑動沖突，那么一定是由于兩個布局相互嵌套引起的。既然是兩個布局，那么我們就可以分為兩個方向來處理。即所謂的外部攔截法和內(nèi)部攔截法。

1.外部攔截法

所謂的“外部攔截法“中的外部是指出現(xiàn)滑動沖突的這兩個布局的外層。我們知道，一個事件序列是由Parent View先獲取到的，如果Parent View不攔截事件那么才會交由子View去處理。既然是外層先獲知事件，那外層View根據(jù)自身情況來決定是否要攔截事件不就行了嗎？因此外部攔截法的實現(xiàn)是非常簡單的，大概思路如下：

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) { // 這里根據(jù)需求判斷是否需要攔截
     intercepted = true;
    } else {
     intercepted = false;
    }
    break;
   }
   case MotionEvent.ACTION_UP: {
    intercepted = false;
    break;
   }
   default:
    break;
  }
  mLastXIntercept = x;
  mLastYIntercept = y;
  return intercepted;
 }

2.內(nèi)部攔截法

所謂的”內(nèi)部攔截法“指的是對內(nèi)部的View做文章，讓內(nèi)部View決定是不是攔截事件。但是現(xiàn)在就有問題了，你怎么知道外部的View是不是要攔截事件啊？？如果外部View把事件攔截了，內(nèi)部的View豈不是連西北風(fēng)都喝不到了？別著急，Google官方當(dāng)然有考慮到這種情況。在ViewGroup中有一個叫requestDisallowInterceptTouchEvent的方法，這個方法接受一個boolean值，意思是是否要禁止ViewGroup攔截當(dāng)前事件。如果是true的話那么該ViewGroup則無法對事件進行攔截。有了這個方法那我們就可以讓內(nèi)部View大顯神通了。來看下內(nèi)部攔截法的代碼：

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) { // 根據(jù)需求條件來決定是否讓Parent View攔截事件。
     parent.requestDisallowInterceptTouchEvent(false);
    }
    break;
   }
   case MotionEvent.ACTION_UP: {
    break;
   }
   default:
    break;
  }

  mLastX = x;
  mLastY = y;
  return super.dispatchTouchEvent(event);
 }

這么處理之后，兩個嵌套View就可以和諧工作了。

下面是來自外部View和內(nèi)部View的對話。

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

內(nèi)部View：”不，你不想。這事件我要定了，耶穌都留不住他。

三、處理ViewPager2的滑動沖突

上一章講了滑動沖突處理的兩種方案，那么本章我們就來解決ViewPager2的滑動沖突。首先，應(yīng)該確定一下存在在哪些需要攔截和不需要攔截的邊界條件。在寫這篇文章之前，我Google搜索了一下ViewPager2的滑動沖突處理方案，關(guān)于這方面的文章還不算少，不過大部分的文章對于ViewPager2的滑動沖突處理考慮的都不夠完善。

下面我們詳細來分析一下：

如果設(shè)置了userInputEnable=false,那么ViewPager2不應(yīng)該攔截任何事件；
如果只有一個Item，那么ViewPager2也不應(yīng)該攔截事件；
如果是多個Item，且當(dāng)前是第一個頁面，那么只能攔截向左的滑動事件，向右的滑動事件就不應(yīng)該由ViewPager2攔截了；
如果是多個Item，且當(dāng)前是最后一個頁面，那么只能攔截向右的滑動事件，向左的滑動事件不應(yīng)該由當(dāng)前的ViewPager2攔截；
如果是多個Item，且是中間頁面，那么無論向左還是向右的事件都應(yīng)該由ViewPager2攔截；
最后，由于ViewPager2是支持豎直滑動的，那么豎直滑動也應(yīng)該考慮以上條件。

分析完了邊界條件之后，我們看下應(yīng)該使用哪種方案來處理滑動沖突？很明顯，這里應(yīng)該使用內(nèi)部攔截法處理。但是，由于ViewPager2被設(shè)置成了final，我們無法通過繼承的方式來處理，因此就需要我們在ViewPager2外部加一層自定義的Layout。這層Layout其實相當(dāng)于夾在了內(nèi)層View和外層View的中間，其實就是這層Layout就變成了內(nèi)層。好了，廢話不多說了，直接貼代碼了。

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)
  }
 }

 /**
  * 設(shè)置是否允許在當(dāng)前View的{@link MotionEvent#ACTION_DOWN}事件中禁止父View對事件的攔截，該方法
  * 用于解決CoordinatorLayout+CollapsingToolbarLayout在嵌套ViewPager2Container時引起的滑動沖突問題。
  *
  * 設(shè)置是否允許在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的時間攔截，
  *       設(shè)置disallowIntercept為true可以解決CoordinatorLayout+CollapsingToolbarLayout的滑動沖突
  *       false 允許ViewPager2Container在{@link MotionEvent#ACTION_DOWN}時間中禁止父View的時間攔截，
  */
 fun disallowParentInterceptDownEvent(disallowParentInterceptDownEvent: Boolean) {
  this.disallowParentInterceptDownEvent = disallowParentInterceptDownEvent
 }
}

上邊代碼限于篇幅我就不做過多解釋了，注意一下在onFinishInflate中我們通過循環(huán)，遍歷了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>

這是關(guān)于ViewPager2滑動出沖突的處理方案，當(dāng)然，由于BannerViewPager支持循環(huán)輪播，所以BannerViewPager的滑動沖突處理相對會更麻煩些。如果有興趣的同學(xué)可以點擊查看BannerViewPager的源碼。

同時，ViewPager2Container 的源碼我也放到了Github，需要用到的可以自取。

以上就是ViewPager2滑動沖突解決方案的詳細內(nèi)容，更多關(guān)于ViewPager2滑動沖突解決的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: