前段時間Android L（android 5.0）出來了，介面上做了一些改動，主要是添加了若干動畫和一些新的控制元件，相信大家對view的點選效果-水波紋很有印象吧，點選一個view，然後一個水波紋就會從點選處擴散開來，本文就來分析這種效果的實現。首先，先說下L上的實現，這種波紋效果，L上提供了一種動畫，叫做Reveal效果，其底層是通過拿到view的canvas然後不斷重新整理view來完成的，這種效果需要view的支援，而在低版本上沒有view的支援，因此，Reveal效果沒法直接在低版本執行。但是，我們瞭解其效果、其原理後，還是可以通過模擬的方式去實現這種效果，平心而論，寫出一個具有波紋效果的自定義view不難，或者說很簡單，但是，view的子類很多，如果要一一去實現button、edit等控制元件，這樣比較繁瑣，於是，我們想是否有更簡單的方式呢？其實是有的，我們可以寫一個自定義的layout，然後讓layout中所有可點選的元素都具有波紋效果，這樣做，就大大簡化了整個過程。接下來本文就會分析這個layout的實現，在此之前，我們先看下效果。

實現思想

首先我們自定義一個layout，這裡我們選取LinearLayout，至於原因，文章下面會進行分析。當用戶點選一個可點選的元素時，比如button，我們需要得到使用者點選的元素的資訊，包含：使用者點選了哪個元素、使用者點選的那個元素的寬、高、位置資訊等。得到了button的資訊後，我就可以確定水波紋的範圍，然後通過layout進行重繪去繪製水波紋，這樣水波紋效果就實現了，當然，這只是大概步驟，中間還是有一些細節需要處理的。

layout的選取

既然我們打算實現一個自定義layout，那我們要選取那個layout呢，LinearLayout、RelativeLayout、FrameLayout？我這裡選用LinearLayout。為什麼呢？也許有人會問，不應該用RelativeLayout嗎？因為RelativeLayout比較強大，可以實現複雜的佈局，但LinearLayout和FrameLayout就不行。沒錯，RelativeLayout是強大，但是考慮到水波效果是通過頻繁重新整理layout來實現的，由於頻繁重繪，因此，我們要考慮效能問題，RelativeLayout的效能是最差的（因為做的事情多），因為，為了效能，我們選擇LinearLayout，至於FrameLayout，它功能太簡單了，不太適合使用。當實現複雜佈局的時候，我們可以在具有波紋效果的元素外部包裹LinearLayout，這樣重繪的時候不至於有過重的任務。

根據上面的分析，我們定義如下的layout：

public class RevealLayout extends LinearLayout implements Runnable

實現過程

實現過程主要是如下幾個問題的解決：

1. 如何得知使用者點選了哪個元素

2. 如何取得被點選元素的資訊

3. 如何通過layout進行重繪繪製水波紋

4. 如果延遲up事件的分發

下面一一進行分析

如何得知使用者點選了哪個元素

這個問題好弄，為了得知使用者點選了哪個元素（這個元素一般來說要是可點選的，否則是無意義的），我們要提前攔截所有的點選事件，於是，我們應該重寫layout中的dispatchTouchEvent方法，注意，這裡不推薦用onInterceptTouchEvent，因為onInterceptTouchEvent不是一直會被回撥的，具體原因請參看我之前寫的

view系統解析系列。然後當用戶點選的時候，會有一系列的down、move、up事件，我們要在down的時候來確定事件落在哪個元素上，down的元素就是使用者點選的元素，當然為了嚴謹，我們還要判斷up的時候是否也落在同一個元素上面，因為，系統click事件的判斷規則就是：down和up同時落在同一個可點選的元素上。

