ViewPager2 嵌套 ViewPager2 解決方案

最近新業務要求,在ViewPager2 的item中,再放一個ViewPager2用來展示Banner效果。發現兩個嵌套之後,內部的ViewPager2無法滑動,首先考慮的就是滑動衝突,打算重寫ViewPager2,修改onInterceptTouchEvent方法。卻發現ViewPager2是final修飾,無法繼承重寫。只能考慮別的方法。

後來,在ViewPager2官方文檔中找到這麼不起眼的一小段

大致意思就是:ViewPager2 嵌套在相同方向的滾動View中是不能滾動的,如果需要滾動ViewPager2,就需要調用requestDisallowInterceptTouchEvent,纔可以接受到滑動事件。
而且Google還給出了方案:views-widgets-samples/NestedScrollableHost.kt at master · android/views-widgets-samples · GitHub

我把代碼也貼出來,簡單看下原理

/**
 * Layout to wrap a scrollable component inside a ViewPager2. Provided as a solution to the problem
 * where pages of ViewPager2 have nested scrollable elements that scroll in the same direction as
 * ViewPager2. The scrollable element needs to be the immediate and only child of this host layout.
 *
 * This solution has limitations when using multiple levels of nested scrollable elements
 * (e.g. a horizontal RecyclerView in a vertical RecyclerView in a horizontal ViewPager2).
 */

class NestedScrollableHost : FrameLayout {

    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)

    private var touchSlop = 0
    private var initialX = 0f
    private var initialY = 0f

    private val parentViewPager: ViewPager2?
        get() {
            var v: View? = parent as? View
            while (v != null && v !is ViewPager2) {
                v = v.parent as? View
            }
            return v as? ViewPager2
        }

    private val child: View? get() = if (childCount > 0) getChildAt(0) else null

    init {
        touchSlop = ViewConfiguration.get(context).scaledTouchSlop
    }

    private fun canChildScroll(orientation: Int, delta: Float): Boolean {
        val direction = -delta.sign.toInt()
        return when (orientation) {
            0 -> child?.canScrollHorizontally(direction) ?: false
            1 -> child?.canScrollVertically(direction) ?: false
            else -> throw IllegalArgumentException()
        }
    }

    override fun onInterceptTouchEvent(e: MotionEvent): Boolean {
        handleInterceptTouchEvent(e)
        return super.onInterceptTouchEvent(e)
    }

    private fun handleInterceptTouchEvent(e: MotionEvent) {
        val orientation = parentViewPager?.orientation ?: return
        // Early return if child can't scroll in same direction as parent
        if (!canChildScroll(orientation, -1f) && !canChildScroll(orientation, 1f)) {
            return
        }

        if (e.action == MotionEvent.ACTION_DOWN) {
            initialX = e.x
            initialY = e.y
            parent.requestDisallowInterceptTouchEvent(true)
        } else if (e.action == MotionEvent.ACTION_MOVE) {
            val dx = e.x - initialX
            val dy = e.y - initialY
            val isVpHorizontal = orientation == ORIENTATION_HORIZONTAL
            // assuming ViewPager2 touch-slop is 2x touch-slop of child
            val scaledDx = dx.absoluteValue * if (isVpHorizontal) .5f else 1f
            val scaledDy = dy.absoluteValue * if (isVpHorizontal) 1f else .5f

            if (scaledDx > touchSlop || scaledDy > touchSlop) {

                if (isVpHorizontal == (scaledDy > scaledDx)) {
                    // Gesture is perpendicular, allow all parents to intercept
                    parent.requestDisallowInterceptTouchEvent(false)
                } else {
                    // Gesture is parallel, query child if movement in that direction is possible
                    if (canChildScroll(orientation, if (isVpHorizontal) dx else dy)) {
                        // Child can scroll, disallow all parents to intercept
                        parent.requestDisallowInterceptTouchEvent(true)
                    } else {
                        // Child cannot scroll, allow all parents to intercept
                        parent.requestDisallowInterceptTouchEvent(false)
                    }
                }
            }
        }
    }
}

用法也很簡單,用NestedScrollableHost把內部ViewPager2包裹起來就可以啦。

我們主動包裹住內部ViewPager2後,就代表着需要處理事件了,所以在onInterceptTouchEvent函數中,如果接受到了DOWN事件,就需要調用requestDisallowInterceptTouchEvent通知外層的ViewPager2不要攔截事件,讓我們的Host來處理滑動事件。

等到MOVE事件進來後,判斷一下能不能順着手勢滑動內部的ViewPager2?
不能就不給內部ViewPager2後續事件了(主動通知外部ViewPager2攔截事件)。

Host的作用就相當於是一個開關在兩個ViewPager2之間。當內部的還可以滑動,就允許事件傳遞下去,當內部無法在手勢方向滑動,就通知外部View進行事件攔截。

完美解決了ViewPager2的嵌套問題。

按照這一思想,對於好多滑動衝突的問題,都可以不用繼承,直接寫一個Host來解決嵌套問題

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