在看了iOS上面的CoverFlow后,感觉效果真的不错,就想在android上面实现一个,这个程序在网上参考了一此核心的代码,当然我添加了一些其他的东西,废话不多说,先看效果,不然就是无图无真相。
Demo下载地址:GalleryFlow
![Android gallery 3D效果_第1张图片](http://img.e-com-net.com/image/info5/67fff3a040a84c0f9beb706b3aa85d2f.jpg)
其实实现这个效果很简单,下面作一个简单的介绍
一,创建倒影效果
这个基本思路是:
1,创建一个源图一样的图,利用martrix将图片旋转180度。这个倒影图的高是源图的一半。
- Matrix matrix = new Matrix();
-
-
-
- matrix.preScale(1, -1);
-
- Bitmap reflectionBitmap = Bitmap.createBitmap(
- srcBitmap,
- 0,
- srcBitmap.getHeight() / 2,
- srcBitmap.getWidth(),
- srcBitmap.getHeight() / 2,
- matrix,
- false);
2,创建一个最终效果的图,即源图 + 间隙 + 倒影。
- final int REFLECTION_GAP = 5;
-
- Bitmap bitmapWithReflection = Bitmap.createBitmap(
- reflectionWidth,
- srcHeight + reflectionHeight + REFLECTION_GAP,
- Config.ARGB_8888);
3,依次将源图、倒影图绘制在最终的bitmap上面。
-
- Canvas canvas = new Canvas(bitmapWithReflection);
-
-
- canvas.drawBitmap(srcBitmap, 0, 0, null);
-
-
- canvas.drawBitmap(reflectionBitmap, 0, srcHeight + REFLECTION_GAP, null);
4,创建LinearGradient,从而给定一个由上到下的渐变色。
- Paint paint = new Paint();
- paint.setAntiAlias(true);
- LinearGradient shader = new LinearGradient(
- 0,
- srcHeight,
- 0,
- bitmapWithReflection.getHeight() + REFLECTION_GAP,
- 0x70FFFFFF,
- 0x00FFFFFF,
- TileMode.MIRROR);
- paint.setShader(shader);
- paint.setXfermode(new PorterDuffXfermode(android.graphics.PorterDuff.Mode.DST_IN));
-
-
- canvas.drawRect(
- 0,
- srcHeight,
- srcWidth,
- bitmapWithReflection.getHeight() + REFLECTION_GAP,
- paint);
二,扩展Gallery
扩展系统的gallery,我们需要重写两个方法,getChildStaticTransformation()和getChildDrawingOrder(),同时,要使这两个方法能被调用,必须执行如下两行代码,文档上面是有说明的。
-
- this.setStaticTransformationsEnabled(true);
-
- this.setChildrenDrawingOrderEnabled(true);
- @Override
- protected int getChildDrawingOrder(int childCount, int i)
- {
-
- int selectedIndex = getSelectedItemPosition() - getFirstVisiblePosition();
- if (selectedIndex < 0)
- {
- return i;
- }
-
- if (i < selectedIndex)
- {
- return i;
- }
- else if (i >= selectedIndex)
- {
- return childCount - 1 - i + selectedIndex;
- }
- else
- {
- return i;
- }
- }
这里为什么要计算drawing order,因为从上图中看到,我们的效果是:中间左边的顺序是 0, 1, 2,右边的child覆盖左边的child,而在中间右边的顺序正好相反,左边的覆盖右边的,所以我们要重写这个方法,而gallery自身的实现,不是这种效果。
- getChildStaticTransformation的实现
- @Override
- protected boolean getChildStaticTransformation(View child, Transformation t)
- {
- super.getChildStaticTransformation(child, t);
-
- final int childCenter = getCenterOfView(child);
- final int childWidth = child.getWidth();
-
- int rotationAngle = 0;
- t.clear();
- t.setTransformationType(Transformation.TYPE_MATRIX);
-
-
- if (childCenter == mCoveflowCenter)
- {
- transformImageBitmap(child, t, 0);
- }
- else
- {
-
- rotationAngle = (int)(((float)(mCoveflowCenter - childCenter) / childWidth) * mMaxRotationAngle);
-
-
- if (Math.abs(rotationAngle) > mMaxRotationAngle)
- {
- rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle : mMaxRotationAngle;
- }
-
- transformImageBitmap(child, t, rotationAngle);
- }
-
- return true;
- }
这个方法就是根据child来计算它的transformation(变换),我们需要去修改它里面的matrix,从而达到旋转的效果。根据位置和角度来计算的matrix的方法写在另外一个方法transformImageBitmap中实现。
- transformImageBitmap()的实现
- private void transformImageBitmap(View child, Transformation t, int rotationAngle)
- {
- mCamera.save();
-
- final Matrix imageMatrix = t.getMatrix();
- final int imageHeight = child.getHeight();
- final int imageWidth = child.getWidth();
- final int rotation = Math.abs(rotationAngle);
-
-
- mCamera.translate(0, 0, mMaxZoom);
-
- if (rotation < mMaxRotationAngle)
- {
- float zoomAmount = (float)(mMaxZoom + rotation * 1.5f);
- mCamera.translate(0, 0, zoomAmount);
- }
-
-
- mCamera.rotateY(rotationAngle);
-
- mCamera.getMatrix(imageMatrix);
-
-
-
-
-
-
- imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));
-
- imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));
-
- mCamera.restore();
- }
这里,简单说明一个,
第一,先在Z轴上平称,其实就是得到一个缩放矩阵变换,我这里简写为 S。
第二,是利用camera这个类来生成matrix,其实mCamera.rotateY就是围绕Y轴旋转。这里生成了一个旋转矩阵,记为 R 。经过这两步,此时调用mCamera.getMatrix(imageMatrix); 从Camera中得到matrix,此时这个矩阵中包含了S * R。
第三,最关键是下面两句
-
- imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));
-
- imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));
由于这里涉及到旋转与缩放,缩放操作其实应该是针对Child中点进行了,这里就是作一个平衡操作,我们必须是先平移,再缩放,再平移回原来位置,所以,我们最终的矩阵变换应该是这样的:
M = T * (S * R) * T1 (这里在T1表示与T相反)。
三,完整代码
GalleryFlow.java
- import android.content.Context;
- import android.graphics.Camera;
- import android.graphics.Matrix;
- import android.util.AttributeSet;
- import android.view.View;
- import android.view.animation.Transformation;
- import android.widget.Gallery;
-
- public class GalleryFlow extends Gallery
- {
-
-
-
- private Camera mCamera = new Camera();
-
-
-
-
- private int mMaxRotationAngle = 60;
-
-
-
-
- private int mMaxZoom = -120;
-
-
-
-
- private int mCoveflowCenter = 0;
-
- public GalleryFlow(Context context)
- {
- this(context, null);
- }
-
- public GalleryFlow(Context context, AttributeSet attrs)
- {
- this(context, attrs, 0);
- }
-
- public GalleryFlow(Context context, AttributeSet attrs, int defStyle)
- {
- super(context, attrs, defStyle);
-
-
- this.setStaticTransformationsEnabled(true);
-
- this.setChildrenDrawingOrderEnabled(true);
- }
-
- public int getMaxRotationAngle()
- {
- return mMaxRotationAngle;
- }
-
- public void setMaxRotationAngle(int maxRotationAngle)
- {
- mMaxRotationAngle = maxRotationAngle;
- }
-
- public int getMaxZoom()
- {
- return mMaxZoom;
- }
-
- public void setMaxZoom(int maxZoom)
- {
- mMaxZoom = maxZoom;
- }
-
- @Override
- protected int getChildDrawingOrder(int childCount, int i)
- {
-
- int selectedIndex = getSelectedItemPosition() - getFirstVisiblePosition();
- if (selectedIndex < 0)
- {
- return i;
- }
-
- if (i < selectedIndex)
- {
- return i;
- }
- else if (i >= selectedIndex)
- {
- return childCount - 1 - i + selectedIndex;
- }
- else
- {
- return i;
- }
- }
-
- @Override
- protected void onSizeChanged(int w, int h, int oldw, int oldh)
- {
- mCoveflowCenter = getCenterOfCoverflow();
- super.onSizeChanged(w, h, oldw, oldh);
- }
-
- private int getCenterOfView(View view)
- {
- return view.getLeft() + view.getWidth() / 2;
- }
-
- @Override
- protected boolean getChildStaticTransformation(View child, Transformation t)
- {
- super.getChildStaticTransformation(child, t);
-
- final int childCenter = getCenterOfView(child);
- final int childWidth = child.getWidth();
-
- int rotationAngle = 0;
- t.clear();
- t.setTransformationType(Transformation.TYPE_MATRIX);
-
-
- if (childCenter == mCoveflowCenter)
- {
- transformImageBitmap(child, t, 0);
- }
- else
- {
-
- rotationAngle = (int)(((float)(mCoveflowCenter - childCenter) / childWidth) * mMaxRotationAngle);
-
-
- if (Math.abs(rotationAngle) > mMaxRotationAngle)
- {
- rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle : mMaxRotationAngle;
- }
-
- transformImageBitmap(child, t, rotationAngle);
- }
-
- return true;
- }
-
- private int getCenterOfCoverflow()
- {
- return (getWidth() - getPaddingLeft() - getPaddingRight()) / 2 + getPaddingLeft();
- }
-
- private void transformImageBitmap(View child, Transformation t, int rotationAngle)
- {
- mCamera.save();
-
- final Matrix imageMatrix = t.getMatrix();
- final int imageHeight = child.getHeight();
- final int imageWidth = child.getWidth();
- final int rotation = Math.abs(rotationAngle);
-
-
- mCamera.translate(0, 0, mMaxZoom);
-
- if (rotation < mMaxRotationAngle)
- {
- float zoomAmount = (float)(mMaxZoom + rotation * 1.5f);
- mCamera.translate(0, 0, zoomAmount);
- }
-
-
- mCamera.rotateY(rotationAngle);
-
- mCamera.getMatrix(imageMatrix);
-
-
-
-
-
-
- imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));
-
- imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));
-
- mCamera.restore();
- }
- }
BitmapUtil.java
- package com.lee.gallery3d.utils;
-
- import android.graphics.Bitmap;
- import android.graphics.Bitmap.Config;
- import android.graphics.Canvas;
- import android.graphics.LinearGradient;
- import android.graphics.Matrix;
- import android.graphics.Paint;
- import android.graphics.PixelFormat;
- import android.graphics.PorterDuffXfermode;
- import android.graphics.Shader.TileMode;
- import android.graphics.drawable.Drawable;
-
- public class BitmapUtil
- {
- public static Bitmap createReflectedBitmap(Bitmap srcBitmap)
- {
- if (null == srcBitmap)
- {
- return null;
- }
-
-
- final int REFLECTION_GAP = 4;
-
- int srcWidth = srcBitmap.getWidth();
- int srcHeight = srcBitmap.getHeight();
- int reflectionWidth = srcBitmap.getWidth();
- int reflectionHeight = srcBitmap.getHeight() / 2;
-
- if (0 == srcWidth || srcHeight == 0)
- {
- return null;
- }
-
-
- Matrix matrix = new Matrix();
- matrix.preScale(1, -1);
-
- try
- {
-
- Bitmap reflectionBitmap = Bitmap.createBitmap(
- srcBitmap,
- 0,
- srcHeight / 2,
- srcWidth,
- srcHeight / 2,
- matrix,
- false);
-
- if (null == reflectionBitmap)
- {
- return null;
- }
-
-
- Bitmap bitmapWithReflection = Bitmap.createBitmap(
- reflectionWidth,
- srcHeight + reflectionHeight + REFLECTION_GAP,
- Config.ARGB_8888);
-
- if (null == bitmapWithReflection)
- {
- return null;
- }
-
-
- Canvas canvas = new Canvas(bitmapWithReflection);
-
-
- canvas.drawBitmap(srcBitmap, 0, 0, null);
-
-
- canvas.drawBitmap(reflectionBitmap, 0, srcHeight + REFLECTION_GAP, null);
-
- Paint paint = new Paint();
- paint.setAntiAlias(true);
- LinearGradient shader = new LinearGradient(
- 0,
- srcHeight,
- 0,
- bitmapWithReflection.getHeight() + REFLECTION_GAP,
- 0x70FFFFFF,
- 0x00FFFFFF,
- TileMode.MIRROR);
- paint.setShader(shader);
- paint.setXfermode(new PorterDuffXfermode(android.graphics.PorterDuff.Mode.DST_IN));
-
-
- canvas.drawRect(
- 0,
- srcHeight,
- srcWidth,
- bitmapWithReflection.getHeight() + REFLECTION_GAP,
- paint);
-
- return bitmapWithReflection;
- }
- catch (Exception e)
- {
- e.printStackTrace();
- }
-
- return null;
- }
- }