Android：如何根据NestedScrollView滚动方向实现图片缩放？

第一步：调整XML布局 #

先修正布局里的冗余属性，ImageView在CollapsingToolbarLayout内不需要ConstraintLayout约束，同时添加scaleType保证缩放时图片显示正常：

<?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"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/transparent"
            app:layout_scrollFlags="scroll|enterAlways">

            <ImageView
                android:id="@+id/scrollingImageView"
                android:layout_width="match_parent"
                android:layout_height="360dp"
                android:alpha="0.7"
                android:scaleType="centerCrop"
                android:src="@drawable/live_events_category_img" />

            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="70dp"
                android:background="@color/transparent"
                app:layout_collapseMode="pin" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:id="@+id/nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black"
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        android:scrollbars="none"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- 添加滚动内容，比如长文本或其他布局 -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="这里填充长文本内容用于测试滚动效果，内容越长越能体现缩放动画的连贯性..."
            android:textColor="@color/white"
            android:lineSpacingExtra="8dp"
            android:paddingVertical="20dp"/>
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

第二步：Kotlin代码实现滚动缩放逻辑 #

在Activity/Fragment中添加滚动监听，根据滚动方向动态调整图片缩放比例：

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.core.widget.NestedScrollView
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    // 定义缩放范围：最小缩放比例，最大为原尺寸1.0
    private val MIN_SCALE = 0.8f
    // 缩放灵敏度系数，数值越大缩放变化越明显
    private val SCALE_SENSITIVITY = 0.002f

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var lastScrollY = 0

        nestedScrollView.setOnScrollChangeListener(NestedScrollView.OnScrollChangeListener { _, _, scrollY, _, _ ->
            val scrollDelta = scrollY - lastScrollY
            lastScrollY = scrollY

            var currentScale = scrollingImageView.scaleX

            // 根据滚动方向调整缩放比例
            if (scrollDelta > 0) {
                // 向上滚动：缩小图片
                currentScale -= SCALE_SENSITIVITY * scrollDelta
            } else {
                // 向下滚动：放大图片
                currentScale += SCALE_SENSITIVITY * -scrollDelta
            }

            // 限制缩放范围，避免过度缩放
            currentScale = currentScale.coerceIn(MIN_SCALE, 1.0f)

            // 应用缩放效果
            scrollingImageView.scaleX = currentScale
            scrollingImageView.scaleY = currentScale
        })

        // 初始化图片为原尺寸
        scrollingImageView.scaleX = 1.0f
        scrollingImageView.scaleY = 1.0f
    }
}

关键说明 #

• scaleType="centerCrop"：确保图片缩放时保持比例，不会出现拉伸变形
• 滚动监听通过scrollDelta判断滚动方向，动态计算缩放比例，SCALE_SENSITIVITY可根据需求调整
• coerceIn方法限制缩放范围，避免图片过度缩小或放大
• 调整CollapsingToolbarLayout的layout_scrollFlags为scroll|enterAlways，让滚动交互更流畅

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