Android_ViewPager切换动画详解（兼容3.0以下）

转载请标明出处：http://write.blog.csdn.net/mdeditor#!postId=75213294，本文出自：【Alan的博客】

概述

在使用v4包下的ViewPager控件时，默认的视图切换动画很一般，有什么办法可以实现自定义的切换动画，打造千变万化的视图切换效果呢？其实ViewPager自带了一个setPageTransformer用于设置切换动画，我看了一下目前有300多行的ViewPager源码，在其中找到了该方法setPageTransformer以及自定义动画的接口PageTransformer 。

 public void setPageTransformer(boolean reverseDrawingOrder,   android.support.v4.view.ViewPager.PageTransformer transformer) { /* compiled code */ }


public interface PageTransformer {
public void transformPage(View page, float position);
}

---

本博文将：

• 介绍setPageTransformer方法的具体使用
• 解决该方法在3.0以下系统即SDK11无效的问题，实现向下兼容
• 通过了解PageTransformer接口的用法，实现自定义个性切换动画

---

开始工作了~~
###setPageTransformer的使用

• 先来个Viewpager的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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">
</android.support.v4.view.ViewPager>
</RelativeLayout>

---

• HomeActivity：

package com.android.viewpager_anim;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;

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



/**
=================================================
*作者: lty
*描述:主界面，实现带有切换动画的Viewpager
===============================================
*/

public class HomeActivity extends AppCompatActivity {

    /**
     * 定义ViewPager
     */
    private ViewPager viewPager;
    /**
     * 页卡数据
     */
    private List<View> vList;
    /**
     * ViewPager的适配器
     */
    private MyPagerAdapter pagerAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        /**
         * 绑定控件
         */
        viewPager= (ViewPager) findViewById(R.id.viewPager);


       

        /**
         * 初始化页面数据
         */
        initData();
        /**
         * 配置适配器
         */
        pagerAdapter = new MyPagerAdapter(vList);
            viewPager.setAdapter(pagerAdapter);
    }



    private void initData() {
        //页面数据
        vList = new ArrayList<View>();
        View view1 = LayoutInflater.from(this).inflate(R.layout.view01, null);
        vList.add(view1);
        View view2 = LayoutInflater.from(this).inflate(R.layout.view02, null);
        vList.add(view2);
        View view3 = LayoutInflater.from(this).inflate(R.layout.view03, null);
        vList.add(view3);
    }
}

结合Google给出了两种动画示例：
DepthPageTransformer和ZoomOutPageTransformer，代码如下

DepthPageTransformer

public class DepthPageTransformer implements ViewPager.PageTransformer {
    /**
     * Scale the page down
     */
    private static float MIN_SCALE = 0.75f;

    /**
     *
     * @param view
     * @param position  对应三个临界值-1 0 1
     */
    @SuppressLint("NewApi")
    @Override
    public void transformPage(View view, float 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);

        }
    }

}

在绑定控件后加入：viewPager.setPageTransformer(true, new DepthPageTransformer());

效果图参考：

ZoomOutPageTransformer

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    /**
     * Scale the page down
     */
    private static float MIN_SCALE = 0.85f;
    /**
     * pageItem alpha
     */
    private static float MIN_ALPHA = 0.5f;

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

        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);
        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to
            // shrink the page as well
            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);
            }
            // Scale the page down (between MIN_SCALE and 1)
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);
            // Fade the page relative to its size.
            view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE)
                    / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

在绑定控件后加入：viewPager.setPageTransformer(true, new ZoomOutPageTransformer());

效果图参考如下：

接下来，我们对setPageTransformer的使用版本向下兼容：

先来了解一下为什么在3.0系统以下，该方法失效

摘自ViewPager源码：

 public void setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) {
        if (Build.VERSION.SDK_INT >= 11) {
            final boolean hasTransformer = transformer != null;
            final boolean needsPopulate = hasTransformer != (mPageTransformer != null);
            mPageTransformer = transformer;
            setChildrenDrawingOrderEnabledCompat(hasTransformer);
            if (hasTransformer) {
                mDrawingOrder = reverseDrawingOrder ? DRAW_ORDER_REVERSE : DRAW_ORDER_FORWARD;
            } else {
                mDrawingOrder = DRAW_ORDER_DEFAULT;
            }
            if (needsPopulate) populate();
        }
    }

从源码中可以看到，我们在调用该方法的时候，里面进行了对SDK大小的判断，当安装的设备大于等于3.0系统时，才会执行上面的属性动画，当然属性动画也是3.0之后才提出的，为了解决这个问题，我们引入一个动画管理Jar包——nineoldandroids

---

修改后的代码参考：

public class DepthPageTransformer implements ViewPager.PageTransformer {
    /**
     * Scale the page down
     */
    private static float MIN_SCALE = 0.75f;

