ViewPager滚动时显示多页、停止时恢复默认显示的实现问题

嗨，这个需求我帮不少开发者处理过，咱们一步步来搞定它～

首先得确认你当前的基础配置是对的：已经给ViewPager设置了左右padding、pageMargin，并且开启了clipToPadding="false"，这样才能看到前后页的部分内容。比如布局大概是这样：

<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="280dp"
    android:paddingLeft="80dp"
    android:paddingRight="80dp"
    android:clipToPadding="false"
    app:pageMargin="30dp" />

接下来核心思路很明确：监听ViewPager的滚动状态，动态调整页面宽度——滚动过程中缩小页面宽度，让更多页面可见；滚动停止后恢复原宽度，回到选中页居中、前后页部分可见的状态。

具体实现步骤 #

1. 监听滚动状态，动态调整页面宽度
   我们可以直接在Activity/Fragment中给ViewPager添加页面监听器，在滚动的不同阶段修改页面尺寸：

ViewPager viewPager = findViewById(R.id.viewPager);
MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);

// 保存选中状态下的默认页面宽度
int defaultPageWidth = getResources().getDisplayMetrics().widthPixels - 
                       viewPager.getPaddingLeft() - viewPager.getPaddingRight();
// 滚动时的页面宽度（可根据需求调整比例，比如0.8表示默认宽度的80%）
int scrollPageWidth = (int) (defaultPageWidth * 0.8);

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        // 滚动过程中根据偏移量平滑过渡页面宽度，避免突兀变化
        for (int i = 0; i < viewPager.getChildCount(); i++) {
            View page = viewPager.getChildAt(i);
            ViewGroup.LayoutParams params = page.getLayoutParams();
            float targetWidth = defaultPageWidth - (defaultPageWidth - scrollPageWidth) * Math.abs(positionOffset);
            params.width = (int) targetWidth;
            page.setLayoutParams(params);
        }
    }

    @Override
    public void onPageSelected(int position) {
        // 页面选中时强制恢复默认宽度，防止状态异常
        resetPageWidth();
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        // 滚动完全停止时，确保所有页面回到默认宽度
        if (state == ViewPager.SCROLL_STATE_IDLE) {
            resetPageWidth();
        }
    }

    // 封装恢复默认宽度的方法，避免重复代码
    private void resetPageWidth() {
        for (int i = 0; i < viewPager.getChildCount(); i++) {
            View page = viewPager.getChildAt(i);
            ViewGroup.LayoutParams params = page.getLayoutParams();
            params.width = defaultPageWidth;
            page.setLayoutParams(params);
        }
    }
});

2. 优化细节，提升体验

   • 页面布局的根节点宽度要设为match_parent，这样才能跟随我们动态设置的宽度变化；
   • 如果页面里有图片，建议用ScaleType.CENTER_CROP这类适配类型，避免宽度变化时图片变形；
   • 可以根据UI需求调整scrollPageWidth的比例，比如改成0.75，滚动时能显示更多页面。

3. 备选方案：用ViewPager2更省心
   要是你愿意迁移到ViewPager2，实现起来会更简洁——它本身支持更灵活的页面控制，不需要动态改宽度，用页面缩放就能达到效果：

ViewPager2 viewPager2 = findViewById(R.id.viewPager2);
// 同样设置padding、clipToPadding和pageMargin（ViewPager2用pageMargin属性需要依赖Material库）

viewPager2.setPageTransformer(new ViewPager2.PageTransformer() {
    @Override
    public void transformPage(@NonNull View page, float position) {
        // 滚动时缩小非选中页的缩放比例，实现多页可见效果
        float scale = 0.8f + (1 - 0.8f) * Math.abs(position);
        page.setScaleX(scale);
        page.setScaleY(scale);
        // 还可以搭配透明度变化，增强视觉层次
        page.setAlpha(0.8f + (1 - 0.8f) * Math.abs(position));
    }
});

关键注意事项 #

• 一定要确保clipToPadding="false"，否则padding区域的内容会被裁剪，看不到前后页；
• 测试不同屏幕尺寸的适配情况，调整padding和pageMargin的数值，保证在各种设备上显示正常。

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