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();
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);
63. //先畫原始的圖片
64. canvasRef.drawBitmap(originalImage, 0, 0, null);
65. //畫間距
66. Paint deafaultPaint = new Paint();
67. canvasRef.drawRect(0, height, width, height + reflectionGap, deafaultPaint);
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. }