android千变万化的ViewPager之四

Posted 2020-08-10

今天，我们来看看自定义ViewPager。

　　首先，我们得知道自定义View得在原来的View的基础上。因此，如果我们想自定义ViewPager，必须继承原来的ViewPager。

　　那么我们为什么要自定义View呢？因为我们可以在自定义的ViewPager上添加动画效果。

1.获得左页面和右页面

   在ViewPager中，我们怎么准确的获得左页面和右页面呢？

   在一个自定义的ViewPager当中，我们会重写这个protected void onPageScrolled(int position, float offset, int offsetPixels) 方法。我们通过测试这个方法中的参数可以得到结论:当页面向右滑动时，offset是0~1，而当向左滑动时，offset是1~0；同时我们会发现在position在未滑动时，position的值就等于当前view的位置。当向右滑动时（正在滑动，并没有滑动完）position是不变的，直到滑动结束才加一；同时向左滑动时（正在滑动，并没有滑动完），position已经减一了，结束后保持减一的值。

  因此，我们得出一个记录:向右滑动时，左页面的下表为position，右页面是position + 1；向左也是这样的。因此我们利用这个特点，写出我们得程序。

代码

布局文件代码

xml代码

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     tools:context="com.example.android_viewpager_anim.MainActivity" >
 6 
 7     <com.example.Custom_ViewPager.Custom_ViewPager
 8         android:id="@+id/viewpager2"
 9         android:layout_width="match_parent"
10         android:layout_height="match_parent" >
11         
12     </com.example.Custom_ViewPager.Custom_ViewPager>
13 
14 </RelativeLayout>

Activity代码

java代码

 1 package com.example.android_viewpager;
 2 
 3 import java.util.ArrayList;
 4 import java.util.List;
 5 
 6 import com.example.Custom_ViewPager.Custom_ViewPager;
 7 
 8 import android.app.Activity;
 9 import android.os.Bundle;
10 import android.support.v4.view.PagerAdapter;
11 import android.util.Log;
12 import android.view.View;
13 import android.view.ViewGroup;
14 import android.widget.ImageView;
15 import android.widget.ImageView.ScaleType;
16 
17 public class MainActivity extends Activity {
18     //使用自定义的Viewpager
19     private Custom_ViewPager viewpager = null;
20     private int[] res = new int[] { R.drawable.guide_image1, R.drawable.guide_image2, R.drawable.guide_image3 };
21     private List<ImageView>list = new ArrayList<ImageView>();
22     protected void onCreate(Bundle savedInstanceState) {
23         Log.i("main", "1");
24         super.onCreate(savedInstanceState);
25         Log.i("main", "2");
26         setContentView(R.layout.activity_main2);
27         Log.i("main", "3");
28         viewpager = (Custom_ViewPager) findViewById(R.id.viewpager2);
29         Log.i("main", "4");
30     //    viewpager.setPageTransformer(true, new MyTransformer());
31         viewpager.setAdapter(new PagerAdapter() {
32             @Override
33             public Object instantiateItem(ViewGroup container, int position) {
34                 ImageView imageview = new ImageView(MainActivity.this);
35                 imageview.setImageResource(res[position]);
36                 imageview.setScaleType(ScaleType.CENTER_CROP);
37                 container.addView(imageview);
38                 list.add(imageview);
39                 viewpager.setViewForpostition(position, imageview);
40                 return imageview;
41             }
42             @Override
43             public void destroyItem(ViewGroup container, int position, Object object) {
44                 // TODO Auto-generated method stub
45                 container.removeView(list.get(position));
46                 viewpager.removeViewFromposition(position);
47             }
48             public boolean isViewFromObject(View arg0, Object arg1) {
49                 // TODO Auto-generated method stub
50                 return arg0 == arg1;
51             }
52             
53             @Override
54             public int getCount() {
55                 // TODO Auto-generated method stub
56                 return res.length;
57             }
58         });
59     }
60 }

自定义的ViewPager

Java代码

 1 package com.example.Custom_ViewPager;
 2 
 3 import java.util.HashMap;
 4 import java.util.Map;
 5 
 6 import com.nineoldandroids.view.ViewHelper;
 7 
 8 import android.content.Context;
 9 import android.support.v4.view.ViewPager;
10 import android.util.AttributeSet;
11 import android.util.Log;
12 import android.widget.ImageView;
13 
14 public class Custom_ViewPager extends ViewPager{
15     private ImageView Left = null;
16     private ImageView Right = null;
17     private final float Min_Scale = 0.1f;
18     private float Scale = 0f;
19     private float trans = 0f;
20     private float alpha = 1f;
21 
22     private Map<Integer , ImageView> map=  new HashMap<Integer, ImageView>();
23     public Custom_ViewPager(Context context) {
24         super(context);
25         // TODO Auto-generated constructor stub
26     }
27     public Custom_ViewPager(Context context, AttributeSet attrs) {
28         
29         super(context, attrs);
30     }
31     public void setViewForpostition(Integer position, ImageView view)
32     {
33         map.put(position, view);
34     }
35     public  void removeViewFromposition(Integer position)
36     {
37         map.remove(position);
38     }
39 
40     protected void onPageScrolled(int position, float offset, int offsetPixels) {
41         //Log.e("main", "position = "+position + " offset = " + offset);
42         Left = map.get(position);
43         Right = map.get(position + 1);
44         animStack(Left, Right, offset, offsetPixels);
45         super.onPageScrolled(position, offset, offsetPixels);
46     }
47     //offsetPixels随offset变化，等于屏幕宽度*offset
48     private void animStack(ImageView Left, ImageView Right, float offset, int offsetPixels)
49     {
50         if(Right != null)
51         {
52             Scale = (1 - Min_Scale) * offset + Min_Scale;
53             Log.i("main", "" + Scale);
54             ViewHelper.setScaleX(Right, Scale);
55             ViewHelper.setScaleY(Right, Scale);
56             /*
57              * getPageMargin()
58              * 或者页面之间的距离
59              */
60             trans = offsetPixels - getWidth() - getPageMargin();
61             ViewHelper.setTranslationX(Right, trans);
62             ViewHelper.setAlpha(Right, Scale);
63         }
64         if(Left != null)
65         {
66             Left.bringToFront();
67             ViewHelper.setAlpha(Left, 1 - Scale);
68         }
69         ImageView imageview = map.get(getCurrentItem());
70         float alpha2 = 1f;
71         imageview.setAlpha(alpha2);
72     }
73 }