自定ViewPager 切换效果，PageTransformer这个类实现

ViewPager 默认切换动画效果我想，大家应该很熟悉，如果我们要改变ViewPager 的切换动画如何来实现呢，这个时候我们就需要一个PageTransformer这个类来帮助我们来实现了。

PageTransformer这个类是干啥

setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) 用于设置ViewPager切换时的动画效果

下面我们通过一个demo来学习，这个方法
效果：

---

如何实现的，先看代码，然后一步一步分析

package com.test.scrolltransptoolbar;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by Administrator on 2017/9/6.
 * ViewPager  PagerPageTransformer学习
 */
public class ViewPagerPageTransformerActivity extends Activity {

    private ViewPager vp;
    private List<ImgBean> imgBeens;
    private List<ImageView> imageViews;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_page_transformer);
        vp = (ViewPager) findViewById(R.id.vp);
        imgBeens = getList();
        imageViews = getListViews();
        vp.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return imgBeens.size();
            }

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

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

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


        vp.setPageTransformer(true, new DepthPageTransformer());
    }




    public List<ImgBean> getList() {
        List<ImgBean>  imgBeen=new ArrayList<>();
        imgBeen.add(new ImgBean(R.mipmap.img1,"美女"));
        imgBeen.add(new ImgBean(R.mipmap.img2,"西斯美女"));
        imgBeen.add(new ImgBean(R.mipmap.img3,"漂亮美女"));
        imgBeen.add(new ImgBean(R.mipmap.img4,"混血美女"));
        imgBeen.add(new ImgBean(R.mipmap.img5,"韩国美女"));
        imgBeen.add(new ImgBean(R.mipmap.img6,"日本美女"));

        return imgBeen;
    }

    public List<ImageView> getListViews() {
        List<ImageView>  imageViews=new ArrayList<>();
        for (int i = 0; i <imgBeens.size() ; i++) {
            ImageView  imageView=new ImageView(getApplicationContext());
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setImageResource(imgBeens.get(i).img);
            imageView.setTag(i);
            imageViews.add(imageView);
        }

        return imageViews;
    }
}

---

给viewpage 设置Adapter，

这个这么写官方建议的

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

---

instantiateItem 填充view， container.addView(imageViews.get(position));，为什么这么写
我也不知道，先记下，在调用destroyItem（）这个方法移除了每个view

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

---

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

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

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

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

上面的这个就是viewpage的标准初始化过程。

---

细心的话应该注意到了，下面这段代码

   vp.setPageTransformer(true, new DepthPageTransformer());

---

package com.test.scrolltransptoolbar;

import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;

/**
 * Created by Administrator on 2017/9/6.
 */
public class DepthPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.75f;
    public void transformPage(View view, float position) {

       int tag= (int) view.getTag();
        Log.i("tag","tag"+tag+"==============="+"position"+position);
        int pageWidth = view.getWidth();
        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);
        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page
            view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);
        } else if (position <= 1) { // (0,1]
            // Fade the page out.
            view.setAlpha(1 - position);
            // Counteract the default slide transition
            view.setTranslationX(pageWidth * -position);
            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

---

transformPage(View view, float position) 切换的view 是viewpage滚动的view，不管看不看看得到的view，position，每一个view往左或者往右偏移量
我们来观察下

关键代码

  public List<ImageView> getListViews() {
        List<ImageView>  imageViews=new ArrayList<>();
        for (int i = 0; i <imgBeens.size() ; i++) {
            ImageView  imageView=new ImageView(getApplicationContext());
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setImageResource(imgBeens.get(i).img);
            imageView.setTag(i);//设置标记
            imageViews.add(imageView);
        }

        return imageViews;
    }

public class DepthPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.75f;
    public void transformPage(View view, float position) {

       int tag= (int) view.getTag();
        Log.i("tag","tag"+tag+"==============="+"position"+position);

通过打印我们可以分析：

通过上面的日志，我们可以看到，在往左边滑动的这个动作的时候，transformPage（），这个方法会回调两次，第一张远离可见视图，所以是负值，第二张进入可见视图所以是正直。

transformPage（）回调多少次？，假设你viewpage有4张图片，第一次往左滑动，就会回调可以见视图的，左右两边的图片，所以是两次；如果已经有一张在左边的了，继续往左边话，这个时候，就是三次，可见视图左右两边的图片，回调两次，还有最开始一张的图片在右边，也会回调一次。以此类推

---

可见视图的区间范围（0,1）

---

往左滑动，第一张position，等于负值，不会超过 -1，区间范围（0，-1），所以只要小于0，就是可见视图的第一张；第二张的区间就是（0，1），将要进入视图的图片，

---

---

根据上面的可以看到确定第一张的范围区间（-1，-无穷了），第二张区间（0，-1），第三张（0,1），第四张（1，无穷）

---

3D效果的实现
效果：

代码：

package com.test.scrolltransptoolbar;

import android.support.v4.view.ViewPager;
import android.view.View;

/**
 * Created by Administrator on 2017/9/8.
 */

public class My3DTransformer implements ViewPager.PageTransformer {
    @Override
    public void transformPage(View page, float position) {
        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            page.setAlpha(0);

        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page
            page.setAlpha(1);
            page.setPivotX( page.getWidth());
            page.setPivotY(page.getHeight()*0.5f);
            page.setRotationY(position*90);

        } else if (position <= 1) { // (0,1]
            page.setAlpha(1);
            page.setPivotX(0f);
            page.setPivotY(page.getHeight()*0.5f);
            page.setRotationY(position*90);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            page.setAlpha(0);
        }

    }
}

   vp.setPageTransformer(true, new My3DTransformer());

---

代码：

package com.test.scrolltransptoolbar;

import android.support.v4.view.ViewPager;
import android.view.View;

/**
 * Created by Administrator on 2017/9/8.
 */

public class RotateDownPageTransformer implements ViewPager.PageTransformer
{

    private static final float ROT_MAX = 20.0f;
    private float mRot;



    public void transformPage(View view, float position)
    {



        if (position < -1)
        { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setRotation(0);

        } else if (position <= 1) // a页滑动至b页 ； a页从 0.0 ~ -1 ；b页从1 ~ 0.0
        { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            if (position < 0)
            {

                mRot = (ROT_MAX * position);
                view.setPivotX(view.getMeasuredWidth() * 0.5f);
                view.setPivotY(view.getMeasuredHeight());
                view.setRotation( mRot);
            } else
            {

                mRot = (ROT_MAX * position);
                view.setPivotX(view.getMeasuredWidth() * 0.5f);
                view.setPivotY( view.getMeasuredHeight());
                view.setRotation(mRot);
            }

            // Scale the page down (between MIN_SCALE and 1)

            // Fade the page relative to its size.

        } else
        { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setRotation(0);
        }
    }
}

    vp.setPageTransformer(true, new RotateDownPageTransformer());

---

参考大神：
http://blog.csdn.net/u012926924/article/details/48008391
http://www.jianshu.com/p/f70073f7e837
http://blog.csdn.net/lmj623565791/article/details/40411921
http://blog.csdn.net/lmj623565791/article/details/40411921