Android自定义控件-ReflectionImage


ReflectionImage是一个有倒影效果的图片.先来看看长什么样子的吧...

ReflectionImage是从Android.widget.ImageView继承而来,使用方法和其他的Android控件一样

实现起来很简单,详细的解释写到注释里面,总体思路就是在Canvas里面重新把原始图片画一次,反转图片用Matrix来做,透明处理实际上是加了一层渐变的蒙板.

源码如下

  1. package com.myview;  
  2. import android.content.Context;  
  3. import android.graphics.Bitmap;  
  4. import android.graphics.BitmapFactory;  
  5. import android.graphics.Canvas;  
  6. import android.graphics.LinearGradient;  
  7. import android.graphics.Matrix;  
  8. import android.graphics.Paint;  
  9. import android.graphics.PorterDuffXfermode;  
  10. import android.graphics.Bitmap.Config;  
  11. import android.graphics.PorterDuff.Mode;  
  12. import android.graphics.Shader.TileMode;  
  13. import android.graphics.drawable.BitmapDrawable;  
  14. import android.util.AttributeSet;  
  15. import android.widget.ImageView;  
  16. public class ReflectionImage extends ImageView {  
  17.     //是否为Reflection模式   
  18.     private boolean mReflectionMode = true;  
  19.     public ReflectionImage(Context context) {  
  20.         super(context);  
  21.     }  
  22.     public ReflectionImage(Context context, AttributeSet attrs) {  
  23.         super(context, attrs);  
  24.         //取得原始图片的bitmap并重画   
  25.         Bitmap originalImage = ((BitmapDrawable)this.getDrawable()).getBitmap();  
  26.         DoReflection(originalImage);  
  27.     }  
  28.     public ReflectionImage(Context context, AttributeSet attrs,  
  29.             int defStyle) {  
  30.         super(context, attrs, defStyle);  
  31.         Bitmap originalImage = ((BitmapDrawable)this.getDrawable()).getBitmap();  
  32.         DoReflection(originalImage);  
  33.     }  
  34.     public void setReflectionMode(boolean isRef) {  
  35.         mReflectionMode = isRef;  
  36.     }  
  37.     public boolean getReflectionMode() {  
  38.         return mReflectionMode;  
  39.     }  
  40.     //偷懒了,只重写了setImageResource,和构造函数里面干了同样的事情   
  41.     @Override  
  42.     public void setImageResource(int resId) {  
  43.         Bitmap originalImage = BitmapFactory.decodeResource(  
  44.                 getResources(), resId);  
  45.         DoReflection(originalImage);  
  46.         //super.setImageResource(resId);   
  47.     }  
  48.     private void DoReflection(Bitmap originalImage) {  
  49.         final int reflectionGap = 4;                            //原始图片和反射图片中间的间距   
  50.         int width = originalImage.getWidth();  
  51.         int height = originalImage.getHeight();  
  52.           
  53.         //反转   
  54.         Matrix matrix = new Matrix();  
  55.         matrix.preScale(1, -1);  
  56.       //reflectionImage就是下面透明的那部分,可以设置它的高度为原始的3/4,这样效果会更好些   
  57.         Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,  
  58.                 0, width, height, matrix, false);  
  59.         //创建一个新的bitmap,高度为原来的两倍   
  60.         Bitmap bitmapWithReflection = Bitmap.createBitmap(width, (height + height), Config.ARGB_8888);  
  61.         Canvas canvasRef = new Canvas(bitmapWithReflection);  
  62.           
  63.         //先画原始的图片   
  64.         canvasRef.drawBitmap(originalImage, 0, 0, null);  
  65.         //画间距   
  66.         Paint deafaultPaint = new Paint();  
  67.         canvasRef.drawRect(0, height, width, height + reflectionGap, deafaultPaint);  
  68.           
  69.         //画被反转以后的图片   
  70.         canvasRef.drawBitmap(reflectionImage, 0, height + reflectionGap, null);  
  71.         // 创建一个渐变的蒙版放在下面被反转的图片上面   
  72.         Paint paint = new Paint();  
  73.         LinearGradient shader = new LinearGradient(0,  
  74.                 originalImage.getHeight(), 0, bitmapWithReflection.getHeight()  
  75.                         + reflectionGap, 0x80ffffff, 0x00ffffff, TileMode.CLAMP);  
  76.         // Set the paint to use this shader (linear gradient)   
  77.         paint.setShader(shader);  
  78.         // Set the Transfer mode to be porter duff and destination in   
  79.         paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));  
  80.         // Draw a rectangle using the paint with our linear gradient   
  81.         canvasRef.drawRect(0, height, width, bitmapWithReflection.getHeight()  
  82.                 + reflectionGap, paint);  
  83.       //调用ImageView中的setImageBitmap   
  84.         this.setImageBitmap(bitmapWithReflection);  
  85.     }  
  86. }  

相关内容