1. @Override
2. publicboolean dispatchTouchEvent(MotionEvent event) {  
3.     int x = (int) event.getRawX();  
4.     int y = (int) event.getRawY();  
5.     int action = event.getAction();  
6.     if (action == MotionEvent.ACTION_DOWN) {  
7.         View touchTarget = getTouchTarget(this, x, y);  
8.         if (touchTarget.isClickable() && touchTarget.isEnabled()) {  
9.             mTouchTarget = touchTarget;  
10.             initParametersForChild(event, touchTarget);  
11.             postInvalidateDelayed(INVALIDATE_DURATION);  
12.         }  
13.     } elseif (action == MotionEvent.ACTION_UP) {  
14.         mIsPressed = false;  
15.         postInvalidateDelayed(INVALIDATE_DURATION);  
16.         mDispatchUpTouchEventRunnable.event = event;  
17.         postDelayed(mDispatchUpTouchEventRunnable, 400);  
18.         returntrue;  
19.     } elseif (action == MotionEvent.ACTION_CANCEL) {  
20.         mIsPressed = false;  
21.         postInvalidateDelayed(INVALIDATE_DURATION);  
22.     }  
23.     returnsuper.dispatchTouchEvent(event);  
24. }  

通過上述程式碼，我們可以知道，當down的時候，我們取出點選事件的螢幕座標，然後去遍歷view樹找到使用者所點選的那個view，程式碼如下，就是判斷事件的座標是否落在view的範圍內，這個不再多說了，比較好理解。需要注意的是，事件的座標我們不能用getX和getY，而要用getRawX和getRawY，二者的區別是：前者是相對於被點選view的座標，後者是相對於螢幕的座標，而我們的目標view具體位於layout的哪一層我們無法知道，所以，必須用螢幕的絕對座標來進行計算。而有了事件的座標，再根據view在螢幕中的絕對座標，只要判斷事件的xy是否落在view的上下左右四個角之內，就可以知道事件是否落在view上，從而取出使用者所點選的那個view。

1. private View getTouchTarget(View view, int x, int y) {  
2.     View target = null;  
3.     ArrayList<View>TouchableViews = view.getTouchables();  
4.     for (View child : TouchableViews) {  
5.         if (isTouchPointInView(child, x, y)) {  
6.             target = child;  
7.             break;  
8.         }  
9.     }  
10.     return target;  
11. }  
12. private boolean isTouchPointInView(View view, int x, int y) {  
13.     int[] location = new int[2];  
14.     view.getLocationOnScreen(location);  
15.     int left = location[0];  
16.     int top = location[1];  
17.     int right = left + view.getMeasuredWidth();  
18.     int bottom = top + view.getMeasuredHeight();  
19.     if (view.isClickable() && y >= top && y <= bottom  
20.             && x >= left && x <= right) {  
21.         return true;  
22.     }  
23.     return false;  
24. }  

如何取得被點選元素的資訊

這個比較簡單，被點選元素的資訊有：寬、高、left、top、right、bottom，獲取它們的程式碼如下：

1. int[] location = newint[2];  
2. mTouchTarget.getLocationOnScreen(location);  
3. int left = location[0] - mLocationInScreen[0];  
4. int top = location[1] - mLocationInScreen[1];  
5. int right = left + mTouchTarget.getMeasuredWidth();  
6. int bottom = top + mTouchTarget.getMeasuredHeight();  

說明：mTouchTarget指的是使用者點選的那個view

如何通過layout進行重繪繪製水波紋

這個會水波紋比較簡單，只要用drawCircle繪製一個半透明的圓環即可，這裡主要說下繪製時機。一般來說，我們會選擇在onDraw中去進行繪製，這是沒錯的，但是對於L中的效果不太適合，檢視view的繪製過程，我們會明白，view的繪製大致遵循如下流程：先繪製背景，再繪製自己（onDraw），接著繪製子元素（dispatchDraw），最後繪製一些裝飾等比如滾動條（onDrawScrollBars），因此，如果我們在onDraw中繪製波紋，那麼由於子元素的繪製在onDraw之後，就會導致子元素蓋住我們所繪製的圓環，這樣，圓環就有可能看不全了，因為，把我繪製的時機很重要。根據view的繪製流程，我們選擇dispatchDraw比較合適，當所有的子元素都繪製完成後，再進行波紋的繪製。讀到這裡，大家會更加明白，為什麼我們要選擇LinearLayout以及為什麼不建議view的巢狀層級太深，因為如果view本身比較重或者巢狀層級太深，就會導致dispatchDraw執行的耗時增加，這樣水波的繪製就會收到些許影響。因此，效能的平滑在程式碼中也很重要，也是需要考慮的。同時，為了不讓繪製的圓環超出被點選元素的範圍，我們需要對canvas進行clip。為了有波紋效果，我們需要頻繁地進行layout重繪，並且在重繪的過程中改變圓環的半徑，這樣一個動態的水波紋就出來了。仍然，我來效能的考慮，我們選擇用postInvalidateDelayed(long delayMilliseconds, int left, int top, int right, int bottom)來進行view的部分重繪，因為，其他區域是不需要重繪的，僅僅是被點選的元素所在的區域需要重繪。為什麼要採用Delayed這個方法，原因是我們不能一直進行重新整理，必須有一點點時間間隔，這樣做的好處是：避免view的重繪搶佔過多時間片從而造成潛在的間接棧溢位，因為invalidate會直接導致draw的呼叫。

