ViewPager实现画廊模式的正确姿势

先看效果图 

    

实现这种效果，百度一下大多都是

android:clipChildren="false"这个属性来实现

但是这个属性写的是有一个很明显的坑，就是左右留出来的间距是没法滑动的，因为这个间距是

layout_margin类型的

我最开始也是这个写，然后发现有问题才改成我现在的这种写法。

<android.support.v4.view.ViewPager
    android:id="@+id/vp_recharge"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:paddingRight="70dp"
    android:paddingLeft="70dp"
    android:clipToPadding="false"
    android:layout_marginBottom="10dp"
    android:layout_weight="1"/>

android:clipToPadding="false" 重点是这个+padding

代码里面 

mViewPager.setPageMargin();这个间距也不用设置

其它的都是正常的写法就能实现 上图的效果，不过这里又有一个坑，你滑动的时候就能发现其中的问题，本来在最中间的是itme显示最大的时候，可惜它不是（应该是这个padding引起的）

public class ZoomOutPageTransformer implements ViewPager.PageTransformer

仔细一想 滑动的大小变化是通过这个类来处理的，对它进行调试  果然问题出在了这里

@Override
public void transformPage(View page, float position)

这个position本来应该是从0开始的，但是 现在这里不是，所以需要自己把这个误差值减去，完整的代码

 

<android.support.v4.view.ViewPager
    android:id="@+id/vp_recharge"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:paddingRight="70dp"
    android:paddingLeft="70dp"
    android:clipToPadding="false"
    android:layout_marginBottom="10dp"
    android:layout_weight="1"/>

//设置ViewPager切换效果，即实现画廊效果
mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    public static final float MAX_SCALE = 1.0f;
    public static final float MIN_SCALE = 0.8f;

    public float one = 0;//这种模式可能有偏移量   这个值就是用来保存偏移量的
    public boolean b = false;

    @Override
    public void transformPage(View page, float position) {
        if (!b) {
            b = true;
            one = Math.abs(position);
        }
        position -= one;//减去偏移量
        if (position < -1) {
            position = -1;
        } else if (position > 1) {
            position = 1;
        }

        float tempScale = position < 0 ? 1 + position : 1 - position;
        float slope = (MAX_SCALE - MIN_SCALE) / 1;
        float scaleValue = MIN_SCALE + tempScale * slope;
        page.setScaleX(scaleValue);
        page.setScaleY(scaleValue);
    }

}

整个就完成了，它左右的间距也是可以滑动的，源码就没有了，因为是在项目里面，懒的拿出来了，理解流程之后其实就很简单了