轉載來自:http://blog.csdn.net/leehong2005/article/details/8070538
在看了iOS上面的CoverFlow後,感覺效果真的不錯,就想在android上面實現一個,這個程序在網上參考了一此核心的代碼,當然我添加了一些其他的東西,廢話不多說,先看效果,不然就是無圖無真相。
其實實現這個效果很簡單,下面作一個簡單的介紹
一,創建倒影效果
這個基本思路是:
1.創建一個源圖一樣的圖,利用martrix將圖片旋轉180度。這個倒影圖的高是源圖的一半。
Matrix matrix = new Matrix(); // 1表示放大比例,不放大也不縮小。 // -1表示在y軸上相反,即旋轉180度。 matrix.preScale(1, -1); Bitmap reflectionBitmap = Bitmap.createBitmap( srcBitmap, 0, srcBitmap.getHeight() / 2, // top爲源圖的一半 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上面。
// Prepare the canvas to draw stuff. Canvas canvas = new Canvas(bitmapWithReflection); // Draw the original bitmap. canvas.drawBitmap(srcBitmap, 0, 0, null); // Draw the reflection bitmap. 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)); // Draw the linear shader. canvas.drawRect( 0, srcHeight, srcWidth, bitmapWithReflection.getHeight() + REFLECTION_GAP, paint);
二,擴展Gallery
擴展系統的gallery,我們需要重寫兩個方法,getChildStaticTransformation()和getChildDrawingOrder(),同時,要使這兩個方法能被調用,必須執行如下兩行代碼,文檔上面是有說明的。
// Enable set transformation. this.setStaticTransformationsEnabled(true); // Enable set the children drawing order. this.setChildrenDrawingOrderEnabled(true);
getChildDrawingOrder的實現
@Override protected int getChildDrawingOrder(int childCount, int i) { // Current selected index. 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 the child is in the center, we do not rotate it. if (childCenter == mCoveflowCenter) { transformImageBitmap(child, t, 0); } else { // Calculate the rotation angle. rotationAngle = (int)(((float)(mCoveflowCenter - childCenter) / childWidth) * mMaxRotationAngle); // Make the angle is not bigger than maximum. 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 p_w_picpathMatrix = t.getMatrix(); final int p_w_picpathHeight = child.getHeight(); final int p_w_picpathWidth = child.getWidth(); final int rotation = Math.abs(rotationAngle); // Zoom on Z axis. mCamera.translate(0, 0, mMaxZoom); if (rotation < mMaxRotationAngle) { float zoomAmount = (float)(mMaxZoom + rotation * 1.5f); mCamera.translate(0, 0, zoomAmount); } // Rotate the camera on Y axis. mCamera.rotateY(rotationAngle); // Get the matrix from the camera, in fact, the matrix is S (scale) transformation. mCamera.getMatrix(p_w_picpathMatrix); // The matrix final is T2 * S * T1, first translate the center point to (0, 0), // then scale, and then translate the center point to its original point. // T * S * T // S * T1 p_w_picpathMatrix.postTranslate((p_w_picpathWidth / 2), (p_w_picpathHeight / 2)); // (T2 * S) * T1 p_w_picpathMatrix.preTranslate(-(p_w_picpathWidth / 2), -(p_w_picpathHeight / 2)); mCamera.restore(); }
這裏,簡單說明一個,
第一,先在Z軸上平稱,其實就是得到一個縮放矩陣變換,我這裏簡寫爲 S。
第二,是利用camera這個類來生成matrix,其實mCamera.rotateY就是圍繞Y軸旋轉。這裏生成了一個旋轉矩陣,記爲 R 。經過這兩步,此時調用mCamera.getMatrix(p_w_picpathMatrix); 從Camera中得到matrix,此時這個矩陣中包含了S * R。
第三,最關鍵是下面兩句
// S * T1 p_w_picpathMatrix.postTranslate((p_w_picpathWidth / 2), (p_w_picpathHeight / 2)); // (T2 * S) * T1 p_w_picpathMatrix.preTranslate(-(p_w_picpathWidth / 2), -(p_w_picpathHeight / 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 { /** * The camera class is used to 3D transformation matrix. */ private Camera mCamera = new Camera(); /** * The max rotation angle. */ private int mMaxRotationAngle = 60; /** * The max zoom value (Z axis). */ private int mMaxZoom = -120; /** * The center of the gallery. */ 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); // Enable set transformation. this.setStaticTransformationsEnabled(true); // Enable set the children drawing order. 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) { // Current selected index. 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 the child is in the center, we do not rotate it. if (childCenter == mCoveflowCenter) { transformImageBitmap(child, t, 0); } else { // Calculate the rotation angle. rotationAngle = (int)(((float)(mCoveflowCenter - childCenter) / childWidth) * mMaxRotationAngle); // Make the angle is not bigger than maximum. 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 p_w_picpathMatrix = t.getMatrix(); final int p_w_picpathHeight = child.getHeight(); final int p_w_picpathWidth = child.getWidth(); final int rotation = Math.abs(rotationAngle); // Zoom on Z axis. mCamera.translate(0, 0, mMaxZoom); if (rotation < mMaxRotationAngle) { float zoomAmount = (float)(mMaxZoom + rotation * 1.5f); mCamera.translate(0, 0, zoomAmount); } // Rotate the camera on Y axis. mCamera.rotateY(rotationAngle); // Get the matrix from the camera, in fact, the matrix is S (scale) transformation. mCamera.getMatrix(p_w_picpathMatrix); // The matrix final is T2 * S * T1, first translate the center point to (0, 0), // then scale, and then translate the center point to its original point. // T * S * T // S * T1 p_w_picpathMatrix.postTranslate((p_w_picpathWidth / 2), (p_w_picpathHeight / 2)); // (T2 * S) * T1 p_w_picpathMatrix.preTranslate(-(p_w_picpathWidth / 2), -(p_w_picpathHeight / 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; } // The gap between the reflection bitmap and original bitmap. 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; } // The matrix Matrix matrix = new Matrix(); matrix.preScale(1, -1); try { // The reflection bitmap, width is same with original's, height is half of original's. Bitmap reflectionBitmap = Bitmap.createBitmap( srcBitmap, 0, srcHeight / 2, srcWidth, srcHeight / 2, matrix, false); if (null == reflectionBitmap) { return null; } // Create the bitmap which contains original and reflection bitmap. Bitmap bitmapWithReflection = Bitmap.createBitmap( reflectionWidth, srcHeight + reflectionHeight + REFLECTION_GAP, Config.ARGB_8888); if (null == bitmapWithReflection) { return null; } // Prepare the canvas to draw stuff. Canvas canvas = new Canvas(bitmapWithReflection); // Draw the original bitmap. canvas.drawBitmap(srcBitmap, 0, 0, null); // Draw the reflection bitmap. 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)); // Draw the linear shader. canvas.drawRect( 0, srcHeight, srcWidth, bitmapWithReflection.getHeight() + REFLECTION_GAP, paint); return bitmapWithReflection; } catch (Exception e) { e.printStackTrace(); } return null; } }