Android gallery 3D效果

        在看了iOS上面的CoverFlow后，感觉效果真的不错，就想在android上面实现一个，这个程序在网上参考了一此核心的代码，当然我添加了一些其他的东西，废话不多说，先看效果，不然就是无图无真相。

        Demo下载地址：GalleryFlow

其实实现这个效果很简单，下面作一个简单的介绍

一，创建倒影效果

这个基本思路是：

1，创建一个源图一样的图，利用martrix将图片旋转180度。这个倒影图的高是源图的一半。

[java]  view plain copy

1. Matrix matrix = new Matrix();  
2.   
3. // 1表示放大比例，不放大也不缩小。  
4. // -1表示在y轴上相反，即旋转180度。  
5. matrix.preScale(1, -1);  
6.   
7. Bitmap reflectionBitmap = Bitmap.createBitmap(  
8.     srcBitmap,  
9.     0,   
10.     srcBitmap.getHeight() / 2,  // top为源图的一半  
11.     srcBitmap.getWidth(),       // 宽度与源图一样  
12.     srcBitmap.getHeight() / 2,  // 高度与源图的一半  
13.     matrix,  
14.     false);  

2，创建一个最终效果的图，即源图 + 间隙 + 倒影。

[java]  view plain copy

1. final int REFLECTION_GAP = 5;  
2.   
3. Bitmap bitmapWithReflection = Bitmap.createBitmap(  
4.        reflectionWidth,  
5.        srcHeight + reflectionHeight + REFLECTION_GAP,   
6.        Config.ARGB_8888);  

3，依次将源图、倒影图绘制在最终的bitmap上面。

[java]  view plain copy

1. // Prepare the canvas to draw stuff.  
2. Canvas canvas = new Canvas(bitmapWithReflection);  
3.               
4. // Draw the original bitmap.  
5. canvas.drawBitmap(srcBitmap, 0, 0, null);  
6.               
7. // Draw the reflection bitmap.  
8. canvas.drawBitmap(reflectionBitmap, 0, srcHeight + REFLECTION_GAP, null);  

4，创建LinearGradient，从而给定一个由上到下的渐变色。

[java]  view plain copy

1. Paint paint = new Paint();  
2. paint.setAntiAlias(true);  
3. LinearGradient shader = new LinearGradient(  
4.         0,   
5.         srcHeight,   
6.         0,   
7.         bitmapWithReflection.getHeight() + REFLECTION_GAP,   
8.         0x70FFFFFF,   
9.         0x00FFFFFF,  
10.         TileMode.MIRROR);  
11. paint.setShader(shader);  
12. paint.setXfermode(new PorterDuffXfermode(android.graphics.PorterDuff.Mode.DST_IN));  
13.   
14. // Draw the linear shader.  
15. canvas.drawRect(  
16.         0,   
17.         srcHeight,   
18.         srcWidth,   
19.         bitmapWithReflection.getHeight() + REFLECTION_GAP,   
20.         paint);  

二，扩展Gallery

扩展系统的gallery，我们需要重写两个方法，getChildStaticTransformation()和getChildDrawingOrder()，同时，要使这两个方法能被调用，必须执行如下两行代码，文档上面是有说明的。

[java]  view plain copy

1. // Enable set transformation.  
2. this.setStaticTransformationsEnabled(true);  
3. // Enable set the children drawing order.  
4. this.setChildrenDrawingOrderEnabled(true);  

• getChildDrawingOrder的实现

[java]  view plain copy

1. @Override  
2. protected int getChildDrawingOrder(int childCount, int i)  
3. {  
4.     // Current selected index.  
5.     int selectedIndex = getSelectedItemPosition() - getFirstVisiblePosition();  
6.     if (selectedIndex < 0)   
7.     {  
8.         return i;  
9.     }  
10.       
11.     if (i < selectedIndex)  
12.     {  
13.         return i;  
14.     }  
15.     else if (i >= selectedIndex)  
16.     {  
17.         return childCount - 1 - i + selectedIndex;  
18.     }  
19.     else  
20.     {  
21.         return i;  
22.     }  
23. }  

这里为什么要计算drawing order，因为从上图中看到，我们的效果是：中间左边的顺序是 0， 1， 2，右边的child覆盖左边的child，而在中间右边的顺序正好相反，左边的覆盖右边的，所以我们要重写这个方法，而gallery自身的实现，不是这种效果。

• getChildStaticTransformation的实现

[java]  view plain copy

