TabLayout被ViewPager2遮盖部分导致Tab难选中

TabLayout 与 ViewPager2 重叠导致触摸事件冲突的核心原因在于 Android 触摸事件分发机制 与 布局层级 的综合作用：

布局层级与视觉覆盖：TabLayout 与 ViewPager2 在布局中存在区域重叠，且 ViewPager2 位于 TabLayout 的上方（布局顺序靠后或 elevation 更高），导致触摸事件优先分发至 ViewPager2。
触摸事件拦截与消费 ：ViewPager2 基于 RecyclerView 实现，其onInterceptTouchEvent会根据滑动手势（如ACTION_MOVE的位移阈值）判断是否拦截事件。在重叠区域内，即使用户意图点击 TabLayout，轻微的滑动也会触发 ViewPager2 的事件拦截；即便未拦截，若 ViewPager2 或其子 View 消费了ACTION_DOWN后续事件，TabLayout 也无法响应点击。
布局参数错误 ：XML 中错误的margin、padding或约束设置（如 ViewPager2 的topMargin为负），导致两控件物理区域重叠。

解决方案

方案 1：调整布局，避免重叠（推荐）

使用ConstraintLayout或LinearLayout确保 TabLayout 与 ViewPager2 垂直排列，无区域重叠。

xml 复制代码

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/tabLayout"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

方案 2：若设计需要重叠，调整 View 层级与事件分发

若业务要求 TabLayout 部分覆盖在 ViewPager2 之上，通过以下方式解决：

**2.1 提升 TabLayout 的层级（z-order）**将 TabLayout 的elevation设置为高于 ViewPager2，或在布局中把 TabLayout 放在 ViewPager2 之后。

xml 复制代码

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="8dp" />

</FrameLayout>

2.2 自定义 ViewPager2，过滤重叠区域的事件自定义 ViewPager2，在触摸事件位于 TabLayout 区域时，不拦截 / 消费事件。

kotlin 复制代码

class TouchFriendlyViewPager2 @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null
) : ViewPager2(context, attrs) {

    var associatedTabLayout: TabLayout? = null

    override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
        if (isTouchInTabLayout(ev)) return false
        return super.onInterceptTouchEvent(ev)
    }

    override fun onTouchEvent(ev: MotionEvent): Boolean {
        if (isTouchInTabLayout(ev)) return false
        return super.onTouchEvent(ev)
    }

    private fun isTouchInTabLayout(ev: MotionEvent): Boolean {
        val tab = associatedTabLayout ?: return false
        val tabLocation = IntArray(2)
        tab.getLocationOnScreen(tabLocation)
        return ev.rawX >= tabLocation[0] && ev.rawX <= tabLocation[0] + tab.width &&
               ev.rawY >= tabLocation[1] && ev.rawY <= tabLocation[1] + tab.height
    }
}

在代码中关联：

kotlin 复制代码

viewPager2.associatedTabLayout = tabLayout

触摸事件调用过程时序图

1. 问题场景（ViewPager2 拦截事件）

2. 解决后场景（TabLayout 处理事件）

总结

优先通过调整布局 避免重叠；若设计必须重叠，则通过提升 TabLayout 层级 或自定义 ViewPager2 过滤事件解决。核心是让 TabLayout 优先接收并处理触摸事件。