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

时间：2023-03-09 02:54:26
Android之绚丽的图片游览效果--有点像W7效果，透明的倒影，层叠的图片，渐变的颜色透明度

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

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

（一）截图

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

（二）实现关键：

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. }