android千变万化的ViewPager之二

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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             @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加上动画。

以上是关于android千变万化的ViewPager之二的主要内容,如果未能解决你的问题,请参考以下文章

android千变万化的ViewPager之二

Android 自定义 ViewPager 打造千变万化的图片切换效果

android千变万化的ViewPager之三

Android移动应用开发之ViewPager

Android移动应用开发之ViewPager

android之ViewPager介绍