自定义控件-----ReflectionImage

本文介绍了一个名为ReflectionImage的Android控件,它可以在ImageView基础上实现带有倒影效果的图片显示。通过从某个网站上获取的实现思路,作者详细解释了如何在Canvas中重新绘制原始图片,并利用Matrix反转图片,最后通过创建渐变蒙板来实现透明处理。此控件通过构造函数和setImageResource方法实现了与普通Android控件相同的使用方式。

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, 00null);  
  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, 0x80ffffff0x00ffffff, 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.     }  

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值