码迷，mamicode.com
首页 > 移动开发 > 详细

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

时间：2015-06-24 18:22:24      阅读：159      评论：0      收藏：0      [点我收藏+]

标签：

 这里转载一个牛人的博客：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.   
  3.   
  4. import android.app.Activity;  
  5. import android.os.Bundle;  
  6. import android.view.View;  
  7. import android.widget.ImageSwitcher;  
  8. import android.widget.ImageView;  
  9. import android.widget.Gallery.LayoutParams;  
  10. import android.widget.ViewSwitcher.ViewFactory;  
  11.   
  12. public class GallaryBrowser extends Activity {  
  13.     private Integer[] imageIds = new Integer[] {  
  14.             R.drawable.a, R.drawable.desert,   
  15.             R.drawable.hydrangeas, R.drawable.lighthouse,  
  16.             R.drawable.jellyfish, R.drawable.koala,  
  17.             R.drawable.lighthouse, R.drawable.penguins,  
  18.             R.drawable.tulips  
  19.     };  
  20.       
  21.   
  22.       
  23.     /** Called when the activity is first created. */  
  24.     @Override  
  25.     public void onCreate(Bundle savedInstanceState) {  
  26.         super.onCreate(savedInstanceState);  
  27.           
  28.         final CoverFlow cf = new CoverFlow(this);  
  29.         cf.setAdapter(new ImageAdapter(this, imageIds));  
  30.         cf.setAnimationDuration(1500);  
  31.         setContentView(cf);  
  32.   
  33.     }  
  34.   
  35. }  

 

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

          

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

 

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

 

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

          

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

 

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

标签：

原文地址：http://www.cnblogs.com/manmanlu/p/4598074.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！