Android实现CollapsingToolbarLayout粘性头部，底部内容滚动覆盖ViewPager

需求明确 #

• ViewPager区域（头部图片）保持固定不折叠
• 底部滚动内容向上滚动时可覆盖ViewPager
• ViewPager需正常支持滑动切换

可行实现方案 #

核心思路是将ViewPager作为底层固定视图，上层放置透明背景的AppBarLayout和滚动内容，同时解决上层视图对ViewPager触摸事件的拦截问题。

1. 调整布局层级

把ViewPager从CollapsingToolbarLayout中移出，放在CoordinatorLayout最底层以保持固定；AppBarLayout设置透明背景，仅承载Toolbar和顶部辅助内容；滚动内容通过app:layout_behavior关联AppBarLayout，实现滚动覆盖ViewPager的效果。

布局代码示例：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 底层粘性ViewPager，始终固定显示 -->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="250dp" />

    <!-- 透明背景的AppBarLayout，仅承载Toolbar和顶部内容 -->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- 固定在顶部的Toolbar -->
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

            <!-- 你的顶部辅助内容布局 -->
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <!-- 这里添加你的顶部内容 -->
            </androidx.constraintlayout.widget.ConstraintLayout>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <!-- 底部滚动内容，滚动时会覆盖ViewPager -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- 你的滚动内容布局 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="@android:color/white">
            <!-- 填充长内容用于测试滚动 -->
        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

2. 解决ViewPager触摸拦截问题

由于AppBarLayout在ViewPager上层，会默认拦截触摸事件导致ViewPager无法滑动。通过判断触摸区域，将ViewPager范围内的触摸事件放行：

Kotlin代码示例（在Activity/Fragment中）：

val viewPager = findViewById<ViewPager2>(R.id.viewPager)
val appBarLayout = findViewById<AppBarLayout>(R.id.appBarLayout)

appBarLayout.setOnTouchListener { _, event ->
    val rect = Rect()
    viewPager.getGlobalVisibleRect(rect)
    // 判断触摸点是否落在ViewPager范围内
    if (rect.contains(event.rawX.toInt(), event.rawY.toInt())) {
        // 通知父布局不要拦截事件，让ViewPager接收
        viewPager.parent.requestDisallowInterceptTouchEvent(true)
        false
    } else {
        // 非ViewPager区域，正常处理AppBar的触摸逻辑
        false
    }
}

为什么之前的尝试无效？ #

• 将ViewPager放在CollapsingToolbarLayout内时，scroll|exitUntilCollapsed会让整个Collapsing区域跟随滚动折叠，pin仅能固定内部单个子View（如Toolbar），无法让整个ViewPager保持固定。
• 直接将ViewPager移出Collapsing后，上层AppBarLayout会拦截所有触摸事件，导致ViewPager无法响应滑动操作，必须通过触摸事件拦截逻辑解决。

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