ViewPager<第六篇>：画廊效果实现

ViewPager的画廊效果比较简单，下面直接按步骤实现。

【第一步】 写好基本ViewPager界面

341.gif

【第二步】 实现Viewpager无限循环

在PagerAdapter需要注意的两个方法

@Override
public int getCount() {
    return Integer.MAX_VALUE;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {

    position %= mData.size();

    // ...

    return view;
}

342.gif

【第三步】 设置Viewpager页面宽度，不让它沾满整个屏幕

    int pagerWidth = (int) (getResources().getDisplayMetrics().widthPixels * 4.0f / 5.0f);
    ViewGroup.LayoutParams lp = viewpager.getLayoutParams();
    if (lp == null) {
        lp = new ViewGroup.LayoutParams(pagerWidth, ViewGroup.LayoutParams.MATCH_PARENT);
    } else {
        lp.width = pagerWidth;
    }
    viewpager.setLayoutParams(lp);

【第四步】 将clipChild设置为false

clipChild用来定义他的子控件是否要在他应有的边界内进行绘制。 默认情况下，clipChild被设置为true，也就是不允许进行扩展绘制。

图片.png 343.gif

如图所示，将clipChild设置为false之后，屏幕上绘制了3个page，然而，默认情况下，在内存中缓存页面的数量为3，所以导致左右滑动时，出现页面延迟加载的情况，这时，需要将缓存页面的数量调大。

【第五步】 设置预加载数量

    //设置预加载数量
    viewpager.setOffscreenPageLimit(2);

将limit设置为2之后，缓存中最多可以有5个页面了，所以不存在页面加载延迟的问题。

344.gif

【第六步】 调整边距

    //设置间距
    viewpager.setPageMargin(50);

为了界面更加友好，还需要调整页面间的边距。

345.gif

【第七步】 设置滑动效果

为了无限接近画廊效果，可以使用ZoomOutPageTransformer实现。

viewpager.setPageTransformer(true,new ZoomOutPageTransformer());

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;
    @SuppressLint("NewApi")
    public void transformPage(View view, float position)
    {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (position < -2) {

            view.setAlpha(MIN_ALPHA);

        } else if (position <= 2){
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
            view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
        } else {
            view.setAlpha(0);
        }
    }
}

最终效果如下：

346.gif

[本章完...]