Android ViewPager打造3D畫廊

LakeshaHeck 8年前發布 | 24K 次閱讀 ViewPager Android開發移動開發

41A661738F23B540A7D6A704B8E54287.jpg

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

使用ViewPage
設置PageTransformer
獲取圖片倒影

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，必須至少實現以下四個方法：

public int getCount()

public Object instantiateItem(ViewGroup container, int position)
public void destroyItem(ViewGroup container, int position, Object object)
public boolean isViewFromObject(View view, Object object)

方法的解釋

放回當前List中的Page數量的
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;
            }

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));
            }

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;
            }

設置PageTransformer

PageTransformer是ViewPager的一個公共成員接口，用于設置當一個頁面滑入和滑出的過度特效，當然，由于是通過屬性動畫來設置的，所以設置的pagetransformer在Android3.0以下會被忽略。

關于實現該接口，只需要實現一個方法即可：

public void transformPage(View page, float position);

對于參數position，需要好好說明一下：

position的取值有如下說明：

position是指的是頁面相對于中間頁面的位置參數，根據位置不同，0的時候在中間最前面，1的時候頁面完全在右邊，-1的時候頁面完全在左邊。如下圖所示：

89D4FD01-3365-459A-AD51-30476A28F274.png

那么要實現上面的效果要怎么做呢？

代碼如下：

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 centerX=page.getWidth()/2;
        float centerY=page.getHeight()/2;
        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());

遇到的問題需要注意

為解決不在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!"
        app:layout_constraintBottom_toBottomOf="@+id/activity_main"
        app:layout_constraintLeft_toLeftOf="@+id/activity_main"
        app:layout_constraintRight_toRightOf="@+id/activity_main"
        app:layout_constraintTop_toTopOf="@+id/activity_main" />
    <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://www.jianshu.com/p/851c387f0a83

本文由用戶 LakeshaHeck 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1476950313547.html

ViewPager Android開發移動開發

Android ViewPager打造3D畫廊

ViewPager是來自android.support.v4的API

設置PageTransformer

獲取圖片倒影

相關經驗

相關資訊

相關文檔

目錄