使用Android自带Gallery组件实现CoverFlow，源码+解析

首先声明，源代码转载自国外Neil Davies，使用Apache2.0开源协议，请使用源代码的人自觉遵守协议内容。
本文为Kearnel原创，转载请注明出处。

以下是正文：

使用过Android自带的gallery组件的人都知道，gallery实现的效果就是拖动浏览一组图片，相比iphone里也是用于拖动浏览图片的coverflow，显然逊色不少。实际上，可以通过扩展gallery，通过伪3D变换可以基本实现coverflow的效果。本文通过源代码解析这一功能的实现。具体代码作用可参照注释。

最终实现效果如下：

2010-10-23 19:47 上传

下载附件 (212.53 KB)
实现效果

要使用gallery，我们必须首先给其指定一个adapter。在这里，我们实现了一个自定义的ImageAdapter，为图片制作倒影效果。
传入参数为context和程序内drawable中的图片ID数组。之后调用其中的createReflectedImages()方法分别创造每一个图像的倒影效果，生成对应的ImageView数组，最后在getView()中返回。

1. /*
   
2. * Copyright (C) 2010 Neil Davies
   
3. *
   
4. * Licensed under the Apache License, Version 2.0 (the "License");
   
5. * you may not use this file except in compliance with the License.
   
6. * You may obtain a copy of the License at
   
7. *
   
8. * http://www.apache.org/licenses/LICENSE-2.0
   
9. *
   
10. * Unless required by applicable law or agreed to in writing, software
    
11. * distributed under the License is distributed on an "AS IS" BASIS,
    
12. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    
13. * See the License for the specific language governing permissions and
    
14. * limitations under the License.
    
15. *
    
16. * This code is base on the Android Gallery widget and was Created
    
17. * by Neil Davies neild001 'at' gmail dot com to be a Coverflow widget
    
18. *
    
19. * @author Neil Davies
    
20. */
    
21. public class ImageAdapter extends BaseAdapter {
    
22. int mGalleryItemBackground;
    
23. private Context mContext;
    
24. 
    
25. private Integer[] mImageIds ;
    
26. 
    
27. private ImageView[] mImages;
    
28. 
    
29. public ImageAdapter(Context c, int[] ImageIds) {
    
30. mContext = c;
    
31. mImageIds = ImageIds;
    
32. mImages = new ImageView[mImageIds.length];
    
33. }
    
34. 
    
35. public boolean createReflectedImages() {
    
36. // The gap we want between the reflection and the original image
    
37. final int reflectionGap = 4;
    
38. 
    
39. int index = 0;
    
40. for (int imageId : mImageIds) {
    
41. Bitmap originalImage = BitmapFactory.decodeResource(
    
42. mContext.getResources(), imageId);
    
43. int width = originalImage.getWidth();
    
44. int height = originalImage.getHeight();
    
45. 
    
46. // This will not scale but will flip on the Y axis
    
47. Matrix matrix = new Matrix();
    
48. matrix.preScale(1, -1);
    
49. 
    
50. // Create a Bitmap with the flip matrix applied to it.
    
51. // We only want the bottom half of the image
    
52. Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,
    
53. height / 2, width, height / 2, matrix, false);
    
54. 
    
55. // Create a new bitmap with same width but taller to fit
    
56. // reflection
    
57. Bitmap bitmapWithReflection = Bitmap.createBitmap(width,
    
58. (height + height / 2), Config.ARGB_8888);
    
59. 
    
60. // Create a new Canvas with the bitmap that's big enough for
    
61. // the image plus gap plus reflection
    
62. Canvas canvas = new Canvas(bitmapWithReflection);
    
63. // Draw in the original image
    
64. canvas.drawBitmap(originalImage, 0, 0, null);
    
65. // Draw in the gap
    
66. Paint deafaultPaint = new Paint();
    
67. canvas.drawRect(0, height, width, height + reflectionGap,
    
68. deafaultPaint);
    
69. // Draw in the reflection
    
70. canvas.drawBitmap(reflectionImage, 0, height + reflectionGap,
    
71. null);
    
72. 
    
73. // Create a shader that is a linear gradient that covers the
    
74. // reflection
    
75. Paint paint = new Paint();
    
76. LinearGradient shader = new LinearGradient(0,
    
77. originalImage.getHeight(), 0,
    
78. bitmapWithReflection.getHeight() + reflectionGap,
    
79. 0x70ffffff, 0x00ffffff, TileMode.CLAMP);
    
80. // Set the paint to use this shader (linear gradient)
    
81. paint.setShader(shader);
    
82. // Set the Transfer mode to be porter duff and destination in
    
83. paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
    
84. // Draw a rectangle using the paint with our linear gradient
    
85. canvas.drawRect(0, height, width,
    
86. bitmapWithReflection.getHeight() + reflectionGap, paint);
    
87. 
    
88. ImageView imageView = new ImageView(mContext);
    
89. imageView.setImageBitmap(bitmapWithReflection);
    
90. imageView
    
91. .setLayoutParams(new GalleryFlow.LayoutParams(160, 240));
    
92. // imageView.setScaleType(ScaleType.MATRIX);
    
93. mImages[index++] = imageView;
    
94. 
    
95. }
    
96. return true;
    
97. }
    
