Android切换动画之ViewPager

　　有过开发经验的程序员都知道这个效果，就是当我们第一次安装一个软件时有一个使用说明的图片切换效果，他是如何实现的呢？今天我们就一起学习一下吧，难度系数1.0，就是只要你仔细分析，都可以学会。废话不多说，下面我们开始本篇的介绍。

　　本篇我需要使用到ViewPager，对于ViewPager的介绍，就不再详述，网上关于ViewPager的介绍很多，大家可以自行去了解。

　　再进行动画效果制作之前我们先实现一个图片的切换效果。

　　布局文件：

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <com.example.android_viewpager.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.example.android_viewpager.ViewPager>

</RelativeLayout>

　　我们的Activity:

public class MainActivity extends Activity {

    private ViewPager mViewPager;//系统提供的

    int [] imageIds = {R.drawable.guide_image1, R.drawable.guide_image2, R.drawable.guide_image3};
    List<ImageView> listImager = new ArrayList<ImageView>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);//调用系统提供的

        mViewPager.setAdapter(new PagerAdapter() {

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

            @Override
            public Object instantiateItem(ViewGroup container, int position) {

                ImageView imagerView = new ImageView(MainActivity.this);
                imagerView.setImageResource(imageIds[position]);
                imagerView.setScaleType(ScaleType.CENTER_CROP);//设置样式
                container.addView(imagerView);
                listImager.add(imagerView);
                return imagerView;
            }

            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                return arg0 == arg1;
            }

            @Override
            public int getCount() {
                return imageIds.length;
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

　　这样我们最简单的使用说明的效果已经做好了。下面我们来一起看一下如何为我们的切换效果添加一些炫酷效果呢？

　　首先我们想到的是谷歌有没有为我们封装这样的方法，答案是肯定的，大家可以访问谷歌Android API详细了解其中的机制（http://developer.android.com/training/animation/screen-slide.html ）。接下来就有我带领大家先使用一下为ViewPager添加动画效果的实现。

　　调用的方法：

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

　　DepthPageTransformer.java：

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public class DepthPageTransformer implements ViewPager.PageTransformer {

    private static final float MIN_SCALE = 0.75f;

    @SuppressLint("NewApi")
    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);
        }
    }
}

　　对于这段代码代码大家直接把官网的拿过来就可以了。好了到这里我们的切换效果已经实现了，大家可以测试一下了。

　　是不是一些同学已经发现一个问题了，自己的为什么一点效果都没有，是的，这不是你写错的原因，这是因为我们的动画效果都是通过属性动画实现的，而属性动画又是Android3.0以后的版本才支持的，所以大家不为之困扰，换一个高版本的就可以完美呈现了，当然如果你感觉这个效果还不算理想，官网还为我们提供了一个效果，大家同样的操作就可以了。

　　对于上面的提到的关于3.0以前版本不支持的问题，这里我为大家提供一个改进方法：

　　我们对DepthPageTransformer.java进行优化：

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public class myDepthPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    /*
     * 使用ViewHelper替代系统提供的view
     * (non-Javadoc)
     * @see android.support.v4.view.ViewPager.PageTransformer
     * #transformPage(android.view.View, float)
     */

    @SuppressLint("NewApi")
    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) { // [-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 - Math.abs(position));
//            view.setScaleX(scaleFactor);
            ViewHelper.setScaleX(view, scaleFactor);
//            view.setScaleY(scaleFactor);
            ViewHelper.setScaleY(view, scaleFactor);

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

　　这样我们通过ViewHelper来替代我们的属性动画属性，来处理我们3.0以前版主不支持属性动画的问题，当我们运行后发现，3.0以后的版本还是没有效果，这是什么原因呢？我们打开ViewPager的源代码发现里面有一句判断：

if (Build.VERSION.SDK_INT >= 11) //Android版本判断

　　对这个就是罪魁祸首，当我们的版本低于3.0时，我们的动画效果代码根本得不到执行，所以如果想要解决这个问题，我们需要从写这个类。把里面setPageTransformer（）里面的版本判断进行一下注释；

public void setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer) {
        //if (Build.VERSION.SDK_INT >= 11) //Android版本判断
        {
            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();
        }
    }

　　然后我们需要把里面的布局文件进行一下更改：

    <com.example.android_viewpager.ViewPagerCompate
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.example.android_viewpager.ViewPagerCompate>

　　然后把MainActivity进行一些更改：

mViewPager = (ViewPagerCompate) findViewById(R.id.viewPager);//修改系统提供的

　　这样我们刚刚修改的效果就可以在3.0以后的版本显示出来了，是不是感觉很神奇。最后我在为大家介绍一个效果：

public class RotateDownPagetransformer implements ViewPager.PageTransformer {

    private static final float MAX_ROTATE = 20F;
    private static float ROTATE = 0F;

    /*
     * 效果分析：
     * 滑动可以分解为：A>B
     * A的position:0.0 >> -1.0
     * B的position:1.0 >> 0.0
     * (non-Javadoc)
     * @see android.support.v4.view.ViewPager.PageTransformer#
     * transformPage(android.view.View, float)
     */

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

