CollapsingToolbarLayout无法在作为底部弹窗的NestedScrollView后方完全折叠的问题

我最近在做一个这样的布局需求：

• 顶部有一张占屏幕30%高度的图片，初始状态下保持固定不动
• 图片下方的区域要像底部弹窗（bottom sheet）那样，滚动的时候能慢慢覆盖住顶部图片，直到占满整个屏幕

我尝试用AppBarLayout + CollapsingToolbarLayout + NestedScrollView来实现，但折腾了好久都没搞定——顶部的图片总是没法完全被折叠覆盖，滚动到顶的时候还是会露出一部分，完全达不到我想要的“底部弹窗铺满全屏”的效果。

后来查了些资料，终于找到问题所在，给你分享一下可行的解决方案：

关键布局调整&代码示例 #

核心就是要让CollapsingToolbarLayout能彻底收缩到高度为0，同时确保滚动组件和它的联动是正常的。下面是调整后的完整布局代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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">

    <!-- 顶部图片区域，占屏幕30%高度 -->
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="30vh"
        android:background="@android:color/transparent">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            <!-- 允许滚动并彻底收缩，直到最小高度 -->
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            <!-- 把最小高度设为0，这是完全折叠的关键！ -->
            app:minHeight="0dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/your_top_image"
                <!-- 视差折叠模式，滚动时图片会渐隐，效果更自然 -->
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

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

    <!-- 底部可滚动的"弹窗"区域 -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        <!-- 必须设置这个behavior，才能和AppBarLayout联动 -->
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        <!-- 避免内容被顶部区域裁剪 -->
        android:clipToPadding="false">

        <!-- 这里放你的滚动内容，可以根据需求替换成任意布局 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="底部弹窗标题"
                android:textSize="20sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="这里是弹窗里的滚动内容，多加点内容才能看出滚动效果哦～\n\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行\n测试行"
                android:textSize="16sp"
                android:layout_marginTop="16dp"
                android:lineSpacingExtra="4dp" />
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

几个必须注意的点 #

1. CollapsingToolbarLayout的minHeight一定要设为0：默认情况下它可能有默认的最小高度（比如适配状态栏或者标题栏），这就导致没法完全折叠，设为0才能让它彻底收起来。
2. 滚动行为绑定不能忘：NestedScrollView必须添加app:layout_behavior="@string/appbar_scrolling_view_behavior"，不然它和AppBarLayout完全没有联动，自然不会触发折叠效果。
3. AppBarLayout的高度设置：用30vh直接实现30%屏幕高度的需求，比写固定dp更适配不同尺寸的设备。

我自己按这个代码改了之后，完美实现了需求——初始状态顶部图片固定，滚动底部内容时，图片会慢慢往上收，直到完全被底部内容覆盖，整个屏幕都是底部弹窗的内容，完全符合预期！

备注：内容来源于stack exchange，提问作者Player91