android5.0中,新出了一個(gè)控件RippleView,可以實(shí)現(xiàn)點(diǎn)擊水波紋效果,這個(gè)效果看起來十分酷炫,只不過只支持在5.0之上的版本中使用,想要向下兼容,就必須自己想辦法了;

自己在網(wǎng)上找了一些資料自己在研究了一下,其實(shí)要實(shí)現(xiàn)這個(gè)效果,本質(zhì)上就是在控件上面繪制一層顏色,這個(gè)很實(shí)現(xiàn)就是很簡單的繪制,但是總不能每個(gè)控件,button,textView等都要自己定義吧,這個(gè)樣子實(shí)在太麻煩了,在翻看了一些文章之后,我決定從LinearLayout入手,只要找到控件所在位置,然后繪制一個(gè)水波紋就行了,先上效果圖:

這個(gè)是效果圖

好了,接下來就是關(guān)鍵代碼:

 @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:

                //down事件中,開始繪制
                isDraw = true;

                currentRadio = 0;
                //點(diǎn)擊的位置，也是水波紋的圓心
                int downX = (int) event.getRawX();
                int downY = (int) event.getRawY();

                centerX = downX;
                centerY = downY;

                //父控件的位置


                //找到對應(yīng)的子控件
                targetView = findTargerView(downX, downY);


                //如果沒有子控件被點(diǎn)擊，就直接結(jié)束
                if (targetView != null) {

                    //尋找圓的半徑，要鋪滿整個(gè)子控件，那么半徑必須是距離控件邊距最大的那個(gè)值
                    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);
    }

水波紋是在點(diǎn)擊到控件之后開始繪制,所以我就重寫了dispatchTouchEvent 這個(gè)方法,并且在down事件中開始進(jìn)行繪制,當(dāng)然,在繪制之前肯定是要先找到子控件的,然后才能進(jìn)行繪制,findTargerView(downX, downY),這個(gè)方法就是尋找到子控件,在確定點(diǎn)擊到子控件之后,才會開始繪制水波紋;

private View findTargerView(int downX, int downY) {
        ArrayList<View> touchables = getTouchables();//此方法會返回所有被點(diǎn)擊的控件
        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);

            //如果這個(gè)子控件的位置包含點(diǎn)擊的位置，說明點(diǎn)擊到該控件了
            if (rectF.contains(downX, downY)) {
                touchable = child;
                this.rectF = rectF;
            }

        }
        return touchable;
    }

這段代碼里面有幾個(gè)需要注意的地方,首先參數(shù)就是點(diǎn)擊的位置,然后 getTouchables 方法, 這個(gè)方法返回的是所有該view可以觸摸的控件的集合,如果該view可以被點(diǎn)擊或者觸摸的話,也會返回自己,所以這個(gè)方法返回的只有button等控件,TextView想要擁有這個(gè)水波紋效果的話,就必須加上 clickable 屬性并且設(shè)置為true,不過,千萬不要給自定義的控件設(shè)置這個(gè)屬性,否則就會全屏繪制水波紋了;廢話多了,在獲取到控件之后,就循環(huán)獲取,所有子控件覆蓋的區(qū)域,如果這個(gè)控件剛好覆蓋被點(diǎn)擊的點(diǎn),那么就在這個(gè)控件上繪制水波紋了,在這之前,記得記錄下這個(gè)View覆蓋的區(qū)域,這個(gè)區(qū)域就是繪制水波紋的區(qū)域;

在獲取到水波紋的區(qū)域之后,接下來就開始愉快的繪制水波紋吧,所以接下啦很簡單了,重寫onDraw方法?No!!控件在OnDraw中繪制的時(shí)候?qū)崿F(xiàn)繪制父View,然后再繪制子View的,也就是說會先繪制LinerLayout上面的東西,很遺憾,我們的水波紋就是繪制在linerLayout上面的,所以在繪制之后,就會被子View給覆蓋了.so,你看到的仍然是一片空白,完全沒效果;

所以,要使用dispatchDraw方法,這個(gè)方法就是在子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í)了很多東西,上面很多代碼都是模仿剛哥的代碼

最后附上 : 源碼