1. @Override  
2. protected boolean getChildStaticTransformation(View child, Transformation t)  
3. {  
4.     super.getChildStaticTransformation(child, t);  
5.       
6.     final int childCenter = getCenterOfView(child);  
7.     final int childWidth  = child.getWidth();  
8.       
9.     int rotationAngle = 0;  
10.     t.clear();  
11.     t.setTransformationType(Transformation.TYPE_MATRIX);  
12.       
13.     // If the child is in the center, we do not rotate it.  
14.     if (childCenter == mCoveflowCenter)  
15.     {  
16.         transformImageBitmap(child, t, 0);  
17.     }  
18.     else  
19.     {  
20.         // Calculate the rotation angle.  
21.         rotationAngle = (int)(((float)(mCoveflowCenter - childCenter) / childWidth) * mMaxRotationAngle);  
22.           
23.         // Make the angle is not bigger than maximum.  
24.         if (Math.abs(rotationAngle) > mMaxRotationAngle)  
25.         {  
26.             rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle : mMaxRotationAngle;  
27.         }  
28.           
29.         transformImageBitmap(child, t, rotationAngle);  
30.     }  
31.       
32.     return true;  
33. }  

这个方法就是根据child来计算它的transformation（变换），我们需要去修改它里面的matrix，从而达到旋转的效果。根据位置和角度来计算的matrix的方法写在另外一个方法transformImageBitmap中实现。

• transformImageBitmap()的实现

[java]  view plain copy

1. private void transformImageBitmap(View child, Transformation t, int rotationAngle)  
2. {  
3.     mCamera.save();  
4.       
5.     final Matrix imageMatrix = t.getMatrix();  
6.     final int imageHeight = child.getHeight();  
7.     final int imageWidth  = child.getWidth();  
8.     final int rotation    = Math.abs(rotationAngle);  
9.       
10.     // Zoom on Z axis.  
11.     mCamera.translate(0, 0, mMaxZoom);  
12.       
13.     if (rotation < mMaxRotationAngle)  
14.     {  
15.         float zoomAmount = (float)(mMaxZoom + rotation * 1.5f);  
16.         mCamera.translate(0, 0, zoomAmount);  
17.     }  
18.       
19.     // Rotate the camera on Y axis.  
20.     mCamera.rotateY(rotationAngle);  
21.     // Get the matrix from the camera, in fact, the matrix is S (scale) transformation.  
22.     mCamera.getMatrix(imageMatrix);  
23.       
24.     // The matrix final is T2 * S * T1, first translate the center point to (0, 0),   
25.     // then scale, and then translate the center point to its original point.  
26.     // T * S * T  
27.       
28.     // S * T1  
29.     imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));  
30.     // (T2 * S) * T1  
31.     imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));  
32.       
33.     mCamera.restore();  
34. }  

这里，简单说明一个，

        第一，先在Z轴上平称，其实就是得到一个缩放矩阵变换，我这里简写为 S。

        第二，是利用camera这个类来生成matrix，其实mCamera.rotateY就是围绕Y轴旋转。这里生成了一个旋转矩阵，记为 R 。经过这两步，此时调用mCamera.getMatrix(imageMatrix); 从Camera中得到matrix，此时这个矩阵中包含了S * R。

        第三，最关键是下面两句       

[java]  view plain copy

1. // S * T1  
2.  imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));  
3.  // (T2 * S) * T1  
4.  imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));  

        由于这里涉及到旋转与缩放，缩放操作其实应该是针对Child中点进行了，这里就是作一个平衡操作，我们必须是先平移，再缩放，再平移回原来位置，所以，我们最终的矩阵变换应该是这样的：

        M = T * （S * R） * T1   （这里在T1表示与T相反）。

三，完整代码

GalleryFlow.java

[java]  view plain copy

