Android開發:這可能是ViewPager2滑動衝突最全的處理方案,內外兼修,解決衝突!

背景

自去年12月份ViewPager2正式版發佈以後,ViewPager2已經逐漸開始替代舊版本的ViewPager。許多開發者也已經在項目中使用了ViewPager2。相比ViewPager,ViewPager2的功能不可謂不強大。

我在之前寫過的一篇文章

學不動也要學!深入瞭解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的源碼中看到以下代碼(方便閱讀,代碼做了刪減):

@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就變成了內層。好了,廢話不多說了,直接貼代碼了。

    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的源碼(https://github.com/zhpanvip/AndroidSample/blob/master/app/src/main/java/com/zhpan/sample/viewpager2/ViewPager2Container.kt)。

同時,ViewPager2Container(https://github.com/zhpanvip/AndroidSample/blob/master/app/src/main/java/com/zhpan/sample/viewpager2/ViewPager2Container.kt)的源碼我也放到了Github,需要用到的可以自取。

原文:https://juejin.cn/post/6911456860533063688

最後

不用多說,相信大家都有一個共識:無論什麼行業,最牛逼的人肯定是站在金字塔端的人。所以,想做一個牛逼的程序員,那麼就要讓自己站的更高,成爲技術大牛並不是一朝一夕的事情,需要時間的沉澱和技術的積累。

關於這一點,在我當時確立好Android方向時,就已經開始梳理自己的成長路線了,包括技術要怎麼系統地去學習,都列得非常詳細。

這裏最後分享耗時一年多整理的一系列Android學習資源:Android源碼解析、Android第三方庫源碼筆記、Android進階架構師七大專題學習、歷年BAT面試題解析包、Android大佬學習筆記等等,這些內容均免費分享給大家,需要完整版的朋友,點這裏可以看到全部內容

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章