android5.0中,新出了一個控件RippleView,可以實現(xiàn)點擊水波紋效果,這個效果看起來十分酷炫,只不過只支持在5.0之上的版本中使用,想要向下兼容,就必須自己想辦法了;
自己在網(wǎng)上找了一些資料自己在研究了一下,其實要實現(xiàn)這個效果,本質(zhì)上就是在控件上面繪制一層顏色,這個很實現(xiàn)就是很簡單的繪制,但是總不能每個控件,button,textView等都要自己定義吧,這個樣子實在太麻煩了,在翻看了一些文章之后,我決定從LinearLayout入手,只要找到控件所在位置,然后繪制一個水波紋就行了,先上效果圖:
好了,接下來就是關(guān)鍵代碼:
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//down事件中,開始繪制
isDraw = true;
currentRadio = 0;
//點擊的位置，也是水波紋的圓心
int downX = (int) event.getRawX();
int downY = (int) event.getRawY();
centerX = downX;
centerY = downY;
//父控件的位置
//找到對應(yīng)的子控件
targetView = findTargerView(downX, downY);
//如果沒有子控件被點擊，就直接結(jié)束
if (targetView != null) {
//尋找圓的半徑，要鋪滿整個子控件，那么半徑必須是距離控件邊距最大的那個值
int left = (int) (centerX - rectF.left);
int right = (int) (rectF.right - centerX);
int top = (int) (rectF.top - centerY);
int bottom = (int) (rectF.bottom - centerY);
//獲取半徑
radio = Math.max(Math.max(left, right), Math.max(top, bottom));
//矯正繪制區(qū)域
clipRectf();
//重新繪制
postInvalidate();
}
break;
default:
isDraw = false;
currentRadio = 0;
postInvalidate();
break;
}
return super.dispatchTouchEvent(event);
}
水波紋是在點擊到控件之后開始繪制,所以我就重寫了dispatchTouchEvent 這個方法,并且在down事件中開始進(jìn)行繪制,當(dāng)然,在繪制之前肯定是要先找到子控件的,然后才能進(jìn)行繪制,findTargerView(downX, downY),這個方法就是尋找到子控件,在確定點擊到子控件之后,才會開始繪制水波紋;
private View findTargerView(int downX, int downY) {
ArrayList<View> touchables = getTouchables();//此方法會返回所有被點擊的控件
View touchable = null;
if (touchables == null) {
return touchable;
}
for (View child :
touchables) {
int[] location = new int[2];
//獲取該子控件在屏幕上的位置
child.getLocationOnScreen(location);
int left = location[0];
int top = location[1];
int right = left + child.getMeasuredWidth();
int bottom = top + child.getMeasuredHeight();
//獲取該控件所在區(qū)域的矩形
RectF rectF = new RectF(left, top, right, bottom);
//如果這個子控件的位置包含點擊的位置，說明點擊到該控件了
if (rectF.contains(downX, downY)) {
touchable = child;
this.rectF = rectF;
}
}
return touchable;
}
這段代碼里面有幾個需要注意的地方,首先參數(shù)就是點擊的位置,然后 getTouchables 方法, 這個方法返回的是所有該view可以觸摸的控件的集合,如果該view可以被點擊或者觸摸的話,也會返回自己,所以這個方法返回的只有button等控件,TextView想要擁有這個水波紋效果的話,就必須加上 clickable 屬性并且設(shè)置為true,不過,千萬不要給自定義的控件設(shè)置這個屬性,否則就會全屏繪制水波紋了;廢話多了,在獲取到控件之后,就循環(huán)獲取,所有子控件覆蓋的區(qū)域,如果這個控件剛好覆蓋被點擊的點,那么就在這個控件上繪制水波紋了,在這之前,記得記錄下這個View覆蓋的區(qū)域,這個區(qū)域就是繪制水波紋的區(qū)域;
在獲取到水波紋的區(qū)域之后,接下來就開始愉快的繪制水波紋吧,所以接下啦很簡單了,重寫onDraw方法?No!!控件在OnDraw中繪制的時候?qū)崿F(xiàn)繪制父View,然后再繪制子View的,也就是說會先繪制LinerLayout上面的東西,很遺憾,我們的水波紋就是繪制在linerLayout上面的,所以在繪制之后,就會被子View給覆蓋了.so,你看到的仍然是一片空白,完全沒效果;
所以,要使用dispatchDraw方法,這個方法就是在子View繪制完成之后再進(jìn)行繪制,是被draw方法調(diào)用的;
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
//子控件繪制完成后，開始繪制水波紋
canvas.save();
if (targetView == null) return;
if (isDraw) {
//限制繪制區(qū)域
canvas.clipRect(rectF);
canvas.drawCircle(centerX, centerY, currentRadio, mPaint);
currentRadio += 10;
postInvalidateDelayed(30);
} else {
canvas.clipRect(rectF);
canvas.drawCircle(centerX, centerY, currentRadio, mPaint);
}
canvas.restore();
}
到這里,水波紋效果就基本完成了,也可以正常使用,至于水波紋的效果,顏色什么的,如果不滿意,完全可以自己更改一下paint,就行了
最后,感謝剛哥的博客,讓我學(xué)習(xí)學(xué)習(xí)了很多東西,上面很多代碼都是模仿剛哥的代碼
最后附上 : 源碼
