【Android】繼承ImageView且覆寫增加圖片倒影 ImageView Reflection

各位Android安卓開發者大家好！ ^^

今天小黑人要與大家分享的是"圖片倒影"，沒錯就是倒影也可以算是繪製一個上下顛倒且有透明度的圖片，而顯示圖片的元件為ImageView，所以小黑人要與大家說明的就是如何創造一個類別且繼承ImageView後，進行覆寫ImageView的顯示動作並加上倒影的部分，倒影其實在偏向特效部分的開發是一個很常用的功能，這個看似複雜其實並不難的功能該如何撰寫呢，就讓我們繼續看下去吧！

1. 首先我們要建立一個class，就暫命名為MyImageView，而這個class是繼承ImageView元件，下方為MyImageView詳細內容與繪製圖片倒影的程式碼 : 

package com.android.pubby;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Shader.TileMode;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class MyImageView extends ImageView
{
    public MyImageView(Context context, AttributeSet attrs)
    { 
        super(context, attrs); 
        //讀取Layout元件時進入，取得Layout內設定的圖片Bitmap
        Bitmap ImgBitmap = ((BitmapDrawable)this.getDrawable()).getBitmap();
        //重新繪製並加入倒影
        Reflection(ImgBitmap); 
    } 
   
    private void Reflection(Bitmap ImgBitmap)
    { 
        //原始圖與倒影間距
        final int mGap = 0;
        int mWidth = ImgBitmap.getWidth(); 
        int mHeight = ImgBitmap.getHeight(); 
       
        //建立倒影的Bitmap
        Matrix mMatrix = new Matrix(); 
        mMatrix.preScale(1, -1); 
        Bitmap mReflectionImage = Bitmap.createBitmap(ImgBitmap, 0, 0, mWidth, mHeight, mMatrix, false);
       
        //原始圖與倒影一起的Bitmap
        Bitmap mBitmap = Bitmap.createBitmap(mWidth, (mHeight + mHeight), Config.ARGB_8888); 
        //繪製原始圖
        Canvas mCanvas = new Canvas(mBitmap); 
        mCanvas.drawBitmap(ImgBitmap, 0, 0, null); 
        
        //繪製倒影圖
        Paint mPaint = new Paint(); 
        mCanvas.drawRect(0, mHeight, mWidth, mHeight + mGap, mPaint); 
        mCanvas.drawBitmap(mReflectionImage, 0, mHeight + mGap, null); 
       
        //加入透明度
        Paint mLinearPaint = new Paint(); 
        LinearGradient mLinearGradient = new LinearGradient(0,ImgBitmap.getHeight(), 0, mBitmap.getHeight()+ mGap, 0x80ffffff, 0x00ffffff, TileMode.CLAMP); 
        mLinearPaint.setShader(mLinearGradient); 
        mLinearPaint.setXfermode(new PorterDuffXfermode(Mode.DST_IN)); 
        mCanvas.drawRect(0, mHeight, mWidth, mBitmap.getHeight() + mGap, mLinearPaint); 
       
        this.setImageBitmap(mBitmap); 
    }
}

2. 完成MyImageView倒影的class後，剩下的只要在Layout內把MyImageView呼叫出來就完成囉 :

<com.android.pubby.MyImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/pubby"
/>

下方為畫面預覽 :
左圖為正常ImageView元件顯示圖片畫面。
右圖為覆寫ImageView元件且增加倒影的圖片畫面。
 

 

以上就是重新創建class並繼承ImageView且覆寫增加圖片倒影的程式碼，大家可以實作試試看，還有圖片盡量不要放太大張，因為在重新繪製原圖與倒影時皆會產生新的Bitmap圖片空間，所以針對記憶體還是有一定的消耗！
謝謝大家，如有任何問題都可以和小黑人一起交流討論！

☆小黑人☆