使用ViewPager实现gallery

整理自http://blog.csdn.net/u012702547/article/details/52334161，记录一下对于PageTransform的理解。

原理分析

通过设置clipChildren或者clipToPadding属性，使得ViewPager可以实现单屏多页的效果。

ViewPager的特性就是每一页View的宽度是ViewPager宽度减去ViewPager的padding，所以要实现单屏多页的效果，有两种方法。

方法一是设置ViewPager的margin和clipChildren属性，clipChildren属性表示子控件是否可以绘制在本身边界之外，默认该属性为true，即不可绘制在本身边界外。通过在ViewPager及其父布局两个地方都声明clipChildren=”false”，就可以在ViewPager范围之外画出其他页的内容。这一方法的问题在于其他页的内容无法响应点击事件。

方法二是设置ViewPager的padding和clipToPadding属性，clipToPadding属性表示子控件是否可以绘制在父布局的padding之中，默认为true。只要在ViewPager处声明clipToPadding=”false”，ViewPager的page范围是不包含padding的，就可以显示出单屏多页，还可以响应点击事件。

示例代码

以下以clipToPadding的具体做法作为示例。

ViewPager的xml：

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:paddingLeft="130dp"
    android:paddingRight="130dp"
    android:clipToPadding="false"
    android:layout_height="200dp">

有几个点需要明确一下：

1. ViewPager的setPageMargin()是用来指定每页间的间隔，而这个间隔对于每一页的宽度是没有影响的，即每一页的宽度总是等于ViewPager不包含padding在内的宽度。

2. ViewPager的setOffscreenPageLimit()用来指定屏幕外额外加载的页数。

3. ViewPager.PageTransform的回调方法transformPage(View page, float position)中page是某一个可见page，position是该page相对于ViewPager当前正中page的位置偏移比例，该比例以page宽度为准。所以在每一次ViewPager滑动位置改变的时候，对于每个可见page都会回调该方法。

4. 如果需要进行PageTransform，如果是clipChildren方法，ViewPager的整体宽度与page宽度是一致的，ViewPager.PageTransformer回调的position也符合-1,0,1的规律。
   但是如果是clipToPadding方法，因为有padding的存在，ViewPager的整体宽度大于page的实际宽度，所以ViewPager.PageTransformer回调的position会跟随着padding的不同而不同，具体观察到的规律是以page实际宽度为基准，到ViewPager最左边的距离去计算position。回调得到的position就会比clipChildren方法中的大，具体数值是左padding除以page宽度，所以为了变换的准确，需要减去这个值。

5. 如果要控制page的宽度，只能通过控制padding来实现。

ViewPager的具体设置：

private ArrayList<View> mViews;
private static final float MIN_ALPHA = .5f;
private static final float MIN_SCALE = .6f;
private static final float MAX_SCALE = 1f;

...

private void initPager() {
    final ViewPager pager = (ViewPager) findViewById(R.id.pager);
    pager.setPageMargin(80);
    pager.setOffscreenPageLimit(2);
    // 此处通过获取ViewPager两边的padding来计算每一页实际宽度
    final int paddingLeft = pager.getPaddingLeft();
    final int screenWidth = getResources().getDisplayMetrics().widthPixels;
    int pageWidth = screenWidth - 2 * paddingLeft;
    // 左边padding相对于page宽度的比例
    final float ratioOfPadding2PageWidth = paddingLeft * 1f / pageWidth;

    mTransformer = new ViewPager.PageTransformer() {
        @Override
        public void transformPage(View page, float position) {
            position -= ratioOfPadding2PageWidth;
            Log.e(TAG, "page = " + page.getTag() + ", position = " + position);
            if (position < -1 || position > 1) {
                page.setAlpha(MIN_ALPHA);
                page.setScaleX(MIN_SCALE);
                page.setScaleY(MIN_SCALE);
            } else {
                if (position < 0) {
                    page.setScaleX(MIN_SCALE + (MAX_SCALE - MIN_SCALE) * (1 + position));
                    page.setScaleY(MIN_SCALE + (MAX_SCALE - MIN_SCALE) * (1 + position));
                    page.setAlpha(MIN_ALPHA + (1 - MIN_ALPHA) * (1 + position));
                } else if (position >= 0) {
                    page.setScaleX(MIN_SCALE + (MAX_SCALE - MIN_SCALE) * (1 - position));
                    page.setScaleY(MIN_SCALE + (MAX_SCALE - MIN_SCALE) * (1 - position));
                    page.setAlpha(MIN_ALPHA + (1 - MIN_ALPHA) * (1 - position));
                }
            }
        }
    };
    pager.setPageTransformer(false, mTransformer);

    final View layout1 = getLayoutInflater().inflate(R.layout.layout1, null);
    final View layout2 = getLayoutInflater().inflate(R.layout.layout2, null);
    final View layout3 = getLayoutInflater().inflate(R.layout.layout3, null);
    final View layout11 = getLayoutInflater().inflate(R.layout.layout1, null);
    final View layout22 = getLayoutInflater().inflate(R.layout.layout2, null);
    final View layout33 = getLayoutInflater().inflate(R.layout.layout3, null);

    mViews = new ArrayList<>();
    mViews.add(layout1);
    mViews.add(layout2);
    mViews.add(layout3);
    mViews.add(layout11);
    mViews.add(layout22);
    mViews.add(layout33);

    pager.setAdapter(new PagerAdapter() {
        @Override
        public int getCount() {
            return mViews.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(mViews.get(position));
return mViews.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(mViews.get(position));
        }
    });
}