Android长图自动垂直滚动实现方案求助

嘿，我之前也踩过类似的长图滚动坑，你的两个问题我都遇到过，给你两个亲测有效的方案，应该能完美解决问题！

问题根源先理清楚 #

先说说你碰到的两个问题为啥会出现：

• TranslateAnimation只显示首段+滚动空白：这个动画只是改变View的绘制位置，并没有修改View的实际布局参数。如果你的ImageView父容器高度是match_parent，图片超出容器的部分会被直接裁剪，滚动时自然看不到后面的内容，只会显示空白。
• ScrollView循环ScrollTo无动画：scrollTo()是瞬间跳转到目标位置的操作，没有插值过渡过程，所以你看不到滚动动画，直接看到最终结果。

方案一：ValueAnimator + ScrollView（最推荐） #

这个方案既解决了滚动动画问题，又能完美显示整张长图，代码也很简洁。

1. 布局文件（ScrollView嵌套ImageView） #

<ScrollView
    android:id="@+id/scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="none">

    <ImageView
        android:id="@+id/long_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitStart" />
</ScrollView>

这里注意ImageView的layout_height设为wrap_content，这样才能完整显示整张长图。

2. 加载Assets中的长图 #

ImageView longImage = findViewById(R.id.long_image);
try {
    // 从Assets文件夹读取图片
    InputStream inputStream = getAssets().open("your_long_image.png");
    Bitmap bitmap = BitmapFactory.decodeStream(inputStream);
    longImage.setImageBitmap(bitmap);
} catch (IOException e) {
    e.printStackTrace();
}

3. 实现平滑自动滚动动画 #

关键是用ValueAnimator来插值计算滚动位置，逐步更新ScrollView的滚动状态，这样就能看到流畅的动画了。注意必须等图片加载完成后再计算滚动距离，否则图片高度为0，滚动无效：

ScrollView scrollView = findViewById(R.id.scroll_view);

// 监听ImageView布局完成，确保能获取到真实高度
longImage.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        // 移除监听，避免重复触发
        longImage.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        
        // 计算总滚动距离：图片高度 - ScrollView可见高度
        int totalScrollDistance = longImage.getHeight() - scrollView.getHeight();
        if (totalScrollDistance <= 0) {
            // 图片高度小于等于屏幕高度，不需要滚动
            return;
        }

        // 创建滚动动画
        ValueAnimator scrollAnimator = ValueAnimator.ofInt(0, totalScrollDistance);
        scrollAnimator.setDuration(12000); // 滚动总时长，比如12秒，可自行调整
        scrollAnimator.setInterpolator(new LinearInterpolator()); // 匀速滚动，也可以用AccelerateDecelerateInterpolator等
        scrollAnimator.addUpdateListener(animation -> {
            // 实时更新滚动位置
            int currentScrollY = (int) animation.getAnimatedValue();
            scrollView.scrollTo(0, currentScrollY);
        });

        // 启动动画
        scrollAnimator.start();
    }
});

方案二：自定义View + 画布滚动（适合超长长图） #

如果你的长图特别大（比如超过3000像素，担心内存问题），可以用自定义View直接绘制图片并通过画布平移实现滚动，内存占用会更低。

自定义长图滚动View示例 #

public class LongImageScrollView extends View {
    private Bitmap mLongBitmap;
    private float mCurrentY;
    private ValueAnimator mAnimator;

    public LongImageScrollView(Context context) {
        super(context);
        init();
    }

    public LongImageScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        // 从Assets加载图片（这里可以改成外部传入）
        try {
            InputStream is = getContext().getAssets().open("your_long_image.png");
            mLongBitmap = BitmapFactory.decodeStream(is);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mLongBitmap == null) return;
        // 平移画布实现滚动效果
        canvas.translate(0, -mCurrentY);
        canvas.drawBitmap(mLongBitmap, 0, 0, null);
    }

    public void startScrollAnimation() {
        if (mLongBitmap == null) return;
        // 计算滚动总距离：图片高度 - View可见高度
        float totalScroll = mLongBitmap.getHeight() - getHeight();
        if (totalScroll <= 0) return;

        mAnimator = ValueAnimator.ofFloat(0, totalScroll);
        mAnimator.setDuration(10000);
        mAnimator.setInterpolator(new LinearInterpolator());
        mAnimator.addUpdateListener(animation -> {
            mCurrentY = (float) animation.getAnimatedValue();
            invalidate(); // 重绘View
        });
        mAnimator.start();
    }
}

使用时直接在布局里添加这个自定义View，然后调用startScrollAnimation()即可。

额外小提示 #

• 如果需要循环滚动，可以给ValueAnimator设置setRepeatCount(ValueAnimator.INFINITE)和setRepeatMode(ValueAnimator.REVERSE)实现来回滚动。
• 记得在页面销毁时取消动画，避免内存泄漏：animator.cancel()。

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