如何实现Google Play商店式RecyclerView与CollapsingToolbarLayout联动？

看起来你是卡在了滚动联动的配置上——这种问题大多是布局结构没搭对，或者关键的滚动属性没配全。下面我给你一套完整的可复用方案，以及关键属性的解释，帮你搞定这个效果。

一、完整布局代码示例 #

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

    <!-- 顶部折叠工具栏区域 -->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- 折叠时的视差背景图（和Google Play效果一致） -->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/your_header_bg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.6"/>

            <!-- 折叠后固定在顶部的工具栏 -->
            <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>

    <!-- 可滚动的内容列表 -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

二、必须配置的核心属性（你可能漏掉了这些） #

• CollapsingToolbarLayout的app:layout_scrollFlags="scroll|exitUntilCollapsed"：
  • scroll：告诉系统这个布局会跟随内容滚动
  • exitUntilCollapsed：滚动到工具栏的最小高度（也就是你设置的Toolbar高度）后就停止收缩
• RecyclerView的app:layout_behavior="@string/appbar_scrolling_view_behavior"：
  这是滚动联动的关键！没有这个属性，RecyclerView和顶部工具栏完全是两个独立的布局，自然不会有联动效果
• 视差图的app:layout_collapseMode="parallax"：
  给背景图添加滚动视差效果，和Google Play的折叠动画完全匹配；Toolbar用pin属性，保证折叠后它固定在顶部不消失

三、额外注意点 #

1. 确保你用的是AndroidX库（如果还在用旧的android.support.design包，建议迁移到AndroidX，避免兼容性问题）
2. 给CollapsingToolbarLayout设置app:contentScrim，这是折叠后显示的背景色，一般和主题的colorPrimary保持一致
3. 如果RecyclerView内容太少不足以滚动，工具栏是不会有折叠/展开动作的，记得填充足够多的测试数据

按照这个配置来，你就能得到和Google Play一模一样的滚动折叠效果了！

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