ViewPager PageTransformer探索

很多人对于ViewPager PageTransformer一直都是停留在用的阶段，都是把别的写好的能够实现一些效果的PageTransformer直接拿过来给set上，可是如果有一天你的产品经理突然给你来了一个你从未见过的切换效果要你实现。于是各种百度、Google，无奈并没有什么卵用，根本搜不到这种效果。这时候怎么办？

当然是朝这里看过来了

废话不多说，我们先看一个效果图

这种切换效果相信大家都在很多地方见过，没错这就是Google的官方示例_DepthPageTransformer，其实现代码如下：

public class DepthPageTransformer implements ViewPager.PageTransformer {
   
    private static final float MIN_SCALE = 0.75f;

    public void transformPage(View page, float position) {
        int pageWidth = page.getWidth();

        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.setTranslationX(0);
            page.setScaleX(1);
            page.setScaleY(1);

        } else if (position <= 1) { // (0,1]
            // Fade the page out.
            page.setAlpha(1 - position);

            // Counteract the default slide transition
            page.setTranslationX(pageWidth * -position);

            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            page.setScaleX(scaleFactor);
            page.setScaleY(scaleFactor);

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

可以看出来，这里当position位于（-∞，-1）和（1，∞）这两个区间的的时候，给page的透明度设为0，在[-1，1]这个区间根据一些相关极限对page进行了一些缩放和平移的操作。然后只需要viewPager.setPageTransformer(new DepthPageTransformer());就能实现如上的效果了。关键就是这里计算的这些公式是怎么的出来的呢？这便是我们今天要讨论的重点了。

废话不多收，直接进入我们今天的主题

好了，先来看一下这两个参数的解释

public interface PageTransformer {
    /**
     * Apply a property transformation to the given page.
     * 对给定的page施加一个属性切换效果
     *
     * @param page Apply the transformation to this page
                   将转换效果引用到此page
     * @param position Position of page relative to the current front-and-center                 
     *                 position of the pager. 0 is front and center. 1 is one full             
     *                 page position to the right, and -1 is one page position to the left.
     *                 相对于当前处于中心显示的page的postion。
     *                 0是当前页面。1是右侧页面。
     *                 -1是左侧页面。
     */
    void transformPage(View page, float position);
}

虽然解释还算挺清楚的，不过好像并没有什么卵用啊。根本没说滑动的时候page是如何变化的，position又是如何变化的。对我自己要实现一个切换效果根本没什么帮助啊。那么怎么办？好吧，没办法我们打一下log，看一下是如何变化的：

1. 布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

1. MainActivity