Andrid自定义view：打造3D画廊

昨日朋友给我看了下这样的效果，我觉得很有意思，今日闲下来便写了这篇文章，并且传到了github，本文的末尾也附上了链接。网上有很多关于使用Gallery来打造3D画廊的博客，但是做出来的效果我不是很满意，有些许卡顿，索性就选择了viewpager来做，进入正题：下图为效果图。

一、要实现如下图的功能，需要以下3个方法：

（1）public Object instantiateItem(ViewGroup container, int position)

这个方法是负责向ViewGroup也就是ViewPager中添加新的页面，并返回一个继承自Object的key，这个key将会在第三个方法destroyItem和第四个方法isViewFromObject中作为参数调用。

　　代码可以写成这样：

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

(2)public void destroyItem(ViewGroup container, int position, Object object)

　　该方法负责从ViewGroup中移除对应position中的page

　　代码：

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

(3)public boolean isViewFromObject(View view, Object object)

　　确定instantiateItem返回的特定key 对象是否与page View有关联。由于instantiateItem中可以以自身page为key返回，所以在这里就可以这样写：

@Overridepublic 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

*** @author:程龙 date; On 2018/9/19*/
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();@Overridepublic 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());

同时呢我在运行的时候发现了两个问题，

（1）为解决不在ViewPager中间页面被剪掉的问题：

　　需要在ViewPager和其父容器中设置clipChildren为false

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns: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"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Hello World!"/><android.support.v4.view.ViewPagerandroid: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() {@Overridepublic 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;}
}

以上代码已上传自Github，地址如下：https://github.com/Cdlpj/CdlGalleryViewpager

demo下载：点击下载

如果您觉得不错的话对你有帮助就点个赞，有意见可在下方探讨，谢谢！