Fragment中CollapsingToolbarLayout内部内容不显示问题求助

问题诊断 #

你的布局存在几个关键问题导致CollapsingToolbarLayout内的内容无法显示：

• Toolbar作为AppBarLayout的同级子View，会挤压或遮挡CollapsingToolbarLayout的内容区域
• CollapsingToolbarLayout使用wrap_content高度，无法正确计算折叠交互所需的空间
• 主题代码存在语法错误，可能影响样式解析

修复方案 #

1. 修正布局结构与参数

将Toolbar移入CollapsingToolbarLayout内部，调整相关组件的高度、scrollFlags及fitsSystemWindows属性：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".ui.fragments.HomeFragment">

    <include
        android:id="@+id/loader_layout"
        layout="@layout/layout_circular_loader"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" />

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:elevation="2dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/toolbar_first"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.DayNight.ActionBar"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- 地址信息布局 -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:orientation="horizontal"
                android:paddingHorizontal="16dp">
                
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/poppinsregular"
                    android:text="Delivering to"
                    android:textColor="@color/grey"
                    android:textSize="@dimen/_16ssp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/_4sdp"
                    android:fontFamily="@font/poppinsregular"
                    android:gravity="center_vertical"
                    android:text="->"
                    android:textColor="@color/app_black"
                    android:textSize="@dimen/_16ssp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/_4sdp"
                    android:fontFamily="@font/poppinssemibold"
                    android:gravity="center_vertical"
                    android:text="Gurugram"
                    android:textColor="@color/app_black"
                    android:textSize="@dimen/_16ssp" />
            </LinearLayout>

            <!-- 将Toolbar移入CollapsingToolbarLayout内部 -->
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin">
                
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">
                    
                    <include
                        layout="@layout/layout_search_bar"
                        android:layout_width="0dp"
                        android:layout_weight="1"
                        android:layout_height="wrap_content" />

                    <ImageView
                        android:layout_marginStart="@dimen/_8sdp"
                        android:layout_marginEnd="@dimen/_8sdp"
                        android:layout_width="44dp"
                        android:padding="@dimen/_8sdp"
                        android:background="@drawable/search_bar_background"
                        android:layout_height="match_parent"
                        android:src="@drawable/ic_filter" />
                </LinearLayout>
            </androidx.appcompat.widget.Toolbar>
        </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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="16dp">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris viverra urna eu gravida hendrerit..."
                app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

2. 修复主题代码语法错误

修正android:statusBarColor标签的闭合错误：

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.TakeOut" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">@color/red</item>
        <item name="colorOnPrimary">@color/white</item>
<!--        <item name="android:background">@color/white</item>-->
        <item name="colorSecondary">?attr/colorPrimary</item>
        <item name="colorSurfaceContainer">?attr/colorPrimary</item>
        <item name="colorOnSecondary">?attr/colorOnPrimary</item>
        <item name="android:statusBarColor">?attr/colorPrimary</item>
    </style>

    <style name="Theme.TakeOut" parent="Base.Theme.TakeOut" />
</resources>

修改说明 #

• 层级调整：Toolbar移入CollapsingToolbarLayout后，CollapsingToolbarLayout可以统一管理折叠区域和固定Toolbar的交互
• 高度设置：给CollapsingToolbarLayout设置固定高度（如120dp），确保地址内容有足够的显示空间
• fitsSystemWindows同步：CollapsingToolbarLayout设置该属性，避免状态栏遮挡顶部内容
• 移除NestedScrollView的marginTop：避免内容区域上移导致和AppBarLayout的间距异常
• 主题语法修复：确保样式文件解析正常，避免潜在的样式异常

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