Android之绚丽的图片游览效果--有点像W7效果，透明的倒影，层叠的图片，渐变的颜色透明度

这里转载一个牛人的博客：http://www.cnblogs.com/tankaixiong/archive/2011/02/24/1964340.html

下面，是我参照他的博客实现的一个效果图。这个程序，在他的基础上进行了一些改良，但改良得不是很好，嘻嘻，等有空，继续研究。该实例下载路径：http://download.csdn.net/source/3275783

（一）截图

   

（二）实现关键：

1、改写Gallery，实现图片的层叠和透明度渐变。 主要是改写getChildStaticTransformation方法

2、对图片进行加工处理，实现透明倒影。

3、对于超大图片，先进行缩小。防止图片过大，超出屏幕范围报错。

（三）代码

1、Activity类代码：GallaryBrowser.java

1. package com.myandroid.test;
2. import android.app.Activity;
3. import android.os.Bundle;
4. import android.view.View;
5. import android.widget.ImageSwitcher;
6. import android.widget.ImageView;
7. import android.widget.Gallery.LayoutParams;
8. import android.widget.ViewSwitcher.ViewFactory;
9. public class GallaryBrowser extends Activity {
10. private Integer[] imageIds = new Integer[] {
11. R.drawable.a, R.drawable.desert,
12. R.drawable.hydrangeas, R.drawable.lighthouse,
13. R.drawable.jellyfish, R.drawable.koala,
14. R.drawable.lighthouse, R.drawable.penguins,
15. R.drawable.tulips
16. };
17. /** Called when the activity is first created. */
18. @Override
19. public void onCreate(Bundle savedInstanceState) {
20. super.onCreate(savedInstanceState);
21. final CoverFlow cf = new CoverFlow(this);
22. cf.setAdapter(new ImageAdapter(this, imageIds));
23. cf.setAnimationDuration(1500);
24. setContentView(cf);
25. }
26. }

2、图片处理代码，主要是实现旋转和倒影： MyImgView.java

1. ///******************************************************************************//
2. ///**************************请尊重tank的成果毕竟这也是花了笔者很多时间和心思*****//
3. /*************************  为了让大家容易懂tank特地详细的写了很多的解释*********************************************////
4. ///**************************欢迎访问我的博客http://www.cnblogs.com/tankaixiong/********************************************//
5. ///***************************里面文章将持续更新！***************************************************//
6. package com.myandroid.test;
7. import android.graphics.Bitmap;
8. import android.graphics.Canvas;
9. import android.graphics.LinearGradient;
10. import android.graphics.Matrix;
11. import android.graphics.Paint;
12. import android.graphics.PixelFormat;
13. import android.graphics.PorterDuffXfermode;
14. import android.graphics.Bitmap.Config;
15. import android.graphics.PorterDuff.Mode;
16. import android.graphics.Shader.TileMode;
17. import android.graphics.drawable.Drawable;
18. public class MyImgView {
19. /**
20. * 添加倒影，原理，先翻转图片，由上到下放大透明度
21. *
22. * @param originalImage
23. * @return
24. */
25. public static Bitmap createReflectedImage(Bitmap originalImage) {
26. // The gap we want between the reflection and the original image
27. final int reflectionGap = 4;
28. int width = originalImage.getWidth();
29. int height = originalImage.getHeight();
30. // This will not scale but will flip on the Y axis
31. Matrix matrix = new Matrix();
32. matrix.preScale(1, -1);
33. // Create a Bitmap with the flip matrix applied to it.
34. // We only want the bottom half of the image
35. Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,
36. height / 2, width, height / 2, matrix, false);
37. // Create a new bitmap with same width but taller to fit reflection
38. Bitmap bitmapWithReflection = Bitmap.createBitmap(width,
39. (height + height / 2), Config.ARGB_8888);
40. // Create a new Canvas with the bitmap that's big enough for
41. // the image plus gap plus reflection
42. Canvas canvas = new Canvas(bitmapWithReflection);
43. // Draw in the original image
44. canvas.drawBitmap(originalImage, 0, 0, null);
45. // Draw in the gap
46. Paint defaultPaint = new Paint();
47. canvas.drawRect(0, height, width, height + reflectionGap, defaultPaint);
48. // Draw in the reflection
49. canvas.drawBitmap(reflectionImage, 0, height + reflectionGap, null);
50. // Create a shader that is a linear gradient that covers the reflection
51. Paint paint = new Paint();
52. LinearGradient shader = new LinearGradient(0,
53. originalImage.getHeight(), 0, bitmapWithReflection.getHeight()
54. + reflectionGap, 0x70ffffff, 0x00ffffff, TileMode.CLAMP);
55. // Set the paint to use this shader (linear gradient)
56. paint.setShader(shader);
57. // Set the Transfer mode to be porter duff and destination in
58. paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
59. // Draw a rectangle using the paint with our linear gradient
60. canvas.drawRect(0, height, width, bitmapWithReflection.getHeight()
61. + reflectionGap, paint);
62. return bitmapWithReflection;
63. }
64. //drawable 类型转化为bitmap
65. public static Bitmap drawableToBitmap(Drawable drawable) {
66. Bitmap bitmap = Bitmap
67. .createBitmap(
68. drawable.getIntrinsicWidth(),
69. drawable.getIntrinsicHeight(),
70. drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888
71. : Bitmap.Config.RGB_565);
72. Canvas canvas = new Canvas(bitmap);
73. // canvas.setBitmap(bitmap);
74. drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable
75. .getIntrinsicHeight());
76. drawable.draw(canvas);
77. return bitmap;
78. }
79. }

