带左右预览的ViewPager实现问题：三页可见、缩放及重叠需求

我来帮你搞定这个ViewPager的需求！结合你提到的已经接近预期效果，但卡在「选中页置顶」和「缩放异常」的问题，我整理了一套完整的可落地方案：

一、先搞定布局基础配置 #

要让ViewPager同时显示3个页面，首先得打破默认的「只显示当前页」的裁剪限制：

1. 给ViewPager及其父布局都加上android:clipChildren="false"
   这个属性允许子视图超出父容器的范围显示，是多页面可见的前提。
2. 设置ViewPager的页面间距为负值
   这样能让中间页面覆盖住两侧页面，符合你「中间页面略微覆盖两侧」的要求，数值可以根据你的UI需求调整，比如设为-40dp。

布局示例（以XML为例）：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    android:gravity="center">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:clipChildren="false"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp"
        android:pageMargin="-40dp"/>
</LinearLayout>

这里的layout_marginLeft/Right是为了让两侧页面能完整露出一部分，你可以根据实际页面宽度调整。

二、自定义PageTransformer处理缩放与层级 #

这部分是核心，既要实现缩放规则，还要解决选中页面的顶层显示问题：

public class ScaleInTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.6f; // 两侧页面缩放比例

    @Override
    public void transformPage(@NonNull View page, float position) {
        // position参数含义：
        // 0 = 当前选中的中间页面
        // 1 = 右侧完全滑出的页面；-1 = 左侧完全滑出的页面
        // 0~1之间是右侧正在滑动的页面；-1~0之间是左侧正在滑动的页面

        if (position < -1 || position > 1) {
            // 完全滑出屏幕的页面，保持最小缩放
            page.setScaleX(MIN_SCALE);
            page.setScaleY(MIN_SCALE);
            page.setTranslationZ(0); // 滑出的页面层级最低
        } else if (position <= 1 && position >= -1) {
            float scale = Math.max(MIN_SCALE, 1 - Math.abs(position));
            page.setScaleX(scale);
            page.setScaleY(scale);

            // 关键：让当前选中的页面（position=0）处于顶层
            if (position == 0) {
                page.setTranslationZ(10); // 给中间页面设置更高的Z轴值
            } else {
                page.setTranslationZ(0);
            }
        }
    }
}

关键细节说明： #

• 缩放逻辑：通过position的绝对值计算缩放比例，保证中间页面（position=0）缩放为1，两侧页面随着远离中间点逐渐缩放到0.6。
• 层级修复：利用translationZ（Android 5.0+支持）来控制页面层级，让选中的中间页面Z轴值更高，确保它覆盖在两侧页面之上。如果是低版本，可以用View.bringToFront()，但要注意在滑动回调里处理。

三、ViewPager初始化配置 #

最后把Transformer绑定到ViewPager，再补充一些必要设置：

ViewPager viewPager = findViewById(R.id.viewPager);
viewPager.setAdapter(你的PagerAdapter实例);
// 绑定自定义Transformer
viewPager.setPageTransformer(true, new ScaleInTransformer());
// 设置预加载页面数，保证两侧页面提前加载
viewPager.setOffscreenPageLimit(2);

四、常见问题排查 #

如果你之前缩放出现问题，大概率是这两个原因：

1. 没有正确处理position的边界值：比如当页面滑出屏幕外时，没有固定缩放比例，导致页面异常变形。
2. 层级与缩放的顺序问题：要确保先设置缩放，再调整层级，避免层级变化影响缩放效果。

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