ViewPager 迴圈滑動+伸縮漸層過度動畫實現多圖片瀏覽，

ViewPager 迴圈滑動+伸縮漸層過度動畫實現多圖片瀏覽，

     

如上。

首先先實現迴圈：

public class MyAdapter extends PagerAdapter {/** * 裝ImageView數組 */private ImageView[] mImageViews;/** * 圖片資源id */private HashMap<Integer, View> mChildrenViews = new LinkedHashMap<Integer, View>();private int[] imgIdArray;private Context context;public MyAdapter(Context context,int []id ){this.context =context;this.imgIdArray = id;initImageView();}private void initImageView(){mImageViews = new ImageView[imgIdArray.length];for (int i = 0; i < mImageViews.length; i++) {ImageView imageView = new ImageView(context);imageView.setBackgroundResource(imgIdArray[i]);mImageViews[i] = imageView;}}@Overridepublic int getCount() {return Integer.MAX_VALUE;}public int getItemCount(){return mImageViews.length;}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic void destroyItem(View container, int position, Object object) {((ViewPager) container).removeView(mImageViews[position % imgIdArray.length]);}@Overridepublic Object instantiateItem(View container, int position) {((ViewPager) container).addView(mImageViews[position % imgIdArray.length],0);setObjectForPosition(mImageViews[position% imgIdArray.length], position);return mImageViews[position% imgIdArray.length];}private void setObjectForPosition(View view, int position){mChildrenViews.put(position, view);}public HashMap<Integer, View> getViewMap(){return mChildrenViews;}}

1.PagerAdapter的處理

為了達到迴圈效果我們將getCount()方法返回一個最大整型數

public int getCount() {return Integer.MAX_VALUE;}

由於item的數量達不到getCount()的數量，當instantiateItem的時候我們對position進行處理

mImageViews[position% imgIdArray.length]

這樣處理後instantiateItem返回的VIEW總是在mImageViews[0]-mImageViews[imgIdArray.length]之間。

2.ViewPager的處理

若只是對pagerAdapter進行處理還不夠，我們會發現往左滑沒有問題，但是往右滑確不能滑動，是因為位置為0，不能往右滑動了。

所以我們先將初始位置設定為圖片數量的100倍

public void setAdapter(PagerAdapter arg0) {// TODO Auto-generated method stubsuper.setAdapter(arg0);//為了在初始狀態的時候可以向右滑動//當前位置設定為100倍資源數量setCurrentItem(((MyAdapter)getAdapter()).getItemCount()*100);}

這樣處理後兩邊都可以滑動了.

動畫：

對切頁進行監聽

private OnPageChangeListener PageChangeListener = new OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0) {if(pageIndicator!=null && pageIndicator.length>1)setSelectBackground(arg0%pageIndicator.length);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stubfloat effectOffset = isSmall(arg1) ? 0 : arg1;//擷取左邊的ViewmLeft = findViewFromObject(arg0);//擷取右邊的ViewmRight = findViewFromObject(arg0 + 1);// 添加切換動畫效果animateAlpha(mLeft, mRight, effectOffset);animateXY(mLeft, mRight, effectOffset);}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}};

每次切頁涉及到的頁面有2個，我們考慮將2個VIEW拿出來用屬性動畫進行處理。

protected void animateAlpha(View left, View right, float positionOffset) {if (left != null) {ViewHelper.setAlpha(left, 1-positionOffset);}if (right != null) {ViewHelper.setAlpha(right, positionOffset);}}private void animateXY(View left, View right, float positionOffset) {if (left != null) {ViewHelper.setPivotX(left, left.getMeasuredWidth());ViewHelper.setPivotY(left, 0);ViewHelper.setScaleX(left, 1-positionOffset);}if (right != null) {ViewHelper.setPivotX(right, 0);ViewHelper.setPivotY(right, 0);ViewHelper.setScaleX(right, positionOffset);}}

源碼下載