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

最後,感謝剛哥的博客,讓我學習學習了很多東西,上面很多代碼都是模仿剛哥的代碼

最後附上 : 源碼