自定义控件-----ReflectionImage

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

 

 

 

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

 

实现思路是从某个网站上剽窃过来的,因为很久了记不到网站了,这里就不贴了...搜一下吧

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

 

源码如下

 

package com.myview; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.LinearGradient; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.PorterDuffXfermode; import android.graphics.Bitmap.Config; import android.graphics.PorterDuff.Mode; import android.graphics.Shader.TileMode; import android.graphics.drawable.BitmapDrawable; import android.util.AttributeSet; import android.widget.ImageView; public class ReflectionImage extends ImageView { //是否为Reflection模式 private boolean mReflectionMode = true; public ReflectionImage(Context context) { super(context); } public ReflectionImage(Context context, AttributeSet attrs) { super(context, attrs); //取得原始图片的bitmap并重画 Bitmap originalImage = ((BitmapDrawable)this.getDrawable()).getBitmap(); DoReflection(originalImage); } public ReflectionImage(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); Bitmap originalImage = ((BitmapDrawable)this.getDrawable()).getBitmap(); DoReflection(originalImage); } public void setReflectionMode(boolean isRef) { mReflectionMode = isRef; } public boolean getReflectionMode() { return mReflectionMode; } //偷懒了,只重写了setImageResource,和构造函数里面干了同样的事情 @Override public void setImageResource(int resId) { Bitmap originalImage = BitmapFactory.decodeResource( getResources(), resId); DoReflection(originalImage); //super.setImageResource(resId); } private void DoReflection(Bitmap originalImage) { final int reflectionGap = 4; //原始图片和反射图片中间的间距 int width = originalImage.getWidth(); int height = originalImage.getHeight(); //反转 Matrix matrix = new Matrix(); matrix.preScale(1, -1); //reflectionImage就是下面透明的那部分,可以设置它的高度为原始的3/4,这样效果会更好些 Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0, 0, width, height, matrix, false); //创建一个新的bitmap,高度为原来的两倍 Bitmap bitmapWithReflection = Bitmap.createBitmap(width, (height + height), Config.ARGB_8888); Canvas canvasRef = new Canvas(bitmapWithReflection); //先画原始的图片 canvasRef.drawBitmap(originalImage, 0, 0, null); //画间距 Paint deafaultPaint = new Paint(); canvasRef.drawRect(0, height, width, height + reflectionGap, deafaultPaint); //画被反转以后的图片 canvasRef.drawBitmap(reflectionImage, 0, height + reflectionGap, null); // 创建一个渐变的蒙版放在下面被反转的图片上面 Paint paint = new Paint(); LinearGradient shader = new LinearGradient(0, originalImage.getHeight(), 0, bitmapWithReflection.getHeight() + reflectionGap, 0x80ffffff, 0x00ffffff, TileMode.CLAMP); // Set the paint to use this shader (linear gradient) paint.setShader(shader); // Set the Transfer mode to be porter duff and destination in paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN)); // Draw a rectangle using the paint with our linear gradient canvasRef.drawRect(0, height, width, bitmapWithReflection.getHeight() + reflectionGap, paint); //调用ImageView中的setImageBitmap this.setImageBitmap(bitmapWithReflection); } }