1. import android.content.Context;  
2. import android.graphics.Camera;  
3. import android.graphics.Matrix;  
4. import android.util.AttributeSet;  
5. import android.view.View;  
6. import android.view.animation.Transformation;  
7. import android.widget.Gallery;  
8.   
9. public class GalleryFlow extends Gallery  
10. {  
11.     /** 
12.      * The camera class is used to 3D transformation matrix. 
13.      */  
14.     private Camera mCamera = new Camera();  
15.       
16.     /** 
17.      * The max rotation angle. 
18.      */  
19.     private int mMaxRotationAngle = 60;  
20.       
21.     /** 
22.      * The max zoom value (Z axis). 
23.      */  
24.     private int mMaxZoom = -120;  
25.       
26.     /** 
27.      * The center of the gallery. 
28.      */  
29.     private int mCoveflowCenter = 0;  
30.       
31.     public GalleryFlow(Context context)  
32.     {  
33.         this(context, null);  
34.     }  
35.       
36.     public GalleryFlow(Context context, AttributeSet attrs)  
37.     {  
38.         this(context, attrs, 0);  
39.     }  
40.       
41.     public GalleryFlow(Context context, AttributeSet attrs, int defStyle)  
42.     {  
43.         super(context, attrs, defStyle);  
44.           
45.         // Enable set transformation.  
46.         this.setStaticTransformationsEnabled(true);  
47.         // Enable set the children drawing order.  
48.         this.setChildrenDrawingOrderEnabled(true);  
49.     }  
50.       
51.     public int getMaxRotationAngle()  
52.     {  
53.         return mMaxRotationAngle;  
54.     }  
55.       
56.     public void setMaxRotationAngle(int maxRotationAngle)  
57.     {  
58.         mMaxRotationAngle = maxRotationAngle;  
59.     }  
60.       
61.     public int getMaxZoom()  
62.     {  
63.         return mMaxZoom;  
64.     }  
65.       
66.     public void setMaxZoom(int maxZoom)  
67.     {  
68.         mMaxZoom = maxZoom;  
69.     }  
70.       
71.     @Override  
72.     protected int getChildDrawingOrder(int childCount, int i)  
73.     {  
74.         // Current selected index.  
75.         int selectedIndex = getSelectedItemPosition() - getFirstVisiblePosition();  
76.         if (selectedIndex < 0)   
77.         {  
78.             return i;  
79.         }  
80.           
81.         if (i < selectedIndex)  
82.         {  
83.             return i;  
84.         }  
85.         else if (i >= selectedIndex)  
86.         {  
87.             return childCount - 1 - i + selectedIndex;  
88.         }  
89.         else  
90.         {  
91.             return i;  
92.         }  
93.     }  
94.       
95.     @Override  
96.     protected void onSizeChanged(int w, int h, int oldw, int oldh)  
97.     {  
98.         mCoveflowCenter = getCenterOfCoverflow();  
99.         super.onSizeChanged(w, h, oldw, oldh);  
100.     }  
101.       
102.     private int getCenterOfView(View view)  
103.     {  
104.         return view.getLeft() + view.getWidth() / 2;  
105.     }  
106.       
107.     @Override  
108.     protected boolean getChildStaticTransformation(View child, Transformation t)  
109.     {  
110.         super.getChildStaticTransformation(child, t);  
111.           
112.         final int childCenter = getCenterOfView(child);  
113.         final int childWidth  = child.getWidth();  
114.           
115.         int rotationAngle = 0;  
116.         t.clear();  
117.         t.setTransformationType(Transformation.TYPE_MATRIX);  
118.           
119.         // If the child is in the center, we do not rotate it.  
120.         if (childCenter == mCoveflowCenter)  
121.         {  
122.             transformImageBitmap(child, t, 0);  
123.         }  
124.         else  
125.         {  
126.             // Calculate the rotation angle.  
127.             rotationAngle = (int)(((float)(mCoveflowCenter - childCenter) / childWidth) * mMaxRotationAngle);  
128.               
129.             // Make the angle is not bigger than maximum.  
130.             if (Math.abs(rotationAngle) > mMaxRotationAngle)  
131.             {  
132.                 rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle : mMaxRotationAngle;  
133.             }  
134.               
135.             transformImageBitmap(child, t, rotationAngle);  
136.         }  
137.           
138.         return true;  
139.     }  
140.       
141.     private int getCenterOfCoverflow()  
142.     {  
143.         return (getWidth() - getPaddingLeft() - getPaddingRight()) / 2 + getPaddingLeft();  
144.     }  
145.       
146.     private void transformImageBitmap(View child, Transformation t, int rotationAngle)  
147.     {  
148.         mCamera.save();  
149.           
150.         final Matrix imageMatrix = t.getMatrix();  
151.         final int imageHeight = child.getHeight();  
152.         final int imageWidth  = child.getWidth();  
153.         final int rotation    = Math.abs(rotationAngle);  
154.           
155.         // Zoom on Z axis.  
156.         mCamera.translate(0, 0, mMaxZoom);  
157.           
158.         if (rotation < mMaxRotationAngle)  
159.         {  
160.             float zoomAmount = (float)(mMaxZoom + rotation * 1.5f);  
161.             mCamera.translate(0, 0, zoomAmount);  
162.         }  
163.           
164.         // Rotate the camera on Y axis.  
165.         mCamera.rotateY(rotationAngle);  
166.         // Get the matrix from the camera, in fact, the matrix is S (scale) transformation.  
167.         mCamera.getMatrix(imageMatrix);  
168.           
169.         // The matrix final is T2 * S * T1, first translate the center point to (0, 0),   
170.         // then scale, and then translate the center point to its original point.  
171.         // T * S * T  
172.           
173.         // S * T1  
174.         imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));  
175.         // (T2 * S) * T1  
176.         imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));  
177.           
178.         mCamera.restore();  
179.     }  
180. }  

