`
landyer
  • 浏览: 141891 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Android自定义控件-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);  
    }  
}  
 



分享到:
评论

相关推荐

    Android 图片镜像倒影特效

    ### Android 图片镜像倒影特效详解 #### 一、概述 在移动应用开发中,为了提升用户体验,开发者经常会加入一些视觉特效。其中,“图片镜像倒影...此外,还可以通过自定义视图的方式增强视觉效果,提高用户的体验感。

    JS实现图片倒影效果

    var reflectionImage = document.getElementById('reflection-image'); // 获取原始图片的尺寸 var height = originalImage.offsetHeight; var width = originalImage.offsetWidth; // 设置倒影的高度为原始...

    Image Reflection

    本教程将深入探讨如何在iOS应用中实现图片的倒影效果,主要涉及的知识点包括UIKit框架中的UIImageView类、Core Graphics(简称Core Graphics或CG)以及自定义视图的绘制。 首先,UIImageView是iOS中用于显示图像的...

    带有倒影的Gallery

    //reflectionImage就是下面那个透明的倒影,宽为图片本来的宽度,高是图片高度的一半 //从height/2的高度开始到高度为(height/2)+(height/4) Bitmap reflectionImage = Bitmap.createBitmap(originalImage...

    Java图片倒影效果实例源码.zip

    BufferedImage reflectionImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB); ``` 3. **翻转图像**: 使用一个`for`循环,从下往上遍历原图的像素,将其复制到倒影图像中,实现上下翻转。 ...

Global site tag (gtag.js) - Google Analytics