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资源文件：