Android中CollapsingToolbarLayout实现背景图完全折叠并固定居中用户信息的问题

看起来你遇到的问题主要是布局嵌套、滚动标志和折叠模式的配置不当导致的，我帮你梳理下问题点并给出修复后的方案：

问题分析 #

1. 背景图无法完全折叠：你的CollapsingToolbarLayout设置了exitUntilCollapsed但未指定minHeight，默认会保留最小高度；同时背景图嵌套在额外的ConstraintLayout里，且高度小于外层CollapsingToolbarLayout，导致折叠后仍有残留。
2. 用户信息无法固定顶部居中：需要固定的clUserInfo_horoscope被嵌套在背景的ConstraintLayout内部，而pin模式的View必须是CollapsingToolbarLayout的直接子View才能生效，嵌套会导致固定逻辑失效。

修复后的完整布局 #

下面是调整后的代码，我标注了关键修改点：

<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">

    <!-- AppBar with Earth background -->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:background="@android:color/transparent">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="300dp"
            <!-- 配置滚动标志：滚动+折叠至最小高度 -->
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false"
            app:contentScrim="@color/theme_black"
            app:statusBarScrim="@color/theme_black"
            <!-- 关键：设置最小高度为0dp，让布局可以完全折叠 -->
            android:minHeight="0dp">

            <!-- Earth background - 直接作为CollapsingToolbarLayout的子View，减少嵌套 -->
            <ImageView
                android:id="@+id/iv_earth_background"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/your_earth_image"
                app:layout_collapseMode="parallax"/>

            <!-- 其他需要随背景折叠的View - 直接作为CollapsingToolbarLayout的子View -->
            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/constraintLayout2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_collapseMode="parallax"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent">
                <!-- 你的TextView和ImageView内容 -->
            </androidx.constraintlayout.widget.ConstraintLayout>

            <!-- User Info - 改为CollapsingToolbarLayout的直接子View，启用pin模式 -->
            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/clUserInfo_horoscope"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:padding="12dp"
                app:layout_collapseMode="pin"
                <!-- 通过约束保持顶部居中 -->
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent">

                <com.kd.palmreader.Utils.AutofitTextView
                    android:id="@+id/tv_userName_horoscope"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:text="User Name"
                    android:textColor="@android:color/white"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"/>
            </androidx.constraintlayout.widget.ConstraintLayout>

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

    <!-- Scrollable content -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <!-- 你的滚动内容 -->
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

关键修改说明 #

• 背景图完全折叠：给CollapsingToolbarLayout添加android:minHeight="0dp"，确保折叠时没有残留高度；同时将背景图设为CollapsingToolbarLayout的直接子View，layout_collapseMode设为parallax以获得平滑的折叠视差效果。
• 用户信息固定顶部居中：把clUserInfo_horoscope从背景容器中移出，作为CollapsingToolbarLayout的直接子View并设置app:layout_collapseMode="pin"，再通过ConstraintLayout的约束让它始终保持顶部居中。
• 简化布局层级：移除背景图外层多余的ConstraintLayout，减少嵌套可以提升折叠逻辑的准确性和布局性能。

另外，在Fragment中使用时，确保宿主Activity使用Material主题，且未对AppBarLayout设置额外的padding/margin，避免干扰折叠效果。

内容来源于stack exchange