滑动时RecyclerView固定位置并伴随图片缩放动画的实现问题

你要实现的交互效果如下：

这个属于头部折叠缩放+列表锚定固定的交互，用CoordinatorLayout完全可以实现，之前未实现成功大概率是布局层级或者滚动属性配置错误，可按以下步骤调整：

1. 核心布局结构 #

<?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/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        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"
            app:contentScrim="@android:color/transparent"
            android:minHeight="100dp"> <!-- 折叠后头部保留的高度，可自行调整 -->

            <!-- 需要做缩小动画的头部图片 -->
            <ImageView
                android:id="@+id/ivHeader"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_header_bg"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"/>

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

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

    <!-- 列表区域，会自动锚定在AppBarLayout下方，折叠后固定在指定位置 -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:background="@android:color/white"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

2. 添加图片缩小动画逻辑 #

监听AppBarLayout的滚动偏移量，动态修改头部图片的缩放比例即可：

// 记录AppBarLayout总可滚动距离
var totalScrollRange = 0

appBar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
    if (totalScrollRange == 0) {
        totalScrollRange = appBarLayout.totalScrollRange
    }
    // 计算滚动百分比 0~1
    val scrollPercent = Math.abs(verticalOffset) * 1f / totalScrollRange
    // 图片从原始大小缩小到0.8倍，可自行调整缩放范围
    val scale = 1f - scrollPercent * 0.2f
    ivHeader.scaleX = scale
    ivHeader.scaleY = scale
})

3. 注意事项 #

• 必须保证RecyclerView使用支持嵌套滚动的LayoutManager，LinearLayoutManager、GridLayoutManager默认支持，自定义LayoutManager需要手动开启嵌套滚动开关
• 不要在AppBarLayout外额外套其他可滚动容器，否则滚动事件会被拦截导致折叠效果失效
• 如果你不需要折叠时的视差效果，可以把ImageView的layout_collapseMode属性改成pin

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