Android開發_Android gallery 3D效果_IOS效果

Android gallery 3D效果

        在看了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 imageMatrix = t.getMatrix();        final int imageHeight = child.getHeight();        final int imageWidth  = 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(imageMatrix);                // 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        imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));        // (T2 * S) * T1        imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));                mCamera.restore();    }

這裡，簡單說明一個，

        第一，先在Z軸上平稱，其實就是得到一個縮放矩陣變換，我這裡簡寫為 S。

        第二，是利用camera這個類來產生matrix，其實mCamera.rotateY就是圍繞Y軸旋轉。這裡產生了一個旋轉矩陣，記為 R 。經過這兩步，此時調用mCamera.getMatrix(imageMatrix); 從Camera中得到matrix，此時這個矩陣中包含了S * R。

        第三，最關鍵是下面兩句       

       // S * T1        imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));        // (T2 * S) * T1        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{    /**     * 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 imageMatrix = t.getMatrix();        final int imageHeight = child.getHeight();        final int imageWidth  = 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(imageMatrix);                // 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        imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));        // (T2 * S) * T1        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;        }                // 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;    }}