98. 
    
99. public int getCount() {
    
100. return mImageIds.length;
     
101. }
     
102. 
     
103. public Object getItem(int position) {
     
104. return position;
     
105. }
     
106. 
     
107. public long getItemId(int position) {
     
108. return position;
     
109. }
     
110. 
     
111. public View getView(int position, View convertView, ViewGroup parent) {
     
112. 
     
113. // Use this code if you want to load from resources
     
114. /*
     
115. * ImageView i = new ImageView(mContext);
     
116. * i.setImageResource(mImageIds[position]); i.setLayoutParams(new
     
117. * CoverFlow.LayoutParams(350,350));
     
118. * i.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
     
119. *
     
120. * //Make sure we set anti-aliasing otherwise we get jaggies
     
121. * BitmapDrawable drawable = (BitmapDrawable) i.getDrawable();
     
122. * drawable.setAntiAlias(true); return i;
     
123. */
     
124. 
     
125. return mImages[position];
     
126. }
     
127. 
     
128. /**
     
129. * Returns the size (0.0f to 1.0f) of the views depending on the
     
130. * 'offset' to the center.
     
131. */
     
132. public float getScale(boolean focused, int offset) {
     
133. /* Formula: 1 / (2 ^ offset) */
     
134. return Math.max(0, 1.0f / (float) Math.pow(2, Math.abs(offset)));
     
135. }
     
136. 
     
137. }
     
138. }

复制代码

仅仅实现了图片的倒影效果还不够，因为在coverflow中图片切换是有旋转和缩放效果的，而自带的gallery中并没有实现。因此，我们扩展自带的gallery，实现自己的galleryflow。在原gallery类中，提供了一个方法getChildStaticTransformation()以实现对图片的变换。我们通过覆写这个方法并在其中调用自定义的transformImageBitmap(“每个图片与gallery中心的距离”)方法，，即可实现每个图片做相应的旋转和缩放。其中使用了camera和matrix用于视图变换。具体可参考代码注释。