        if (position < -1) { // [-Infinity,-1)
            ViewHelper.setAlpha(view, 0);//设置透明度
        } else if (position <= 0) { // A页position:0.0 >> 1.0
            //计算旋转角度
            ROTATE = MAX_ROTATE * position;
            //设置旋转中心
            ViewHelper.setPivotX(view, pageWidth/2);
            ViewHelper.setPivotY(view, view.getMeasuredHeight());
            //设置选择角度
            ViewHelper.setRotation(view, ROTATE);

        } else if (position <= 1) { // B页position:1.0 >> 0.0
            //计算旋转角度
            ROTATE = MAX_ROTATE * position;
            //设置旋转中心
            ViewHelper.setPivotX(view, pageWidth/2);
            ViewHelper.setPivotY(view, view.getMeasuredHeight());
            //设置选择角度
            ViewHelper.setRotation(view, ROTATE);

        } else { // (1,+Infinity]
            ViewHelper.setAlpha(view, 0);
        }
    }
}

　　这是一个类似于扇形的切换效果，好了对于ViewPager的切换动画就已经为大家介绍完毕，内容较多，大家有什么疑问可以留言交流。

时间： 2024-08-07 08:25:47

Android切换动画之ViewPager的相关文章

Android为ViewPager增加切换动画——自定义ViewPager

转载请注明出处:http://blog.csdn.net/allen315410/article/details/44224517 在上篇博客中,我写了一个使用属性动画为ViewPager添加切换动画的方法,并且可以兼容到Android3.0以下版本的设备上,那么关于为ViewPager添加动画的方式还会有另外一种实现方案,就是自定义一个自己带动画效果的ViewPager,关于上篇博客,还没来得及查看的朋友可以点击这里进行查看.下面,我们将新建一个工程,来说说怎样自定义一个自带切换动画效果的Vi

Android–ViewPager切换动画，PageTransformer

transformPage(View view, float position) view就是滑动中的那个view,position这里是float类型,是当前滑动状态的一个表示,比如当滑动到正全屏时,position是0,如果前一页和下一页基本各在屏幕占一半时,前一页的position是-0.5,后一页的posiotn是0.5(是-0.5还是0.5要看当前的view是前面那一页的view还是后面那一页的),所以根据position的值我们就可以自行设置需要的alpha,x/y信息,就是可以用s

Android 实现个性的ViewPager切换动画 实战PageTransformer（兼容Android3.0以下）

1.介绍如何使用setPageTransformer设置切换动画: 2.自定义PageTransformer实现个性的切换动画: 3.该方法在SDK11以下的版本不起作用,我们会对其做一定修改,让其向下兼容. 官方示例地址:http://developer.android.com/training/animation/screen-slide.html 有兴趣的可以去看看~~ 好了,下面开始编写代码~~ 2.setPageTransformer的使用 首先我们迅速的实现一个传统的ViewPage

android ViewPager实现 跑马灯切换图片+多种切换动画

近期在弄个项目.要求有跑马灯效果的图片展示. 网上搜了一堆,都没有完美实现的算了还是自己写吧! 实现原理利用 ViewPager 控件,这个控件本身就支持滑动翻页非常好非常强大好多功能都能用上它.利用mViewPager.setCurrentItem(currentIndex); 来实现切换当前显示的view 在加一个定时器不断设置setCurrentItem 来实现跑马灯效果. 一.主要实现类 凝视非常具体了 一看就知道了 package com.example.marqueeimage; i

Android为ViewPager增加切换动画——使用属性动画

转载请注明出处:http://blog.csdn.net/allen315410/article/details/44200623 ViewPager作为Android最常用的的组件之一,相信大家在项目中会频繁的使用到的,例如利用ViewPager制作引导页.轮播图,甚至做整个app的表现层的框架等等. Android3.0以下不支持切换动画 但是在Android 3.0(API 11)以下的ViewPager是比较死板的,不支持动画特效的,这也就让ViewPager在切换的时候达不到很好的用户

Android项目实战（四）：ViewPager切换动画（3.0版本以上有效果）

原文:Android项目实战(四):ViewPager切换动画(3.0版本以上有效果) 学习内容来自“慕课网” 一般APP进去之后都会有几张图片来导航,这里就学习怎么在这张图片切换的时候添加切换动画效果 先看布局文件 activity_main.layout <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.c

viewPager的切换动画

今天在看苏州通的代码,里面有个引导的代码,涉及到viewPager的切换动画: DepthPageTransformer : 1 package com.soyoungboy.guide; 2 import android.annotation.TargetApi; 3 import android.os.Build; 4 import android.support.v4.view.ViewPager; 5 import android.view.View; 6 /** 7 * 8 * @Cl

简单实现图片间的切换动画 主要用到ViewPager

简单实现图片间的切换动画 主要用到ViewPagerViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view.ViewPager类需要一个PagerAdapter适配器类给它提供数据 PagerAdapter适配器,必须实现四个方法getCount.isViewFromObject.destroyItem.instantiateItem import android.os.Bundle;import android.support.v4.view.PagerA

ViewPager切换动画PageTransformer使用

Android从3.0开始,就添加了很多动画,ViewPager当然也不例外,相对于非常平庸的默认切换动画,Google给我们展示了两个动画例子:DepthPageTransformer和ZoomOutPageTransformer,实际上我们也可以通过实现ViewPager.PageTransformer来做出完全不同的切换动画效果.关键是要理解transformPage(View view, float position)的参数.view理所当然就是滑动中的那个view,position这里