Android ViewPager打造3D畫廊

本文已受權微信公衆號：鴻洋（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來寫一個吧，因而就有了這篇博客！

進入正題：

要實現以下圖的功能，須要如下幾點：

1. 　　使用ViewPager
2.       設置PageTransformer
3.       獲取圖片倒影

  

 

1、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。

 

2、設置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);
            }
        });

 

效果以下：

3、獲取圖片倒影

代碼以下：

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

 

若是您以爲不錯的話就點個贊收藏一下，謝謝！