本文已授權微信公眾號：鴻洋（hongyangAndroid）在微信公眾號平台原創首發。
網上有很多關於使用Gallery來打造3D畫廊的博客，但是在關於Gallery的官方說法中表明：
This class was deprecated in API level 16.
This widget is no longer supported. Other horizontally scrolling widgets include HorizontalScrollView and ViewPager from the support library.(來自：https://developer.android.com/reference/android/widget/Gallery.html)
於是我就在想，既然如此，那就用ViewPager來寫一個吧，於是就有了這篇博客！
進入正題：
要實現如下圖的功能，需要以下幾點：
- 使用ViewPager
- 設置PageTransformer
- 獲取圖片倒影
一、ViewPager的使用
ViewPager是來自android.support.v4的API
來自官方的介紹：
Layout manager that allows the user to flip left and right through pages of data. You supply an implementation of a PagerAdapter to generate the pages that the view shows.
渣翻：ViewPager是一種允許用戶左右翻動頁面瀏覽數據的布局管理器，通過應用一個實現了PagerAdapter的實現類來生成展示頁面。（翻譯渣，有錯請提醒，謝謝）
通過上面的解釋可以知道，對於ViewPager的使用，和ListView類似，也是需要Adapter來管理每個ITEM的。
讓我們來了解一下PagerAdapter的使用
要實現PagerAdapter，必須至少實現以下四個方法：
(1)public int getCount()
(2)public Object instantiateItem(ViewGroup container, int position)
(3)public void destroyItem(ViewGroup container, int position, Object object)
(4)public boolean isViewFromObject(View view, Object object)
方法解釋：
第一個方法就不用說了，實現過BaseAdapter的童鞋應該知道的，就是用來放回當前List中的Page數量的。
(2)public Object instantiateItem(ViewGroup container, int position)
先從第二個方法說起，這個方法是負責向ViewGroup也就是ViewPager中添加新的頁面，並返回一個繼承自Object的key，這個key將會在第三個方法destroyItem和第四個方法isViewFromObject中作為參數調用。
代碼可以寫成這樣：
@Override public Object instantiateItem(ViewGroup container, int position) { ImageView imageView=imageViewList.get(position); container.addView(imageView,position); return imageView; }
(3)public void destroyItem(ViewGroup container, int position, Object object)
該方法負責從ViewGroup中移除對應position中的page
代碼：
@Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(imageViewList.get(position)); }
(4)public boolean isViewFromObject(View view, Object object)
確定instantiateItem返回的特定key 對象是否與page View有關聯。由於instantiateItem中可以以自身page為key返回，所以在這里就可以這樣寫：
@Override public boolean isViewFromObject(View view, Object object) { return view==object; }
ViewPager作為布局管理器，非常強大，也可以用來展示Fragment，當然adapter需要使用FragmentPagerAdapter或者FragmentStatePagerAdapter。
二、設置PageTransformer
PageTransformer是ViewPager的一個公共成員接口，用於設置當一個頁面滑入和滑出的過度特效，當然，由於是通過屬性動畫來設置的，所以設置的pagetransformer在Android3.0以下會被忽略。
關於實現該接口，只需要實現一個方法即可：
public void transformPage(View page, float position);
對於參數position，需要好好說明一下：
position的取值有如下說明：
position是指的是頁面相對於中間頁面的位置參數，根據位置不同，0的時候在中間最前面，1的時候頁面完全在右邊，-1的時候頁面完全在左邊。如下圖所示：
關於該接口的更多知識可以看鴻洋大大的這篇博客：http://blog.csdn.net/lmj623565791/article/details/40411921/
那么要實現上面的效果要怎么做呢？
代碼如下：
MyTransformation.java
public class MyTransformation implements ViewPager.PageTransformer { private static final float MIN_SCALE=0.85f; private static final float MIN_ALPHA=0.5f; private static final float MAX_ROTATE=30; private Camera camera=new Camera(); @Override public void transformPage(View page, float position) {float scaleFactor=Math.max(MIN_SCALE,1-Math.abs(position)); float rotate=20*Math.abs(position); if (position<-1){ }else if (position<0){ page.setScaleX(scaleFactor); page.setScaleY(scaleFactor); page.setRotationY(rotate); }else if (position>=0&&position<1){ page.setScaleX(scaleFactor); page.setScaleY(scaleFactor); page.setRotationY(-rotate); } else if (position>=1) { page.setScaleX(scaleFactor); page.setScaleY(scaleFactor); page.setRotationY(-rotate); } } }
然后，
viewPager.setPageTransformer(true,new MyTransformation());
效果如下：
誒，和前面給出的效果圖不一樣啊，為什么呢？一開始我也不明白，后來在網上查閱資料，找到了如下方法：
（1）為解決不在ViewPager中間頁面被剪掉的問題：
需要在ViewPager和其父容器中設置clipChildren為false
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:clipChildren="false" android:layerType="software" android:background="@android:color/black" tools:context="com.example.evanzeng.viewpagertest.MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!"/> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="wrap_content" android:layout_height="400dp" android:layout_gravity="center" android:clipChildren="false" > </android.support.v4.view.ViewPager> </LinearLayout>
(2)為解決觸摸滑動ViewPager左右兩邊的頁面無反應的問題：
需要為ViewPager的父容器設置OnTouchListener，將觸摸事件傳遞給ViewPager
findViewById(R.id.activity_main).setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View view, MotionEvent motionEvent) { return viewPager.dispatchTouchEvent(motionEvent); } });
效果如下：
三、獲取圖片倒影
代碼如下：
public class ImageUtil { public static Bitmap getReverseBitmapById(int resId, Context context){ Bitmap sourceBitmap= BitmapFactory.decodeResource(context.getResources(),resId); Matrix matrix=new Matrix(); matrix.setScale(1,-1); Bitmap inverseBitmap=Bitmap.createBitmap(sourceBitmap,0,sourceBitmap.getHeight()/2,sourceBitmap.getWidth(),sourceBitmap.getHeight()/3,matrix,false); Bitmap groupbBitmap=Bitmap.createBitmap(sourceBitmap.getWidth(),sourceBitmap.getHeight()+sourceBitmap.getHeight()/3+60,sourceBitmap.getConfig()); Canvas gCanvas=new Canvas(groupbBitmap); gCanvas.drawBitmap(sourceBitmap,0,0,null); gCanvas.drawBitmap(inverseBitmap,0,sourceBitmap.getHeight()+50,null); Paint paint=new Paint(); Shader.TileMode tileMode= Shader.TileMode.CLAMP; LinearGradient shader=new LinearGradient(0,sourceBitmap.getHeight()+50,0, groupbBitmap.getHeight(), Color.BLACK,Color.TRANSPARENT,tileMode); paint.setShader(shader); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); gCanvas.drawRect(0,sourceBitmap.getHeight()+50,sourceBitmap.getWidth(),groupbBitmap.getHeight(),paint); return groupbBitmap; } }
參考自http://blog.csdn.net/lovoo/article/details/51591580
最終效果：
以上代碼已上傳自GITHUB，地址如下：https://github.com/liberty2015/3DViewPagerGallery
如果您覺得不錯的話就點個贊收藏一下，謝謝！