Android开发：滚动NestedScrollView时如何缩放ImageView？

嘿，作为Android开发新手遇到这个需求很正常，我来一步步教你实现NestedScrollView滚动时缩放ImageView的效果～

首先咱们先补全并优化你的布局结构，假设你的布局里顶部是要缩放的ImageView，下面是NestedScrollView，完整布局示例如下：

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

    <!-- 顶部要缩放的ImageView -->
    <ImageView
        android:id="@+id/top_zoom_image"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:src="@drawable/your_image" />

    <!-- 滚动内容区域 -->
    <androidx.core.widget.NestedScrollView
        android:id="@+id/content_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="200dp"> <!-- 这里marginTop和ImageView高度一致，避免遮挡 -->

        <!-- 你的滚动内容，比如LinearLayout包裹的文本、控件等 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">

            <!-- 示例内容 -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="这里是滚动内容..."
                android:textSize="16sp" />

            <!-- 可以多添加一些内容让滚动生效 -->
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

接下来是核心的逻辑实现，我分别给出Kotlin和Java两种版本，你可以根据自己的开发语言选择：

Kotlin 实现 #

在你的Activity（或Fragment）中，获取控件并设置滚动监听：

import android.os.Bundle
import android.view.ViewTreeObserver
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import androidx.core.widget.NestedScrollView

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

        val scrollView = findViewById<NestedScrollView>(R.id.content_scroll_view)
        val zoomImageView = findViewById<ImageView>(R.id.top_zoom_image)
        var imageHeight = 0

        // 等待ImageView布局完成后获取准确高度
        zoomImageView.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
            override fun onGlobalLayout() {
                // 移除监听，避免重复回调
                zoomImageView.viewTreeObserver.removeOnGlobalLayoutListener(this)
                imageHeight = zoomImageView.height
            }
        })

        // 设置滚动监听
        scrollView.setOnScrollChangeListener { _, _, scrollY, _, _ ->
            if (imageHeight == 0) return@setOnScrollChangeListener

            // 计算滚动比例，限制在0-1之间（滚动距离不超过ImageView高度时生效）
            val scrollRatio = scrollY.toFloat() / imageHeight
            val clampedRatio = scrollRatio.coerceIn(0f, 1f)

            // 定义缩放范围：从1.0（原始大小）缩到0.8（最小大小），你可以调整0.2这个值改变缩放幅度
            val scale = 1.0f - 0.2f * clampedRatio

            // 应用缩放，设置缩放中心为左上角，避免偏移
            zoomImageView.scaleX = scale
            zoomImageView.scaleY = scale
        }
    }
}

Java 实现 #

如果你用Java开发，代码如下：

import android.os.Bundle;
import android.view.ViewTreeObserver;
import android.widget.ImageView;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.widget.NestedScrollView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        NestedScrollView scrollView = findViewById(R.id.content_scroll_view);
        ImageView zoomImageView = findViewById(R.id.top_zoom_image);
        int[] imageHeight = {0}; // 用数组存值，方便在内部类访问

        // 监听ImageView布局完成
        zoomImageView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                zoomImageView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                imageHeight[0] = zoomImageView.getHeight();
            }
        });

        // 设置滚动监听
        scrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
            @Override
            public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                if (imageHeight[0] == 0) return;

                float scrollRatio = (float) scrollY / imageHeight[0];
                float clampedRatio = Math.max(0f, Math.min(scrollRatio, 1f));

                float scale = 1.0f - 0.2f * clampedRatio;
                zoomImageView.setScaleX(scale);
                zoomImageView.setScaleY(scale);
            }
        });
    }
}

一些注意事项 #

• 如果你的ImageView高度是wrap_content，一定要通过ViewTreeObserver监听布局完成后再获取高度，不然会得到0，导致缩放逻辑失效。
• 你可以调整1.0f - 0.2f * clampedRatio中的0.2f来改变缩放幅度，比如改成0.3f会让ImageView缩小更多。
• 如果想要更平滑的缩放效果，可以结合ValueAnimator来做动画过渡，但基础的滚动监听直接设置scale已经能满足大部分需求啦。

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