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,就行了

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

最后附上 : 源码