垂直方向ViewPager2子页面无法横向滚动的解决方案求助

核心问题分析 #

垂直方向的ViewPager2会默认拦截触摸事件，容易抢占子页面横向滚动控件的触摸响应；同时你的子页面布局缺少横向滚动容器，这是无法横向滚动的直接原因。

步骤1：给子页面添加横向滚动容器 #

将子页面的横向内容放入HorizontalScrollView或横向布局的RecyclerView中，示例如下：

使用HorizontalScrollView的子页面布局 #

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <!-- 横向排列的内容控件 -->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="横向内容项1"
                android:padding="16dp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="横向内容项2"
                android:padding="16dp"/>
            <!-- 更多横向内容 -->
        </LinearLayout>
    </HorizontalScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

使用横向RecyclerView的代码设置 #

如果用RecyclerView承载横向内容，需要在Adapter中设置横向布局管理器：

// 在Adapter的onCreateViewHolder方法中
val recyclerView = itemView.findViewById<RecyclerView>(R.id.child_recycler)
recyclerView.layoutManager = LinearLayoutManager(itemView.context, LinearLayoutManager.HORIZONTAL, false)

步骤2：自定义ViewPager2处理事件拦截 #

重写ViewPager2的触摸事件拦截逻辑，只拦截纵向滑动，放行横向滑动事件：

class VerticalViewPager2(context: Context, attrs: AttributeSet?) : ViewPager2(context, attrs) {
    private var startX = 0f
    private var startY = 0f

    override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                startX = event.x
                startY = event.y
                parent.requestDisallowInterceptTouchEvent(true)
            }
            MotionEvent.ACTION_MOVE -> {
                val dx = event.x - startX
                val dy = event.y - startY
                // 判断滑动方向：横向滑动则不拦截，交给子控件处理
                if (kotlin.math.abs(dx) > kotlin.math.abs(dy)) {
                    parent.requestDisallowInterceptTouchEvent(false)
                    return false
                } else {
                    parent.requestDisallowInterceptTouchEvent(true)
                    return super.onInterceptTouchEvent(event)
                }
            }
            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
                parent.requestDisallowInterceptTouchEvent(false)
            }
        }
        return super.onInterceptTouchEvent(event)
    }
}

然后在布局文件中替换原ViewPager2为自定义的VerticalViewPager2：

<com.yourpackage.VerticalViewPager2
    android:id="@+id/viewPager"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/ticker" />

步骤3：确认ViewPager2的垂直方向设置 #

在代码中确保ViewPager2设置为垂直滚动：

viewPager.orientation = ViewPager2.ORIENTATION_VERTICAL

内容的提问来源于stack exchange，提问作者TechBee