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

android千变万化的ViewPager之四

今天,我们来看看自定义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     //使用自定义的Viewpager19     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             @Override33             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             @Override43             public void destroyItem(ViewGroup container, int position, Object object) {44                 // TODO Auto-generated method stub45                 container.removeView(list.get(position));46                 viewpager.removeViewFromposition(position);47             }48             public boolean isViewFromObject(View arg0, Object arg1) {49                 // TODO Auto-generated method stub50                 return arg0 == arg1;51             }52             53             @Override54             public int getCount() {55                 // TODO Auto-generated method stub56                 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 stub26     }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变化,等于屏幕宽度*offset48     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 }

 

android千变万化的ViewPager之四