BitmapUtil.java

[java]  view plain copy

1. package com.lee.gallery3d.utils;  
2.   
3. import android.graphics.Bitmap;  
4. import android.graphics.Bitmap.Config;  
5. import android.graphics.Canvas;  
6. import android.graphics.LinearGradient;  
7. import android.graphics.Matrix;  
8. import android.graphics.Paint;  
9. import android.graphics.PixelFormat;  
10. import android.graphics.PorterDuffXfermode;  
11. import android.graphics.Shader.TileMode;  
12. import android.graphics.drawable.Drawable;  
13.   
14. public class BitmapUtil  
15. {  
16.     public static Bitmap createReflectedBitmap(Bitmap srcBitmap)  
17.     {  
18.         if (null == srcBitmap)  
19.         {  
20.             return null;  
21.         }  
22.           
23.         // The gap between the reflection bitmap and original bitmap.   
24.         final int REFLECTION_GAP = 4;  
25.           
26.         int srcWidth  = srcBitmap.getWidth();  
27.         int srcHeight = srcBitmap.getHeight();  
28.         int reflectionWidth  = srcBitmap.getWidth();  
29.         int reflectionHeight = srcBitmap.getHeight() / 2;  
30.           
31.         if (0 == srcWidth || srcHeight == 0)  
32.         {  
33.             return null;  
34.         }  
35.           
36.         // The matrix  
37.         Matrix matrix = new Matrix();  
38.         matrix.preScale(1, -1);  
39.           
40.         try  
41.         {  
42.             // The reflection bitmap, width is same with original's, height is half of original's.  
43.             Bitmap reflectionBitmap = Bitmap.createBitmap(  
44.                     srcBitmap,  
45.                     0,   
46.                     srcHeight / 2,  
47.                     srcWidth,   
48.                     srcHeight / 2,  
49.                     matrix,  
50.                     false);  
51.               
52.             if (null == reflectionBitmap)  
53.             {  
54.                 return null;  
55.             }  
56.               
57.             // Create the bitmap which contains original and reflection bitmap.  
58.             Bitmap bitmapWithReflection = Bitmap.createBitmap(  
59.                     reflectionWidth,  
60.                     srcHeight + reflectionHeight + REFLECTION_GAP,   
61.                     Config.ARGB_8888);  
62.               
63.             if (null == bitmapWithReflection)  
64.             {  
65.                 return null;  
66.             }  
67.               
68.             // Prepare the canvas to draw stuff.  
69.             Canvas canvas = new Canvas(bitmapWithReflection);  
70.               
71.             // Draw the original bitmap.  
72.             canvas.drawBitmap(srcBitmap, 0, 0, null);  
73.               
74.             // Draw the reflection bitmap.  
75.             canvas.drawBitmap(reflectionBitmap, 0, srcHeight + REFLECTION_GAP, null);  
76.               
77.             Paint paint = new Paint();  
78.             paint.setAntiAlias(true);  
79.             LinearGradient shader = new LinearGradient(  
80.                     0,   
81.                     srcHeight,   
82.                     0,   
83.                     bitmapWithReflection.getHeight() + REFLECTION_GAP,   
84.                     0x70FFFFFF,   
85.                     0x00FFFFFF,  
86.                     TileMode.MIRROR);  
87.             paint.setShader(shader);  
88.             paint.setXfermode(new PorterDuffXfermode(android.graphics.PorterDuff.Mode.DST_IN));  
89.               
90.             // Draw the linear shader.  
91.             canvas.drawRect(  
92.                     0,   
93.                     srcHeight,   
94.                     srcWidth,   
95.                     bitmapWithReflection.getHeight() + REFLECTION_GAP,   
96.                     paint);  
97.               
98.             return bitmapWithReflection;  
99.         }  
100.         catch (Exception e)  
101.         {  
102.             e.printStackTrace();  
103.         }  
104.           
105.         return null;  
106.     }  
107. }