    /**
     *
     * @param view
     * @param position  对应三个临界值-1 0 1
     */
    @SuppressLint("NewApi")
    @Override
    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1)
        { // [-Infinity,-1)
            // This page is way off-screen to the left.
            // view.setAlpha(0);
            ViewHelper.setAlpha(view, 0);
        } else if (position <= 0)// a页滑动至b页 ； a页从 0.0 -1 ；b页从1 ~ 0.0
        { // [-1,0]
            // Use the default slide transition when moving to the left page
            // view.setAlpha(1);
            ViewHelper.setAlpha(view, 1);
            // view.setTranslationX(0);
            ViewHelper.setTranslationX(view, 0);
            // view.setScaleX(1);
            ViewHelper.setScaleX(view, 1);
            // view.setScaleY(1);
            ViewHelper.setScaleY(view, 1);

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

            // Counteract the default slide transition
            // view.setTranslationX(pageWidth * -position);
            ViewHelper.setTranslationX(view, pageWidth * -position);

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

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

在绑定控件后加入：viewPager.setPageTransformer(true, new DepthPageTransformer())，同时将编译的最小SDK设为2.3，进行测试;

自定义PageTransformer实现个性切换动画

先来看一下官方对这个接口***ViewPager.PageTransformer***的描述

/**
* A PageTransformer is invoked whenever a visible/attached page is scrolled.
* This offers an opportunity for the application to apply a custom transformation
* to the page views using animation properties.
*

As property animation is only supported as of Android 3.0 and forward,
* setting a PageTransformer on a ViewPager on earlier platform versions will
* be ignored.

/
public interface PageTransformer {
/*
* Apply a property transformation to the given page.
* @param page Apply the transformation to this 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.
*/
public void transformPage(View page, float position);
}

 可以看到该接口只有一个方法，**第一个view是应用动画的控件**，**第二个是一个float类型的值**。
 这里的position代表当前滑动状态，从源码中可以看出它有***三个临界值-1 0 1***。-1代表当前view的前一个view所在的位置，0代表当前屏幕显示的view的位置，1代表当前view的下一个view所在的位置。

如图片：~~

其实从官方示例的注释就能看出：

[-Infinity,-1) 、(1,+Infinity] 代表已经看不到了
[-1,1]其他两个的View都已经看不到了~~，我们实际操作的重要部分

假设现在ViewPager从A页滑出到B页，则:

A页的position变化就是( 0, -1]——消失

B页的position变化就是[ 1 , 0 ]——显示

官方给的例子，有透明度、偏移量、缩放变化，这里来一个角度变化，即rotation;

大概的效果是这样的：

重点部分解析：
//设置View旋转的中心X轴、Y轴
ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f);
ViewHelper.setPivotY(view, view.getMeasuredHeight());
依然是ViewPager在A页现在滑出B页
那么A页应当在滑动过程中0度到-20度的偏移，B页应当在滑动过程中+20度到0度的偏移
结合
A页的position变化就是( 0, -1]
B页的position变化就是[ 1 , 0 ]
那么旋转的角度即：mRot = (20 * position); A页 mRot :0 ,~ -20 ; B页 mRot :20 ~ 0 ;
完整代码如下：

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

import com.nineoldandroids.view.ViewHelper;

public class RotateDownPageTransformer implements ViewPager.PageTransformer
{
    private static final float ROT_MAX = 20.0f;
    private float mRot;
    public void transformPage(View view, float position)
    {
        Log.e("TAG", view + " , " + position + "");
        if (position < -1)
        { // [-Infinity,-1)
            // This page is way off-screen to the left.
            ViewHelper.setRotation(view, 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);
                ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f);
                ViewHelper.setPivotY(view, view.getMeasuredHeight());
                ViewHelper.setRotation(view, mRot);
            } else
            {
                mRot = (ROT_MAX * position);
                ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f);
                ViewHelper.setPivotY(view, view.getMeasuredHeight());
                ViewHelper.setRotation(view, 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.
            ViewHelper.setRotation(view, 0);
        }
    }
}

再来一个角度旋转+缩放（兼容3.0以下）：

完整代码参考：

package com.c.viewpager_anim;

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

import com.nineoldandroids.view.ViewHelper;

public class RotateAndZooomDownPageTransformer implements ViewPager.PageTransformer {
//旋转最大精度
    private static final float ROT_MAX = 20.0f;
    private float mRot;

    /**
     * Scale the page down
     */
    private static float MIN_SCALE = 0.85f;

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

        int pageHeight = view.getHeight();
        /*****************************/
        Log.e("TAG", view + " , " + position + "");
        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            ViewHelper.setRotation(view, 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
            /*****************************/
            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) {     /*****************************/
                ViewHelper.setTranslationX(view, horzMargin - vertMargin / 2);

                /*****************************/
                mRot = (ROT_MAX * position);
                ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f);
                ViewHelper.setPivotY(view, view.getMeasuredHeight());
                ViewHelper.setRotation(view, mRot);
            } else {
                /*****************************/
                ViewHelper.setTranslationX(view, horzMargin + vertMargin / 2);

                /*****************************/

                mRot = (ROT_MAX * position);
                ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f);
                ViewHelper.setPivotY(view, view.getMeasuredHeight());
                ViewHelper.setRotation(view, mRot);
            }
            // Scale the page down (between MIN_SCALE and 1)
            // Fade the page relative to its size.
            /*****************************/
            ViewHelper.setTranslationX(view, horzMargin - vertMargin / 2);
            ViewHelper.setScaleX(view, scaleFactor);
            ViewHelper.setScaleY(view, scaleFactor);

            /******************************/
        } else { // (1,+Infinity]

            // Scale the page down (between MIN_SCALE and 1)
            // This page is way off-screen to the right.
            ViewHelper.setRotation(view, 0);
        }
    }
}

欢迎留言讨论，最后附上nineoldandroids.jar资源文件：