Coverflow is implemented using the android built-in gallery component, source code + Parsing

First, declare that the source code is reprinted from Neil Davies outside China and the Open Source protocol apache2.0 is used. Please use the source code to consciously abide by the Protocol content.
This article is original in kearnel. For more information, see the source.

The following is the text:

Anyone who has used Android's own gallery component knows that the effect of gallery is to drag and browse a group of images, which is obviously inferior to coverflow used to drag and browse images on the iPhone. In fact, you can extend gallery and basically implement coverflow through pseudo 3D transformation. This article uses source code parsing to implement this function. For specific code functions, see annotations.

The final implementation result is as follows:

To use gallery, we must first specify an adapter for it. Here, we implement a custom imageadapter to create a reflection effect for the image.
The input parameter is the image ID array in context and drawable in the program. Then, call the createreflectedimages () method to create the reflection effect of each image, generate the corresponding imageview array, and finally return it in 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 before t in compliance with the license.
6. * You may obtain a copy of the license
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;
25. Private integer [] mimageids;
27. Private imageview [] mimages;
29. Public imageadapter (context c, int [] imageids ){
30. Mcontext = C;
31. Mimageids = imageids;
32. Mimages = new imageview [mimageids. Length];
33. }
35. Public Boolean createreflectedimages (){
36. // The gap we want between the reflection and the original image
37. Final int reflectiongap = 4;
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 ();
46. // This will not scale but will flip on the Y axis
47. Matrix matrix = new matrix ();
48. Matrix. prescale (1,-1 );
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 );
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 );
60. // Create a new canvas with the bitmap that's big enough
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 );
73. // Create a shader that is a linear gradient that covers
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 porterduxfermode (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 );
88. 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;
95. }
96. Return true;
97. }
99. Public int getcount (){
100. Return mimageids. length;
101. }
103. Public object getitem (INT position ){
104. Return position;
105. }
107. Public long getitemid (INT position ){
108. Return position;
109. }
111. Public View getview (INT position, view convertview, viewgroup parent ){
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 jargies
121. * Bitmapdrawable drawable = (bitmapdrawable) I. getdrawable ();
122. * Drawable. setantialias (true); return I;
123. */
125. Return mimages [position];
126. }
128. /**
129. * Returns the size (0.0f to 1.0f) of the views depending on
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. }
137. }
138. }

Copy code

It is not enough to achieve only the image reflection effect, because in coverflow, image switching has the rotation and scaling effects, but not in the built-in Gallery. Therefore, we can extend our own gallery to implement our own galleryflow. In the original gallery class, a method getchildstatictransformation () is provided to transform the image. By overwriting this method and calling the custom transformimagebitmap ("the distance between each image and the gallery center") method, we can rotate and scale each image accordingly. Camera and matrix are used for view transformation. For more information, see code comments.

1. Public class galleryflow extends gallery {
3. /**
4. * Graphics camera used for transforming the matrix of imageviews
5. */
6. Private camera mcamera = new camera ();
8. /**
9. * The maximum angle the child imageview will be rotated
10. */
11. Private int mmaxrotationangle = 60;
13. /**
14. * The maximum zoom on the center child
15. */
16. Private int mmaxzoom =-120;
18. /**
19. * The centre of the coverflow
20. */
21. Private int mcoveflowcenter;
23. Public galleryflow (context ){
24. Super (context );
25. This. setstatictransformationsenabled (true );
26. }
28. Public galleryflow (context, attributeset attrs ){
29. Super (context, attrs );
30. This. setstatictransformationsenabled (true );
31. }
33. Public galleryflow (context, attributeset attrs, int defstyle ){
34. Super (context, attrs, defstyle );
35. This. setstatictransformationsenabled (true );
36. }
38. /**
39. * Get the max rotational angle of the image
40. *
41. * @ Return the mmaxrotationangle
42. */
43. Public int getmaxrotationangle (){
44. Return mmaxrotationangle;
45. }
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. }
57. /**
58. * Get the max zoom of the center Image
59. *
60. * @ Return the mmaxzoom
61. */
62. Public int getmaxzoom (){
63. Return mmaxzoom;
64. }
66. /**
67. * Set the max zoom of the center Image
68. *
69. * @ Param maxzoom
70. * The mmaxzoom to set
71. */
72. Public void setmaxzoom (INT maxzoom ){
73. Mmaxzoom = maxzoom;
74. }
76. /**
77. * Get the centre of the coverflow
78. *
79. * @ Return the center of this coverflow.
80. */
81. Private int getcenterofcoverflow (){
82. Return (getwidth ()-getpaddingleft ()-getpaddingright ()/2
83. + Getpaddingleft ();
84. }
86. /**
87. * Get the centre OF THE VIEW
88. *
89. * @ Return the center of the given view.
90. */
91. Private Static int getcenterofview (view ){
92. Return view. getleft () + view. getwidth ()/2;
93. }
95. /**
96. * {@ Inheritdoc}
97. *
98. * @ See # setstatictransformationsenabled (Boolean)
99. */
100. Protected Boolean getchildstatictransformation (view child, transformation T ){
102. Final int childcenter = getcenterofview (child );
103. Final int childwidth = Child. getwidth ();
104. Int rotationangle = 0;
106. T. Clear ();
107. T. settransformationtype (transformation. type_matrix );
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. }
120. Return true;
121. }
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. }
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 );
160. // Forward the camera angle on the Z axis. The actual effect is to enlarge the image.
161. // If the image is moved on the Y axis, the image is moved up and down; on the X axis, the image is moved left and right.
162. Mcamera. Translate (0.0f, 0.0f, 100366f );
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. }
170. // Rotate on the Y axis, and flip the corresponding image vertically to the inside.
171. // If the image is rotated on the X axis, the image is reversed horizontally.
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. }

Copy code

The Code ends here. If you are interested, you can adjust the parameters to achieve more and more dazzling results.
The following is an example of a call:

1. Public void oncreate (bundle savedinstancestate ){
2. Super. oncreate (savedinstancestate );
5. Setcontentview (R. layout. layout_gallery );
7. Integer [] images = {R. drawable. img0001, R. drawable. img0030,
8. R. drawable. im0000100, R. drawable. img0130, R. drawable. im0000200,
9. R. drawable. img0230, R. drawable. im0000300, R. drawable. img0330,
10. R. drawable. im1_354 };
12. Imageadapter adapter = new imageadapter (this, images );
13. Adapter. createreflectedimages ();
15. Galleryflow = (galleryflow) findviewbyid (R. Id. gallery_flow );
16. Galleryflow. setadapter (adapter );
18. }

Copy code

PS1:
It can be seen that this implementation of the gallery sawtooth problem is more serious. You can use the following code in createreflectedimages:

1. Bitmapdrawable BD = new bitmapdrawable (bitmapwithreflection );
2. BD. setantialias = true;
3. ...

Copy code

Then use IV. setimagedrawable (BD );
Replace IV. setimagebitmap (bitmapwithreflection );
You can basically eliminate the Sawtooth.

PS2:
The memoryleak problem to be determined by the imageadapter. The decode method of Bitmap may cause ml. OOM may appear after multiple screen rotation when imageadapter is used. Currently, you can call the recycle () method and set null and call system. GC () in time by calling the completed bimap, but the problem is not obvious.

 

 

 

Well, the original code does have a small problem. I made some minor changes and now it's okay.
In addition, you should not reference Gallery in the layout XML file, but use the custom com. Gallery. galleryflow. Otherwise, the error CCE may occur.
See the appendix for the project.Gallery.rar(737.16 KB)
This is: