首页 > 代码库 > android千变万化的ViewPager之二

android千变万化的ViewPager之二

之一已经说了,怎么实现图片的切换。这里我说下怎么给切换的动画添加动画,对!你没听错,我们要给ViewPager加动画了。

首先贴上源代码代码

 1 package com.example.android_viewpager; 2  3 import java.util.ArrayList; 4 import java.util.List; 5  6 import android.app.Activity; 7 import android.os.Bundle; 8 import android.support.v4.view.PagerAdapter; 9 import android.support.v4.view.ViewPager;10 import android.view.View;11 import android.view.ViewGroup;12 import android.widget.ImageView;13 import android.widget.ImageView.ScaleType;14 15 public class MainActivity extends Activity {16     private ViewPager viewpager = null;17     private int[] res = new int[] { R.drawable.guide_image1, R.drawable.guide_image2, R.drawable.guide_image3 };18     private List<ImageView>list = new ArrayList<ImageView>();19     protected void onCreate(Bundle savedInstanceState) {20         super.onCreate(savedInstanceState);21         setContentView(R.layout.activity_main);22         viewpager = (ViewPager) findViewById(R.id.viewpager);23         viewpager.setPageTransformer(true, new DepthPageTransformer());24         viewpager.setAdapter(new PagerAdapter() {25             @Override26             public Object instantiateItem(ViewGroup container, int position) {27                 ImageView imageview = new ImageView(MainActivity.this);28                 imageview.setImageResource(res[position]);29                 imageview.setScaleType(ScaleType.CENTER_CROP);30                 container.addView(imageview);31                 list.add(imageview);32                 return imageview;33             }34             @Override35             public void destroyItem(ViewGroup container, int position, Object object) {36                 // TODO Auto-generated method stub37                 container.removeView(list.get(position));38             }39             public boolean isViewFromObject(View arg0, Object arg1) {40                 // TODO Auto-generated method stub41                 return arg0 == arg1;42             }43             44             @Override45             public int getCount() {46                 // TODO Auto-generated method stub47                 return res.length;48             }49         });50     }51 }

看上面的代码,我们会发现比原来的代码多了一行,这就是会ViewPager设置了动画,但是那个莫名其妙的类从哪里来的?

  从API中可以看出setPageTransformer方法原型是:setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer);第一个参数是布尔类型,就不用说了,而第二个参数是啥?PageTransformer类型参数?

  我来解释下PageTransformer类,它是一个接口,专门用来给ViewPager添加动画的。它里面只有一个抽象方法public void transformPage(View view, float position)。我们通常操作这个方法来给ViewPager添加动画。

  然后,我们来看看怎么怎么使用PageTransformer类。首先我们使用的它的子类,而且是自定义的子类,为什么?因为它没有系统的子类。那怎么创建它的子类呢?我从安卓官方的API上抄来了两个代码,供大家参考

    1.DepthPageTransformer类

 1 private static final float MIN_SCALE = 0.75f; 2  3     public void transformPage(View view, float position) { 4         int pageWidth = view.getWidth(); 5  6         if (position < -1) { // [-Infinity,-1) 7             // This page is way off-screen to the left. 8             view.setAlpha(0); 9 10         } else if (position <= 0) { // [-1,0]11             // Use the default slide transition when moving to the left page12             view.setAlpha(1);13             view.setTranslationX(0);14             view.setScaleX(1);15             view.setScaleY(1);16 17         } else if (position <= 1) { // (0,1]18             // Fade the page out.19             view.setAlpha(1 - position);20 21             // Counteract the default slide transition22             view.setTranslationX(pageWidth * -position);23 24             // Scale the page down (between MIN_SCALE and 1)25             float scaleFactor = MIN_SCALE26                     + (1 - MIN_SCALE) * (1 - Math.abs(position));27             view.setScaleX(scaleFactor);28             view.setScaleY(scaleFactor);29 30         } else { // (1,+Infinity]31             // This page is way off-screen to the right.32             view.setAlpha(0);33         }34     }

    2.ZoomOutPageTransformer类

 1 private static final float MIN_SCALE = 0.85f; 2         private static final float MIN_ALPHA = 0.5f; 3  4         public void transformPage(View view, float position) { 5             int pageWidth = view.getWidth(); 6             int pageHeight = view.getHeight(); 7  8             if (position < -1) { // [-Infinity,-1) 9                 // This page is way off-screen to the left.10                 view.setAlpha(0);11 12             } else if (position <= 1) { // [-1,1]13                 // Modify the default slide transition to shrink the page as well14                 float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));15                 float vertMargin = pageHeight * (1 - scaleFactor) / 2;16                 float horzMargin = pageWidth * (1 - scaleFactor) / 2;17                 if (position < 0) {18                     view.setTranslationX(horzMargin - vertMargin / 2);19                 } else {20                     view.setTranslationX(-horzMargin + vertMargin / 2);21                 }22 23                 // Scale the page down (between MIN_SCALE and 1)24                 view.setScaleX(scaleFactor);25                 view.setScaleY(scaleFactor);26 27                 // Fade the page relative to its size.28                 view.setAlpha(MIN_ALPHA +29                         (scaleFactor - MIN_SCALE) /30                         (1 - MIN_SCALE) * (1 - MIN_ALPHA));31 32             } else { // (1,+Infinity]33                 // This page is way off-screen to the right.34                 view.setAlpha(0);35             }36         }

我们可以通过这两个代码来给ViewPager加上动画。

android千变万化的ViewPager之二