Android開發教程：鏡像倒影特效Gallery

本文檔將介紹在Android上如何實現一個倒影效果的Gallery。

為了達到上圖所示的效果，

首先，是需要有一個自定義的gallery，實現了對Gallery的繼承，通過重寫getChildStaticTransformation方法來控制，每個子view有不同的縮放比例，形成階梯狀的展示。這個gallery是在坤庭的代碼基礎上實現的，我這裡就不再重復介紹。

接下來，gallery中的每個view，都是一個自定義的MirrorView，由它來實現了畫原圖及畫倒影。新的算法解決了性能問題，下面就重點說一下這部分內容:

鏡像特效最近還蠻流行的，尤其在HTC 的Sense 介面上，常常都可以見到。大家可以看到，加了個鏡像特效後，那感覺就很立體，感覺上好像是這些圖片擺立在一個玻璃桌面上。

在Android 上要幫圖片加上鏡像特效，會不會很麻煩？一點也不麻煩，只要幾行代碼，就可以搞定。

效果展示如下：

因此，在開始看答案之前，我會建議你要先有Photoshop 的使用經驗。想想，如果用Photoshop 要幫圖片加上鏡像特效，要如何做？我想一般不外乎是先復制個圖片，並將其垂直翻轉，接著再對這翻轉的圖片，加個由灰到黑的漸層mask 即可。

好了，讓我們來看一下答案。底下就是幫圖片加上鏡像特效的程式范例。

1. public  class  MirrorView extends  View {   
2.   
3. Paint m_paint;   
4.   
5. int m_nShadowH;   
6.   
7. Drawable m_dw;   
8.   
9. Bitmap m_bitmap;   
10.   
11. Matrix mMatrix;   
12.   
13. int shadowHeight;   
14.   
15. public MirrorView(Context context, Bitmap bitmap) {   
16.   
17. super (context);   
18.   
19. m_bitmap = bitmap;   
20.   
21. _Init();   
22.   
23. }   
24.   
25. private void _Init() {   
26.   
27. //m_dw = new BitmapDrawable(BitmapFactory.decodeResource(getResources(),  R.drawable.icon));   
28.   
29. m_dw = new BitmapDrawable(m_bitmap);   
30.   
31. m_dw.setBounds(0,0,m_dw.getIntrinsicWidth(),m_dw.getIntrinsicHeight());   
32.   
33. m_nShadowH = m_dw.getIntrinsicHeight()/1;   
34.   
35. m_paint = new Paint(Paint.ANTI_ALIAS_FLAG );   
36.   
37. LinearGradient lg = new LinearGradient(0, 0, 0, m_nShadowH, 0xB0FFFFFF, 0×00000000, Shader.TileMode.CLAMP );   
38.   
39. m_paint.setShader(lg);   
40.   
41. m_paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY ));   
42.   
43. mMatrix = new Matrix();   
44.   
45. }   
46.   
47. @Override  
48.   
49. public void onDraw(Canvas canvas) {   
50.   
51. super .onDraw(canvas);   
52.   
53. int nX = 0;   
54.   
55. int nY = 0;   
56.   
57. _DrawNormalImg(canvas, nX, nY);   
58.   
59. _DrawMirror(canvas, nX, nY);   
60.   
61. }   
62.   
63. private void _DrawNormalImg(Canvas canvas, int nX, int nY) {   
64.   
65. canvas.save(Canvas.MATRIX_SAVE_FLAG );   
66.   
67. canvas.translate(nX, nY);   
68.   
69. m_dw.draw(canvas);   
70.   
71. canvas.restore();   
72.   
73. }   
74.   
75. private void _DrawMirror(Canvas canvas, int nX, int nY) {   
76.   
77. int nW = m_dw.getIntrinsicWidth();   
78.   
79. int nH = m_dw.getIntrinsicHeight();   
80.   
81. shadowHeight=nH/2;   
82.   
83. float [] src={0, nH, nW, nH, nW,nH – m_nShadowH, 0, nH – m_nShadowH};   
84.   
85. float [] dst={ 0, nH, nW, nH,nW, shadowHeight, 0, shadowHeight };   
86.   
87. canvas.save();   
88.   
89. mMatrix.setPolyToPoly(src, 0, dst, 0, src.length >> 1);   
90.   
91. canvas.concat(mMatrix);   
92.   
93. //draw mirror image   
94.   
95. canvas.save(Canvas.MATRIX_SAVE_FLAG );   
96.   
97. canvas.scale(1.0f, -1.0f);   
98.   
99. canvas.translate(nX, -(nY + nH * 2));   
100.   
101. canvas.clipRect(0, nH, nW, nH – m_nShadowH);   
102.   
103. m_dw.draw(canvas);   
104.   
105. canvas.restore();   
106.   
107. //draw mask   
108.   
109. canvas.save();   
110.   
111. canvas.translate(nX, nY + nH);   
112.   
113. canvas.drawRect(0, 0, nW, m_nShadowH, m_paint);   
114.   
115. canvas.restore();   
116.   
117. canvas.restore();   
118.   
119. }   
120.   
121. }  

_DrawMirror() 方法是關鍵。用Photoshop 要如何做出鏡像特效？第一步是先畫出垂直翻轉的圖片。

Android 繪圖座標體系預設的原點在左上角，X 軸往右是越來越大的正值，而Y 軸往下，則是越來越大的正值。要畫出垂直翻轉的圖片，其實也就是要垂直翻轉整個繪圖座標體系。在 Android 中，要如何做？答案就是 canvas.scale(1.0f, -1.0f)。很簡單吧，沒想到給scale() 函式一個負值，就可以翻轉相對應的軸。

在Photoshop 中，做鏡像特效的第二步是要對這翻轉的圖片，加個由灰到黑的漸層mask。

在Android 中，要畫漸層色，那就一定得用LinearGradient 這個類別。至於要對背景圖加上個mask，就請參考一下Paint 的setXfermode() 函式。 _Init() 這個函式，就是負責生成一個由灰到黑漸層mask 的m_paint 物件。

這個控件我測試過，200張圖片加入adapter，在大數據量情況下性能也沒有問題。