Android 3D画廊

本篇博客
是在戎码之路的博客上进行整理，方便使用而已。

戎码之路的博客地址：
http://www.cnblogs.com/libertycode/

1.使用ViewPager
2.设置PageTransformer
3.获取图片倒影

步骤一、mainactivity.xml中

为解决不在ViewPager中间页面被剪掉的问题：
需要在ViewPager和其父容器中设置clipChildren为false

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black"
    android:layerType="software"
    android:clipChildren="false"
    tools:context="cn.hnshangyu.a3dviewpagergallery.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="400dp"
        android:clipChildren="false"
        android:layout_centerInParent="true">

    </android.support.v4.view.ViewPager>
</RelativeLayout>

步骤二、设置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/

代码如下：

package cn.hnshangyu.a3dviewpagergallery.transformation;

import android.support.v4.view.ViewPager;
import android.view.View;

public class MyTransformation implements ViewPager.PageTransformer {

    private static final float MIN_SCALE=0.85f;
    @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);
        }
    }
}

步骤三、获取倒影

package cn.hnshangyu.a3dviewpagergallery;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Shader;

/**
 * 获取图片倒影
 */
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;
    }
}

步骤四、MainActivity

为解决触摸滑动ViewPager左右两边的页面无反应的问题：
    需要为ViewPager的父容器设置OnTouchListener，将触摸事件传递给ViewPager

package cn.hnshangyu.a3dviewpagergallery;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import java.util.ArrayList;
import java.util.List;

import butterknife.ButterKnife;
import butterknife.InjectView;
import cn.hnshangyu.a3dviewpagergallery.transformation.MyTransformation;

public class MainActivity extends AppCompatActivity {

    @InjectView(R.id.viewpager)
    ViewPager viewpager;
    @InjectView(R.id.activity_main)
    RelativeLayout activityMain;

    private class myAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return imageViewList.size();
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView = imageViewList.get(position);
            container.addView(imageView);
            return imageView;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {

            return view == object;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(imageViewList.get(position));
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);
        initData();
        initView();
        initListener();
    }

    private List<ImageView> imageViewList = new ArrayList<>();

    private void initData() {
        ImageView imageView1 = new ImageView(this);
//        imageView1.setImageResource(R.mipmap.one);
        imageView1.setImageBitmap(ImageUtil.getReverseBitmapById(R.mipmap.one, this));
        ImageView imageView2 = new ImageView(this);
//        imageView2.setImageResource(R.mipmap.two);
        imageView2.setImageBitmap(ImageUtil.getReverseBitmapById(R.mipmap.two, this));
        ImageView imageView3 = new ImageView(this);
//        imageView3.setImageResource(R.mipmap.three);
        imageView3.setImageBitmap(ImageUtil.getReverseBitmapById(R.mipmap.three, this));
        ImageView imageView4 = new ImageView(this);
//        imageView4.setImageResource(R.mipmap.four);
        imageView4.setImageBitmap(ImageUtil.getReverseBitmapById(R.mipmap.four, this));
        imageViewList.add(imageView1);
        imageViewList.add(imageView2);
        imageViewList.add(imageView3);
        imageViewList.add(imageView4);
    }

    private void initView() {
        viewpager.setOffscreenPageLimit(3);
        int pagerWidth = (int) (getResources().getDisplayMetrics().widthPixels * 3.0f / 5.0f);
        ViewGroup.LayoutParams lp = viewpager.getLayoutParams();
        if (lp == null) {
            lp = new ViewGroup.LayoutParams(pagerWidth, ViewGroup.LayoutParams.MATCH_PARENT);
        } else {
            lp.width = pagerWidth;
        }
        viewpager.setLayoutParams(lp);
        viewpager.setPageMargin(-50);


        viewpager.setAdapter(new myAdapter());
        viewpager.setPageTransformer(true, new MyTransformation());
//        viewpager.setPageTransformer(true, new ZoomTransformation());
    }

    private void initListener() {
        activityMain.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return viewpager.dispatchTouchEvent(event);
            }
        });
    }
}