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

[java] view plaincopy

  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

[java] view plaincopy

  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

[java] view plaincopy

  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方法，把图片按照一定比例进行缩放，防止图片过大，超出屏幕而导致报错。

[java] view plaincopy

  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. }
时间： 2024-11-08 18:42:25

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

Android实现本地图片选择及预览缩放效果仿春雨医生

在做项目时经常会遇到选择本地图片的需求,以前都是懒得写直接调用系统方法来选择图片,但是这样并不能实现多选效果,最近又遇到了,所以还是写一个demo好了,以后也方便使用.还是首先来看看效果 显示的图片使用RecyclerView实现的,利用Glide来加载:下面弹出的图片文件夹效果是采用PopupWindow实现,这里比采用PopupWindow更方便,弹出显示的左边图片是这个文件夹里的第一张图片:选中的图片可以进行预览,使用网上一个大神写的来实现的:至于图片的获取是用ContentProvide

【Android UI】案例04配置控件点击效果(selector)

本例采用XML(selector),配置控件点击效果的实现,即当控件被触发或点击获取到焦点时,出现样式上的改变,以便给以较好的用户体验与操作感.本例需要引入的核心知识点的selector.xml.请参考学习:http://blog.csdn.net/mahoking/article/details/23690857.本例用于演示点击效果的控件为TextView.Button. [转载使用,请注明出处:http://blog.csdn.net/mahoking] 首先需要配置selector.xm

android 4.4以上能够实现的沉浸式状态栏效果

仅仅有android4.4以及以上的版本号才支持状态栏沉浸效果 先把程序执行在4.4下面的手机上,看下效果: 在4.4以上的效果: 当然图片也是能够作为背景的.效果: 代码: if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { Window window = getWindow(); window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, Window

玩转Android Camera开发(四):预览界面四周暗中间亮，只拍摄矩形区域图片(附完整源码)

杂家前文曾写过一篇关于只拍摄特定区域图片的demo,只是比较简陋,在坐标的换算上不是很严谨,而且没有完成预览界面四周暗中间亮的效果,深以为憾,今天把这个补齐了. 在上代码之前首先交代下,这里面存在着换算的两种模式.第一种,是以屏幕上的矩形区域为基准进行换算.举个例子,屏幕中间一个 矩形框为100dip*100dip.这里一定要使用dip为单位,否则在不同的手机上屏幕呈现的矩形框大小不一样.先将这个dip换算成px,然后根据屏幕的宽和高的像素计算出矩形区域,传给Surfaceview上铺的一层Vi

【安卓笔记】切换图片（底部带有小点效果）

下面我们要实现这样的效果: 我们将采用两种方式实现这种效果: 1.使用ViewPager: 思路:ViewPager提供左右滑动图片操作的支持,下方小点在代码中动态创建,整个布局采用FrameLayout. 先看布局: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" and

一种支持任意尺寸的图片滑动（上下左右滑动）效果

<! DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>任意尺寸的图片滑动</title> <style> div { margin: 0 auto; overflow: hidden;} .main { width: 100

Android SQLite的使用，基本的增删改查效果，以及ListView的效果显示

1 package com.example.sqlitetest; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 import android.content.ContentValues; 6 import android.content.Context; 7 import android.database.Cursor; 8 import android.database.sqlite.SQLiteDatabase; 9

Android特效专辑（十）——点击水波纹效果实现，逻辑清晰实现简单

Android特效专辑(十)--点击水波纹效果实现,逻辑清晰实现简单 这次做的东西呢,和上篇有点类似,就是用比较简单的逻辑思路去实现一些比较好玩的特效,最近也是比较忙,所以博客更新的速度还得看时间去推演,但是也能保证一周三更的样子,现在也还是以小功能,或者说是一些小入门级别的博客为主,我也不算是什么很厉害的人,很多细节的支持处理的仍然还是不到位,所以也是一直在弥补,话不多说,来看看今天的效果 实现起来很简单吧,那我们就来看一下他是怎么实现的咯! OnclickRuning package com

&#8203;android第十一期 - SmoothSwitchLibrary仿IOS切换Activity动画效果

项目已经从git上独立出来,各个效果已经分好类别,页面new调用就可以了,不会卡顿. 效果如下图: ​android第十一期 - SmoothSwitchLibrary仿IOS切换Activity动画效果