android波浪动画简书,android 实现水波纹效果(一)

最新推荐文章于 2022-02-15 21:06:32 发布

weixin_42365804

最新推荐文章于 2022-02-15 21:06:32 发布

阅读量490

点赞数

文章标签： android波浪动画简书

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

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

ff62d42b2bc8

这个是效果图

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

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