1. public class GalleryFlow extends Gallery {
   
2. 
   
3.         /**
   
4.          * Graphics Camera used for transforming the matrix of ImageViews
   
5.          */
   
6.         private Camera mCamera = new Camera();
   
7. 
   
8.         /**
   
9.          * The maximum angle the Child ImageView will be rotated by
   
10.          */
    
11.         private int mMaxRotationAngle = 60;
    
12. 
    
13.         /**
    
14.          * The maximum zoom on the centre Child
    
15.          */
    
16.         private int mMaxZoom = -120;
    
17. 
    
18.         /**
    
19.          * The Centre of the Coverflow
    
20.          */
    
21.         private int mCoveflowCenter;
    
22. 
    
23.         public GalleryFlow(Context context) {
    
24.                 super(context);
    
25.                 this.setStaticTransformationsEnabled(true);
    
26.         }
    
27. 
    
28.         public GalleryFlow(Context context, AttributeSet attrs) {
    
29.                 super(context, attrs);
    
30.                 this.setStaticTransformationsEnabled(true);
    
31.         }
    
32. 
    
33.         public GalleryFlow(Context context, AttributeSet attrs, int defStyle) {
    
34.                 super(context, attrs, defStyle);
    
35.                 this.setStaticTransformationsEnabled(true);
    
36.         }
    
37. 
    
38.         /**
    
39.          * Get the max rotational angle of the image
    
40.          *
    
41.          * @return the mMaxRotationAngle
    
42.          */
    
43.         public int getMaxRotationAngle() {
    
44.                 return mMaxRotationAngle;
    
45.         }
    
46. 
    
47.         /**
    
48.          * Set the max rotational angle of each image
    
49.          *
    
50.          * @param maxRotationAngle
    
51.          *            the mMaxRotationAngle to set
    
52.          */
    
53.         public void setMaxRotationAngle(int maxRotationAngle) {
    
54.                 mMaxRotationAngle = maxRotationAngle;
    
55.         }
    
56. 
    
57.         /**
    
58.          * Get the Max zoom of the centre image
    
59.          *
    
60.          * @return the mMaxZoom
    
61.          */
    
62.         public int getMaxZoom() {
    
63.                 return mMaxZoom;
    
64.         }
    
65. 
    
66.         /**
    
67.          * Set the max zoom of the centre image
    
68.          *
    
69.          * @param maxZoom
    
70.          *            the mMaxZoom to set
    
71.          */
    
72.         public void setMaxZoom(int maxZoom) {
    
73.                 mMaxZoom = maxZoom;
    
74.         }
    
75. 
    
76.         /**
    
77.          * Get the Centre of the Coverflow
    
78.          *
    
79.          * @return The centre of this Coverflow.
    
80.          */
    
81.         private int getCenterOfCoverflow() {
    
82.                 return (getWidth() - getPaddingLeft() - getPaddingRight()) / 2
    
83.                                 + getPaddingLeft();
    
84.         }
    
85. 
    
86.         /**
    
87.          * Get the Centre of the View
    
88.          *
    
89.          * @return The centre of the given view.
    
90.          */
    
91.         private static int getCenterOfView(View view) {
    
92.                 return view.getLeft() + view.getWidth() / 2;
    
93.         }
    
94. 
    
95.         /**
    
96.          * {@inheritDoc}
    
97.          *
    
98.          * @see #setStaticTransformationsEnabled(boolean)
    
99.          */
    
100.         protected boolean getChildStaticTransformation(View child, Transformation t) {
     
101. 
     
102.                 final int childCenter = getCenterOfView(child);
     
103.                 final int childWidth = child.getWidth();
     
104.                 int rotationAngle = 0;
     
105. 
     
106.                 t.clear();
     
107.                 t.setTransformationType(Transformation.TYPE_MATRIX);
     
108. 
     
109.                 if (childCenter == mCoveflowCenter) {
     
110.                         transformImageBitmap((ImageView) child, t, 0);
     
111.                 } else {
     
112.                         rotationAngle = (int) (((float) (mCoveflowCenter - childCenter) / childWidth) * mMaxRotationAngle);
     
113.                         if (Math.abs(rotationAngle) > mMaxRotationAngle) {
     
114.                                 rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle
     
115.                                                 : mMaxRotationAngle;
     
116.                         }
     
117.                         transformImageBitmap((ImageView) child, t, rotationAngle);
     
118.                 }
     
119. 
     
120.                 return true;
     
121.         }
     
122. 
     
123.         /**
     
124.          * This is called during layout when the size of this view has changed. If
     
125.          * you were just added to the view hierarchy, you're called with the old
     
126.          * values of 0.
     
127.          *
     
128.          * @param w
     
129.          *            Current width of this view.
     
130.          * @param h
     
131.          *            Current height of this view.
     
132.          * @param oldw
     
133.          *            Old width of this view.
     
134.          * @param oldh
     
135.          *            Old height of this view.
     
136.          */
     
137.         protected void onSizeChanged(int w, int h, int oldw, int oldh) {
     
138.                 mCoveflowCenter = getCenterOfCoverflow();
     
139.                 super.onSizeChanged(w, h, oldw, oldh);
     
140.         }
     
141. 
     
142.         /**
     
143.          * Transform the Image Bitmap by the Angle passed
     
144.          *
     
145.          * @param imageView
     
146.          *            ImageView the ImageView whose bitmap we want to rotate
     
147.          * @param t
     
148.          *            transformation
     
149.          * @param rotationAngle
     
150.          *            the Angle by which to rotate the Bitmap
     
151.          */
     
152.         private void transformImageBitmap(ImageView child, Transformation t,
     
153.                         int rotationAngle) {
     
154.                 mCamera.save();
     
155.                 final Matrix imageMatrix = t.getMatrix();
     
156.                 final int imageHeight = child.getLayoutParams().height;
     
157.                 final int imageWidth = child.getLayoutParams().width;
     
158.                 final int rotation = Math.abs(rotationAngle);
     
159. 
     
160.                 // 在Z轴上正向移动camera的视角，实际效果为放大图片。
     
161.                 // 如果在Y轴上移动，则图片上下移动；X轴上对应图片左右移动。
     
162.                 mCamera.translate(0.0f, 0.0f, 100.0f);
     
163. 
     
164.                 // As the angle of the view gets less, zoom in
     
165.                 if (rotation < mMaxRotationAngle) {
     
166.                         float zoomAmount = (float) (mMaxZoom + (rotation * 1.5));
     
167.                         mCamera.translate(0.0f, 0.0f, zoomAmount);
     
168.                 }
     
169. 
     
170.                 // 在Y轴上旋转，对应图片竖向向里翻转。
     
171.                 // 如果在X轴上旋转，则对应图片横向向里翻转。
     
172.                 mCamera.rotateY(rotationAngle);
     
173.                 mCamera.getMatrix(imageMatrix);
     
174.                 imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));
     
