android 实现水波纹效果(一)

android5.0中,新出了一个控件RippleView,可以实现点击水波纹效果,这个效果看起来十分酷炫,只不过只支持在5.0之上的版本中使用,想要向下兼容,就必须自己想办法了;

自己在网上找了一些资料自己在研究了一下,其实要实现这个效果,本质上就是在控件上面绘制一层颜色,这个很实现就是很简单的绘制,但是总不能每个控件,button,textView等都要自己定义吧,这个样子实在太麻烦了,在翻看了一些文章之后,我决定从LinearLayout入手,只要找到控件所在位置,然后绘制一个水波纹就行了,先上效果图:



好了,接下来就是关键代码:

@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;

//父控件的位置

//找到对应的子控件
targetView = findTargerView(downX, downY);

//如果没有子控件被点击，就直接结束
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));

//矫正绘制区域
clipRectf();

//重新绘制
postInvalidate();
}
break;
default:
isDraw = false;
currentRadio = 0;
postInvalidate();
break;
}

return super.dispatchTouchEvent(event);
}

水波纹是在点击到控件之后开始绘制,所以我就重写了dispatchTouchEvent 这个方法,并且在down事件中开始进行绘制,当然,在绘制之前肯定是要先找到子控件的,然后才能进行绘制,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();
//获取该控件所在区域的矩形
RectF rectF = new RectF(left, top, right, bottom);

//如果这个子控件的位置包含点击的位置，说明点击到该控件了
if (rectF.contains(downX, downY)) {
touchable = child;
this.rectF = rectF;
}

}
return touchable;
}

这段代码里面有几个需要注意的地方,首先参数就是点击的位置,然后 getTouchables 方法, 这个方法返回的是所有该view可以触摸的控件的集合,如果该view可以被点击或者触摸的话,也会返回自己,所以这个方法返回的只有button等控件,TextView想要拥有这个水波纹效果的话,就必须加上 clickable 属性并且设置为true,不过,千万不要给自定义的控件设置这个属性,否则就会全屏绘制水波纹了;废话多了,在获取到控件之后,就循环获取,所有子控件覆盖的区域,如果这个控件刚好覆盖被点击的点,那么就在这个控件上绘制水波纹了,在这之前,记得记录下这个View覆盖的区域,这个区域就是绘制水波纹的区域;

在获取到水波纹的区域之后,接下来就开始愉快的绘制水波纹吧,所以接下啦很简单了,重写onDraw方法?No!!控件在OnDraw中绘制的时候实现绘制父View,然后再绘制子View的,也就是说会先绘制LinerLayout上面的东西,很遗憾,我们的水波纹就是绘制在linerLayout上面的,所以在绘制之后,就会被子View给覆盖了.so,你看到的仍然是一片空白,完全没效果;

所以,要使用dispatchDraw方法,这个方法就是在子View绘制完成之后再进行绘制,是被draw方法调用的;

@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);

//子控件绘制完成后，开始绘制水波纹
canvas.save();

if (targetView == null) return;

if (isDraw) {

//限制绘制区域
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,就行了

最后,感谢刚哥的博客,让我学习学习了很多东西,上面很多代码都是模仿刚哥的代码

最后附上 : 源码