android千变万化的ViewPager之二

Posted 2020-08-09

之一已经说了，怎么实现图片的切换。这里我说下怎么给切换的动画添加动画，对！你没听错，我们要给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             @Override
26             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             @Override
35             public void destroyItem(ViewGroup container, int position, Object object) {
36                 // TODO Auto-generated method stub
37                 container.removeView(list.get(position));
38             }
39             public boolean isViewFromObject(View arg0, Object arg1) {
40                 // TODO Auto-generated method stub
41                 return arg0 == arg1;
42             }
43             
44             @Override
45             public int getCount() {
46                 // TODO Auto-generated method stub
47                 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 page
12             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 transition
22             view.setTranslationX(pageWidth * -position);
23 
24             // Scale the page down (between MIN_SCALE and 1)
25             float scaleFactor = MIN_SCALE
26                     + (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 well
14                 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加上动画。