android自定义控件 水波纹效果

效果图: 

这是今天我们要实现的一个效果:  一个自定义的VIEW .

要知道 我们画圆需要重写 父类的 onDraw(Canvas canvas) 方法, 用 canvas 来画圆, 然而画圆需要 cx,cy,radio,paint.(圆心x,圆心y,半径,画笔)..

首先我们要重写 父类 onDraw()  和onTouchEvent()事件, 在onTouch 里判断 Action_DOWN 和 Action_MOVE, 记录 X,Y点. (X,Y点就是圆心的坐标.)    还需要声明一个集合, 用于存放点 然后实现里面逻辑去动态刷新圆点的 信息状态, 下面贴代码...

public class WaterWaveEnergyView extends View {

    private int startX;
    private int startY;

    private Paint paint;

    private int paintWidth;

    private int alpha;

    private List<Wave> pointList;
    // 如果间隔小于10 那么不画圆
    private static final int POINT_SPACE = 10;
    // if pointList.size()>0  than true;
    private boolean isRunning = false;
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);

            flushState();

            // notification refresh circle
            invalidate();
            // 动态刷新
            if (isRunning) {
                handler.sendEmptyMessageDelayed(0, 50);
            }
        }
    };

    public WaterWaveEnergyView(Context context) {
        this(context, null);
    }

    public WaterWaveEnergyView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WaterWaveEnergyView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // init list
        pointList = new ArrayList<Wave>();
    }


    /**
     * refresh state
     */
    private void flushState() {
        for (int i = 0; i < pointList.size(); i++) {
            Wave w = pointList.get(i);

            alpha = w.p.getAlpha();
            //圆的透明度为0
            if (alpha == 0) {
                pointList.remove(i); //when transparency is 0,remove circlr  当透明度为0 移除圆
                continue;
            }
            paintWidth = w.r / 4;
            alpha -= 5;
            if (alpha < 5) {
                alpha = 0;
            }
            w.p.setAlpha(alpha);
            w.p.setStrokeWidth(paintWidth);
            w.r += 3;

        }

        if (pointList.size() == 0) {
            isRunning = false;
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        super.onTouchEvent(event);
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                startX = (int) event.getX();
                startY = (int) event.getY();

                addPoint(startX, startY);

                break;

        }
        return true;
    }

    /**
     * stroage point
     *
     * @param startX
     * @param startY
     */
    private void addPoint(int startX, int startY) {
        // if list size is zero no need judge spacing
        if (pointList.size() == 0) {
            addPoint2(startX, startY);
            // first running
            isRunning = true;
            //send a message, notification refresh state and cirle发送消息 通知刷新状态,更新圆
            handler.sendEmptyMessage(0);
        } else {
            // determing wheter the spacing is satisfied
            // take out on one point
            Wave w = pointList.get(pointList.size() - 1);
            if (Math.abs(w.cx - startX) > POINT_SPACE
                    || Math.abs(w.cy - startY) > POINT_SPACE) {
                addPoint2(startX, startY);
            }
        }
    }

    /**
     * random circle color
     */
    private int[] colorsId = {Color.RED, Color.GREEN, Color.YELLOW, Color.BLUE};

    /**
     * add point to gather
     *
     * @param startX
     * @param startY
     */
    private void addPoint2(int startX, int startY) {
        Wave w = new Wave();

        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(colorsId[(int) (Math.random() * 4)]);
        w.cx = startX;
        w.cy = startY;
        w.p = paint;
        pointList.add(w);
    }

    /**
     * initialization view
     */
    private void initView() {

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        if(pointList.size()!=0) {
        for (int i = 0; i < pointList.size(); i++) {
            Wave w = pointList.get(i);
            canvas.drawCircle(w.cx, w.cy, w.r, w.p);
        }
//        }
    }

    /**
     * Storage circle
     */
    private class Wave {
        public int cx; //  圆心 x
        public int cy;
        public int r;  // radio
        public Paint p; // paint
    }
}
           

写的不好 忘见谅