3、自定义的Gallery，继承Gallery类,重写getChildStaticTransformation方法，实现图片的重叠和透明度渐变：CoverFlow.java

1. ///******************************************************************************//
2. ///**************************请尊重tank的成果毕竟这也是花了笔者很多时间和心思*****//
3. /*************************  为了让大家容易懂tank特地详细的写了很多的解释*********************************************////
4. ///**************************欢迎访问我的博客http://www.cnblogs.com/tankaixiong/********************************************//
5. ///***************************里面文章将持续更新！***************************************************//
6. package com.myandroid.test;
7. import android.content.Context;
8. import android.graphics.Camera;
9. import android.graphics.Matrix;
10. import android.util.AttributeSet;
11. import android.util.Log;
12. import android.view.View;
13. import android.view.animation.Transformation;
14. import android.widget.Gallery;
15. import android.widget.ImageView;
16. //自己定义的Gallery
17. public class CoverFlow extends Gallery {
18. private Camera mCamera = new Camera();
19. private int mMaxRotationAngle = 50;
20. private int mMaxZoom = -500;
21. private int mCoveflowCenter;
22. private boolean mAlphaMode = true;
23. private boolean mCircleMode = false;
24. public CoverFlow(Context context) {
25. super(context);
26. this.setStaticTransformationsEnabled(true);
27. Log.e("sequence", "CoverFlow2");
28. }
29. public CoverFlow(Context context, AttributeSet attrs) {
30. super(context, attrs);
31. this.setStaticTransformationsEnabled(true);
32. }
33. public CoverFlow(Context context, AttributeSet attrs, int defStyle) {
34. super(context, attrs, defStyle);
35. this.setStaticTransformationsEnabled(true);
36. }
37. public int getMaxRotationAngle() {
38. return mMaxRotationAngle;
39. }
40. public void setMaxRotationAngle(int maxRotationAngle) {
41. mMaxRotationAngle = maxRotationAngle;
42. }
43. public boolean getCircleMode() {
44. return mCircleMode;
45. }
46. public void setCircleMode(boolean isCircle) {
47. mCircleMode = isCircle;
48. }
49. public boolean getAlphaMode() {
50. return mAlphaMode;
51. }
52. public void setAlphaMode(boolean isAlpha) {
53. mAlphaMode = isAlpha;
54. }
55. public int getMaxZoom() {
56. return mMaxZoom;
57. }
58. public void setMaxZoom(int maxZoom) {
59. mMaxZoom = maxZoom;
60. }
61. private int getCenterOfCoverflow() {
62. return (getWidth() - getPaddingLeft() - getPaddingRight()) / 2
63. + getPaddingLeft();
64. }
65. private static int getCenterOfView(View view) {
66. return view.getLeft() + view.getWidth() / 2;
67. }
68. //重写Garray方法 ，产生层叠和放大效果
69. @Override
70. protected boolean getChildStaticTransformation(View child, Transformation t) {
71. final int childCenter = getCenterOfView(child);
72. final int childWidth = child.getWidth();
73. int rotationAngle = 0;
74. t.clear();
75. t.setTransformationType(Transformation.TYPE_MATRIX);
76. if (childCenter == mCoveflowCenter) {
77. transformImageBitmap((ImageView) child, t, 0, 0);
78. } else {
79. rotationAngle = (int) (((float) (mCoveflowCenter - childCenter) / childWidth) * mMaxRotationAngle);
80. // Log.d("test", "recanglenum:"+Math.floor ((mCoveflowCenter -
81. // childCenter) / childWidth));
82. if (Math.abs(rotationAngle) > mMaxRotationAngle) {
83. rotationAngle = (rotationAngle < 0) ? -mMaxRotationAngle
84. : mMaxRotationAngle;
85. }
86. transformImageBitmap((ImageView) child, t, rotationAngle,
87. (int) Math.floor((mCoveflowCenter - childCenter)/ (childWidth==0?1:childWidth)));
88. }
89. Log.e("sequence", "getChildStaticTransformation");
90. return true;
91. }
92. /**
93. * This is called during layout when the size of this view has changed. If
94. * you were just added to the view hierarchy, you're called with the old
95. * values of 0.
96. *
97. * @param w
98. *            Current width of this view.
99. * @param h
100. *            Current height of this view.
101. * @param oldw
102. *            Old width of this view.
103. * @param oldh
104. *            Old height of this view.
105. */
106. protected void onSizeChanged(int w, int h, int oldw, int oldh) {
107. mCoveflowCenter = getCenterOfCoverflow();
108. super.onSizeChanged(w, h, oldw, oldh);
109. Log.e("sequence", "onSizeChanged");
110. }
111. /**
112. * Transform the Image Bitmap by the Angle passed
113. *
114. * @param imageView
115. *            ImageView the ImageView whose bitmap we want to rotate
116. * @param t
117. *            transformation
118. * @param rotationAngle
119. *            the Angle by which to rotate the Bitmap
120. */
121. private void transformImageBitmap(ImageView child, Transformation t,
122. int rotationAngle, int d) {
123. mCamera.save();
124. final Matrix imageMatrix = t.getMatrix();
125. final int imageHeight = child.getLayoutParams().height;
126. final int imageWidth = child.getLayoutParams().width;
127. final int rotation = Math.abs(rotationAngle);
128. mCamera.translate(0.0f, 0.0f, 100.0f);
129. // As the angle of the view gets less, zoom in
130. if (rotation <= mMaxRotationAngle) {
131. float zoomAmount = (float) (mMaxZoom + (rotation * 1.5));
132. mCamera.translate(0.0f, 0.0f, zoomAmount);
133. if (mCircleMode) {
134. if (rotation < 40)
135. mCamera.translate(0.0f, 155, 0.0f);
136. else
137. mCamera.translate(0.0f, (255 - rotation * 2.5f), 0.0f);
138. }
139. if (mAlphaMode) {
140. ((ImageView) (child)).setAlpha((int) (255 - rotation * 2.5));
141. }
142. }
143. mCamera.rotateY(rotationAngle);
144. mCamera.getMatrix(imageMatrix);
145. imageMatrix.preTranslate(-(imageWidth / 2), -(imageHeight / 2));
146. imageMatrix.postTranslate((imageWidth / 2), (imageHeight / 2));
147. mCamera.restore();
148. Log.e("sequence", "transformImageBitmap");
149. }
150. }

