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. }