CollapsingToolbarLayout：如何让书籍缩略图在工具栏折叠时消失

Hey Dale, let's get that book thumbnail to disappear when your CollapsingToolbarLayout is fully collapsed—here are the most practical fixes for this problem:

1. Double-Check Your Layout Structure #

First, make sure your book thumbnail ImageView is nested inside the CollapsingToolbarLayout, and you've set the right collapse modes for both the thumbnail and your Toolbar. Here's a corrected layout skeleton:

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

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="250dp">

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

            <!-- Your Book Thumbnail -->
            <ImageView
                android:id="@+id/book_thumbnail"
                android:layout_width="120dp"
                android:layout_height="180dp"
                android:src="@drawable/your_book_cover"
                android:layout_margin="16dp"
                app:layout_collapseMode="parallax"/>

            <!-- Your Toolbar -->
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>

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

    <!-- Scrollable Content (Required for Collapsing Behavior) -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- Your Screen Content Here -->
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Note: If you're still using the old support libraries, replace androidx with android.support packages—but AndroidX is recommended for modern projects.

2. Add a Scroll Listener for Precise Control #

If the built-in collapse modes don't hide the thumbnail fully when collapsed, you can listen to the AppBarLayout's scroll offset and manually toggle visibility (or fade it out smoothly):

Add this code to your Activity/Fragment:

AppBarLayout appBarLayout = findViewById(R.id.app_bar_layout);
ImageView bookThumbnail = findViewById(R.id.book_thumbnail);

appBarLayout.addOnOffsetChangedListener((appBar, verticalOffset) -> {
    // Calculate how much the AppBar is collapsed (0 = fully expanded, 1 = fully collapsed)
    float collapsePercentage = Math.abs(verticalOffset) / (float) appBar.getTotalScrollRange();

    // Hide the thumbnail when fully collapsed, or fade it out as we collapse
    if (collapsePercentage >= 1.0f) {
        bookThumbnail.setVisibility(View.GONE);
    } else {
        bookThumbnail.setVisibility(View.VISIBLE);
        bookThumbnail.setAlpha(1 - collapsePercentage); // Smooth fade effect
    }
});

3. Verify Critical Layout Flags #

Make sure these key attributes are set correctly:

• On CollapsingToolbarLayout: app:layout_scrollFlags="scroll|exitUntilCollapsed" — this tells the layout to scroll with content until it's fully collapsed.
• On your scrollable content (NestedScrollView/RecyclerView): app:layout_behavior="@string/appbar_scrolling_view_behavior" — this links the content's scroll to the AppBar's collapse behavior.

Quick Troubleshooting Checks #

• If you're seeing no collapse behavior at all: Ensure your content view (like NestedScrollView) is scrollable and has the correct behavior attribute.
• If the thumbnail still shows after collapsing: Double-check that your listener's logic is correct, and that the getTotalScrollRange() value isn't zero (this can happen if the AppBarLayout's height isn't set properly).

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