175.                 imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));
     
176.                 mCamera.restore();
     
177.         }
     
178. }

复制代码

代码到这里就结束了。有兴趣的话可以自行调整里面的参数来实现更多更炫的效果。
下面是调用的示例：

1. public void onCreate(Bundle savedInstanceState) {
   
2.                 super.onCreate(savedInstanceState);
   
3.                
   
4.                
   
5.                 setContentView(R.layout.layout_gallery);
   
6.                
   
7.                 Integer[] images = { R.drawable.img0001, R.drawable.img0030,
   
8.                         R.drawable.img0100, R.drawable.img0130, R.drawable.img0200,
   
9.                         R.drawable.img0230, R.drawable.img0300, R.drawable.img0330,
   
10.                         R.drawable.img0354 };
    
11.                
    
12.                 ImageAdapter adapter = new ImageAdapter(this, images);
    
13.                 adapter.createReflectedImages();
    
14. 
    
15.                 GalleryFlow galleryFlow = (GalleryFlow) findViewById(R.id.gallery_flow);
    
16.                 galleryFlow.setAdapter(adapter);
    
17.                
    
18.         }

复制代码

PS1:
可以看出来这样实现的gallery锯齿问题比较严重。可以在createReflectedImages()使用以下代码：

1. BitmapDrawable bd = new BitmapDrawable(bitmapWithReflection);
   
2. bd.setAntiAlias(true);
   
3. ...

复制代码

然后用iv.setImageDrawable(bd);
代替iv.setImageBitmap(bitmapWithReflection);
即可基本消除锯齿。

PS2:
ImageAdapter有待确定的MemoryLeak问题，貌似的Bitmap的decode方法会造成ML，使用ImageAdapter时多次旋转屏幕后会出现OOM。目前可以通过将使用完毕的bimap调用recycle()方法和设置null并及时调用system.gc()得到一些改善，但是问题并不明显。

庆祝精华和推荐，增加3个PS~

PS3 ON PS1：
256楼说到，为什么开启抗锯齿后不明显。答案是，锯齿不可能完全消除，但开启抗锯齿后会有很大改善。
另外还说到为什么android不默认开启锯齿，以下是我的一点想法：
插值是我现在所知道的抗锯齿的算法，也就是计算像素间的相关度对其间插入中间像素以达到平滑图像边缘的效果。但这无疑会耗费了大量的运算。
虽然我没有经过测试，但是我猜测，使用antialias后图形性能至少会下降30%。
当然，在这里没有涉及到复杂的图形运算，所以开启抗锯齿不会有很明显的性能影响，但如果你在模拟器或者低端机型上测试就会发现一点问题。


PS4：
有人问到transformImageBitmap()中这俩句话是什么意思：
    imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));
    imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));
个人的理解如下：
preTranslate相当于在对图像进行任何矩阵变换前先进行preTranslate，postTranslate相反，进行所有变换后再执行postTranlate。
这俩句的意思是：在做任何变换前，先将整个图像从图像的中心点移动到原点（(0,0)点），执行变换完毕后再将图像从原点移动到之前的中心点。
如果不加这俩句，任何变换将以图像的原点为变换中心点，加了之后，任何变换都将以图像的中心点为变换中心点。
举个例子，对图像进行旋转，需要俩个参数：一个是旋转的角度，另一个是旋转中心的坐标。旋转中心的坐标影响旋转的效果。这个能明白吗？你拿一根棍子，拿着棍子的一端进行旋转和拿在棍子中间旋转，是不一样的。preTranslate和postTranslate执行后对图像本身不会有影响，影响的是对图像进行变换时的旋转轴。
说了这么多有点绕，其实就是矩阵变换的知识。


PS5 ON PS2：
这个问题在google group下有过很充分的讨论，貌似一般只在debug模式下存在。现在我使用这段代码没有出现OOM问题了。


【示例工程文件见6楼】

欢迎大家转载和评论

Key Screenshot #2.png (189.24 KB, 下载次数: 22)

2010-11-25 21:25 上传

下载次数: 22

 

MagicK截图