具體程式碼如下：

1. protectedvoid dispatchDraw(Canvas canvas) {  
2.     super.dispatchDraw(canvas);  
3.     if (!mShouldDoAnimation || mTargetWidth <= 0 || mTouchTarget == null) {  
4.         return;  
5.     }  
6.     if (mRevealRadius > mMinBetweenWidthAndHeight / 2) {  
7.         mRevealRadius += mRevealRadiusGap * 4;  
8.     } else {  
9.         mRevealRadius += mRevealRadiusGap;  
10.     }  
11.     int[] location = newint[2];  
12.     mTouchTarget.getLocationOnScreen(location);  
13.     int left = location[0] - mLocationInScreen[0];  
14.     int top = location[1] - mLocationInScreen[1];  
15.     int right = left + mTouchTarget.getMeasuredWidth();  
16.     int bottom = top + mTouchTarget.getMeasuredHeight();  
17.     canvas.save();  
18.     canvas.clipRect(left, top, right, bottom);  
19.     canvas.drawCircle(mCenterX, mCenterY, mRevealRadius, mPaint);  
20.     canvas.restore();  
21.     if (mRevealRadius <= mMaxRevealRadius) {  
22.         postInvalidateDelayed(INVALIDATE_DURATION, left, top, right, bottom);  
23.     } elseif (!mIsPressed) {  
24.         mShouldDoAnimation = false;  
25.         postInvalidateDelayed(INVALIDATE_DURATION, left, top, right, bottom);  
26.     }  
27. }  

到此為止，這個layout我們已經實現了，但是細心的你，一定會發現，還有什麼不妥的地方。比如，你可以給button加一個點選事件，當button被點選的時候起一個activity，很快你就會發現問題所在了：水波還沒播完呢，activity就起來了，導致水波效果大打折扣，而仔細觀察android L的效果，我們發現，L中總是要等到水波效果播放完畢才會進行下一步的行為。所以，最後一個待解決的問題也就出來了，請看下面的分析

如何延遲up事件的分發

針對上面所說的問題，如果我們能夠延遲up時間的分發，比如延遲400ms，這樣水波就有足夠的時間去播放完畢，然後再分發up事件，這樣就可以解決問題。最開始，我的確是這樣做的，先看如下的程式碼：

1. elseif (action == MotionEvent.ACTION_UP) {  
2.            mIsPressed = false;  
3.            postInvalidateDelayed(INVALIDATE_DURATION);  
4.            mDispatchUpTouchEventRunnable.event = event;  
5.            postDelayed(mDispatchUpTouchEventRunnable, 400);  
6.            returntrue;  
7.        }   

可以發現，當up的時候，我並沒有直接走系統的分發流程，只是強行消耗點up事件然後再延遲分發，請看程式碼：

1. privateclass DispatchUpTouchEventRunnable implements Runnable {  
2.     public MotionEvent event;  
3.     @Override
4.     publicvoid run() {  
5.         if (mTouchTarget == null || !mTouchTarget.isEnabled()) {  
6.             return;  
7.         }  
8.         if (isTouchPointInView(mTouchTarget, (int)event.getRawX(), (int)event.getRawY())) {  
9.             mTouchTarget.dispatchTouchEvent(event);  
10.         }  
11.     }  
12. };  

到此為止，上述幾個問題都已經分析完畢了，我們就可以輕易地實現水波紋的點選效果了。