Android开发：如何为ViewPager的每个页面设置不同间距？

ViewPager本身并没有提供类似RecyclerView中addItemDecoration的直接实现，但可以通过以下两种常用方案实现不同页面的间距设置：

1. 自定义PageTransformer控制页面偏移 #

通过实现ViewPager.PageTransformer接口，在transformPage方法中根据页面索引或位置，为不同页面设置差异化的水平偏移量，以此模拟不同的间距。

示例代码： #

public class CustomPageTransformer implements ViewPager.PageTransformer {
    private final int[] pageMargins = {0, 20, 40, 20}; // 对应每个页面的左侧间距（单位：dp）
    private final float density;

    public CustomPageTransformer(Context context) {
        density = context.getResources().getDisplayMetrics().density;
    }

    @Override
    public void transformPage(@NonNull View page, float position) {
        int pageIndex = (int) page.getTag(); // 需要在Adapter中给每个页面设置索引标记
        if (pageIndex >= 0 && pageIndex < pageMargins.length) {
            int marginPx = (int) (pageMargins[pageIndex] * density);
            // 根据页面滑动位置动态调整偏移，保证间距显示符合预期
            if (position < -1) {
                page.setTranslationX(marginPx);
            } else if (position <= 0) {
                page.setTranslationX(marginPx * (1 + position));
            } else if (position <= 1) {
                page.setTranslationX(marginPx * (1 - position));
            } else {
                page.setTranslationX(-marginPx);
            }
        }
    }
}

使用方式： #

在Adapter的instantiateItem方法中给每个页面View设置索引Tag：

@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
    View pageView = LayoutInflater.from(container.getContext()).inflate(R.layout.item_page, container, false);
    pageView.setTag(position);
    container.addView(pageView);
    return pageView;
}

给ViewPager绑定Transformer并清除统一间距：

viewPager.setPageTransformer(true, new CustomPageTransformer(this));
viewPager.setPageMargin(0);

2. 为页面布局设置差异化Margin #

直接在Adapter创建每个页面View时，为不同位置的页面根布局设置不同的左右Margin，配合setPageMargin(0)即可实现差异化间距。

示例代码： #

private final float density = getResources().getDisplayMetrics().density;

@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
    View pageView = LayoutInflater.from(container.getContext()).inflate(R.layout.item_page, container, false);
    ViewGroup.LayoutParams params = pageView.getLayoutParams();
    if (params instanceof ViewGroup.MarginLayoutParams) {
        ViewGroup.MarginLayoutParams marginParams = (ViewGroup.MarginLayoutParams) params;
        // 根据页面索引设置不同的左右Margin
        switch (position) {
            case 0:
                marginParams.leftMargin = 0;
                marginParams.rightMargin = (int) (20 * density);
                break;
            case 1:
                marginParams.leftMargin = (int) (20 * density);
                marginParams.rightMargin = (int) (20 * density);
                break;
            case 2:
                marginParams.leftMargin = (int) (40 * density);
                marginParams.rightMargin = 0;
                break;
            default:
                marginParams.leftMargin = (int) (20 * density);
                marginParams.rightMargin = (int) (20 * density);
        }
        pageView.setLayoutParams(marginParams);
    }
    container.addView(pageView);
    return pageView;
}

注意事项： #

需要确保页面根布局使用的是支持Margin的LayoutParams（如LinearLayout.LayoutParams、FrameLayout.LayoutParams等）。

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