ViewPager Page Transformer页面缩放异常问题求助

我明白你在实现CardStack视觉效果时遇到的页面缩放异常有多棘手——自定义PageTransformer的逻辑稍不注意就会出现参数冲突或者计算偏差。先帮你梳理下代码里的几个关键问题，再给出调整后的实现方案。

代码中的核心问题分析 #

• 重复设置TranslationX：你的代码里多次调用view.setTranslationX(...)，后面的赋值会直接覆盖前面的逻辑，导致位移和缩放的联动完全混乱，这是缩放异常的核心原因之一。
• 当前页面缩放错误：在position <= 0的分支里，你把当前页面（position=0）的scaleY设为OTHER_PAGE_SCALE(0.9f)，但当前页面应该保持原尺寸（1.0f），这会导致主页面被错误缩小，破坏堆叠层级。
• View宽度获取时机问题：view.getWidth()在页面首次加载时可能返回0，导致后续的位移和缩放计算全部失效，必须确保在View测量完成后再获取有效宽度。

调整后的CardStackTransformer实现 #

public class CardStackTransformer implements ViewPager.PageTransformer {
    private static final float DEFAULT_CURRENT_SCALE = 1.0f;
    private static final float OTHER_PAGE_SCALE = 0.9f;
    private static final float TRANSLATION_Y_RATIO = 150f; // 可调整这个值控制堆叠的垂直偏移感
    private int pageWidth = 0;

    @Override
    public void transformPage(@NonNull View view, float position) {
        // 确保获取到有效的页面宽度，避免首次加载时宽度为0的情况
        if (pageWidth == 0) {
            pageWidth = view.getWidth();
            // 兜底逻辑：如果当前View宽度仍为0，尝试从父ViewPager获取宽度
            if (pageWidth == 0 && view.getParent() instanceof ViewPager) {
                pageWidth = ((ViewPager) view.getParent()).getWidth();
            }
        }
        if (pageWidth == 0) return; // 宽度未就绪时不执行变换逻辑

        if (position < -1) {
            // 左侧完全滑出屏幕的页面，直接隐藏
            view.setAlpha(0f);
        } else if (position <= 0) {
            // 当前页面（position=0）和左侧即将滑入的页面
            view.setAlpha(1.0f);
            // 当前页面保持居中，无位移
            view.setTranslationX(0f);
            view.setTranslationY(0f);
            // 左侧页面随position从-1到0，逐渐从0.9f恢复到1.0f缩放
            float scaleFactor = DEFAULT_CURRENT_SCALE - (DEFAULT_CURRENT_SCALE - OTHER_PAGE_SCALE) * Math.abs(position);
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
        } else if (position <= 1) {
            // 右侧即将滑入的页面
            // 透明度随position增大逐渐降低，增强层级感
            view.setAlpha(1.0f - 0.3f * position);
            // X轴位移：让右侧页面向左偏移，模拟堆叠在当前页面下方
            view.setTranslationX(-pageWidth * position);
            // Y轴位移：让右侧页面轻微向下偏移，强化堆叠的视觉效果
            view.setTranslationY(pageWidth / TRANSLATION_Y_RATIO * position);
            // 缩放：随position从0到1，逐渐从1.0f缩小到0.9f
            float scaleFactor = OTHER_PAGE_SCALE + (DEFAULT_CURRENT_SCALE - OTHER_PAGE_SCALE) * (1 - position);
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
        } else {
            // 右侧完全滑出屏幕的页面，直接隐藏
            view.setAlpha(0f);
        }
    }
}

关键修改说明 #

1. 修复宽度获取逻辑：添加了宽度兜底处理，避免因View未完成测量导致的计算错误。
2. 移除重复的位移设置：每个分支只保留一次setTranslationX/Y调用，逻辑更清晰可控。
3. 修正当前页面缩放：确保当前页面（position=0）保持1.0f的原尺寸，左侧页面随滑入逐渐恢复原大小，符合堆叠效果的视觉逻辑。
4. 可配置的堆叠偏移：通过TRANSLATION_Y_RATIO参数可以灵活调整卡片堆叠的垂直偏移量，更容易贴近你想要的参考效果。

调试小技巧 #

• 可以先注释掉位移代码，单独调试缩放逻辑，确认缩放正常后再逐步加入位移参数。
• 用Log打印position、scaleFactor、translationX/Y的实时值，观察参数变化是否符合预期，快速定位异常点。

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