4、图片适配器：ImageAdapter。这里，我改写了getView方法，把图片按照一定比例进行缩放，防止图片过大，超出屏幕而导致报错。

1. package com.myandroid.test;
2. import java.io.InputStream;
3. import android.content.Context;
4. import android.content.res.Resources;
5. import android.graphics.Bitmap;
6. import android.graphics.BitmapFactory;
7. import android.graphics.Matrix;
8. import android.graphics.drawable.BitmapDrawable;
9. import android.view.View;
10. import android.view.ViewGroup;
11. import android.widget.BaseAdapter;
12. import android.widget.Gallery;
13. import android.widget.ImageView;
14. public class ImageAdapter extends BaseAdapter {
15. private Context context;
16. private Integer[] images;
17. public ImageAdapter(Context context, Integer[] imageIds) {
18. this.context = context;
19. this.images = imageIds;
20. }
21. @Override
22. public int getCount() {
23. // TODO Auto-generated method stub
24. return images.length;
25. }
26. @Override
27. public Object getItem(int position) {
28. // TODO Auto-generated method stub
29. return position;
30. }
31. @Override
32. public long getItemId(int position) {
33. // TODO Auto-generated method stub
34. return position;
35. }
36. @Override
37. public View getView(int position, View convertView, ViewGroup parent) {
38. ImageView imageView = new ImageView(context);
39. //创建BitMap对象，用于显示图片
40. Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(),
41. images[position]);
42. Matrix matrix = new Matrix();   //矩阵，用于图片比例缩放
43. matrix.postScale((float)80/bitmap.getWidth(),
44. (float)60/bitmap.getHeight());    //设置高宽比例（三维矩阵）
45. //图片不能超出屏幕范围，否则报错，这里进行缩小
46. Bitmap newBmp = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(),
47. bitmap.getHeight(), matrix, true);
48. imageView.setImageBitmap(MyImgView.createReflectedImage(newBmp));
49. imageView.setLayoutParams(new Gallery.LayoutParams(80, 60));
50. return imageView;
51. }
52. }