Android自定义控件实现水波纹效果

1
2
3
4
5
6
7
8
9
10
11
12
13
package com.example.mhy.shuibowen;
 
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
 
public class MainActivity extends AppCompatActivity {
 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
 
  tools:context="com.example.mhy.shuibowen.MainActivity">
 
  <com.example.mhy.shuibowen.MyRingWave
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />
</RelativeLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
package com.example.mhy.shuibowen;
 
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
 
import java.util.ArrayList;
 
/**
 * 水波纹效果
 * Created by mhy on 2016/6/16.
 */
public class MyRingWave extends View {
  /**
   * 二个相临波浪中心点的最小距离
   */
  private static final int DIS_SOLP = 13;
  protected boolean isRunning = false;
 
  private ArrayList<Wave> wList;
 
  public MyRingWave(Context context,AttributeSet attrs) {
    super(context, attrs);
    wList = new ArrayList<MyRingWave.Wave>();
  }
 
  @Override
  protected void onDraw(Canvas canvas) {
    for(int i=0; i<wList.size(); i++) {
      Wave wave = wList.get(i);
      canvas.drawCircle(wave.cx, wave.cy, wave.r, wave.p);
    }
  }
 
  @Override
  public boolean onTouchEvent(MotionEvent event) {
    super.onTouchEvent(event);
 
    switch(event.getAction()) {
      case MotionEvent.ACTION_DOWN:
      case MotionEvent.ACTION_MOVE:
 
        int x = (int) event.getX();
        int y = (int) event.getY();
 
        addPoint(x, y);
 
        break;
      default:
        break;
    }
    return true;
  }
 
  private Handler handler = new Handler(){
    public void handleMessage(android.os.Message msg) {
 
      //刷新数据
      flushData();
      //刷新页面
      invalidate();
      //循环动画
      if (isRunning) {
        handler.sendEmptyMessageDelayed(0, 50);
      }
 
    }
  };
 
  /**
   * 刷新数据
   */
  private void flushData() {
 
    for (int i = 0; i < wList.size(); i++) {
 
      Wave w = wList.get(i);
 
      //如果透明度为 0 从集合中删除
      int alpha = w.p.getAlpha();
      if(alpha == 0){
        wList.remove(i); //删除i 以后，i的值应该再减1 否则会漏掉一个对象，不过，在此处影响不大，效果上看不出来。
        continue;
      }
 
      alpha-=5;
      if(alpha<5){
        alpha =0;
      }
      //降低透明度
      w.p.setAlpha(alpha);
 
      //扩大半径
      w.r = w.r+3;
      //设置半径厚度
      w.p.setStrokeWidth(w.r/3);
    }
 
 /*
  * 如果集合被清空，就停止刷新动画
  */
    if(wList.size() == 0){
      isRunning = false;
    }
  }
 
  /**
   * 添加新的波浪中心点
   * @param x
   * @param y
   */
  private void addPoint(int x, int y) {
 
    if(wList.size() == 0) {
      addPoint2List(x, y);
      isRunning = true;
      handler.sendEmptyMessage(0);
    }else{
      Wave w = wList.get(wList.size()-1);
 
      if(Math.abs(w.cx - x)>DIS_SOLP || Math.abs(w.cy-y)>DIS_SOLP){
        addPoint2List(x,y);
      }
 
    };
  }
 
  /**
   * 添加新的波浪
   * @param x
   * @param y
   */
  private void addPoint2List(int x, int y) {
    Wave w = new Wave();
    w.cx = x;
    w.cy=y;
    Paint pa=new Paint();
    pa.setColor(colors[(int)(Math.random()*4)]);
    pa.setAntiAlias(true);
    pa.setStyle(Paint.Style.STROKE);
 
    w.p = pa;
 
    wList.add(w);
  }
 
  private int [] colors = new int[]{Color.BLUE,Color.RED,Color.YELLOW,Color.GREEN};
  private class Wave {
    //圆心
    int cx;
    int cy;
 
    //画笔
    Paint p;
    //半径
    int r;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
package com.example.mhy.shuibowen;
 
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
 
/**
 * Created by mhy on 2016/6/16.
 */
public class MyRing extends View {
 
  /**
   * 圆心的X坐标
   */
  private float cx;
 
  /**
   * 圆心的Y坐标
   */
  private float cy;
  /**
   * 圆环半径
   */
  private float radius = 0;
  /**
   * 默认画笔
   */
  private Paint paint;
  private boolean isRuning = false;
 
  public MyRing(Context context, AttributeSet attrs) {
    super(context, attrs);
    initView();
  }
 
  private void initView() {
    radius = 0;
    paint = new Paint();
    paint.setAntiAlias(true);
    paint.setStyle(Paint.Style.STROKE); // 空心圆
    paint.setStrokeWidth(radius / 4); // 画笔宽度 半径4分之一
    paint.setColor(Color.GREEN); // 画笔颜色
    paint.setAlpha(255); //不透明
  }
 
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  }
 
  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    if(changed) {
      cx = getWidth() / 2;
      cy = getHeight() / 2;
    }
  }
 
  @Override
  protected void onDraw(Canvas canvas) {
    canvas.drawCircle(cx, cy, radius, paint);
  }
 
  @Override
  protected void onAttachedToWindow() {
    super.onAttachedToWindow();
  }
 
  @Override
  protected void onDetachedFromWindow() {
    super.onDetachedFromWindow();
    isRuning = false;
  }
 
  @Override
  public boolean onTouchEvent(MotionEvent event) {
    super.onTouchEvent(event);
 
    if(event.getAction() == MotionEvent.ACTION_DOWN) {
      cx = event.getX();
      cy = event.getY();
      initView();
      startAnim();
    }
    return true;
  }
 
  private Handler handler = new Handler(){
    @Override
    public void handleMessage(Message msg) {
 
      // 设置透明度
      int alpha = paint.getAlpha();
      if(alpha == 0) {
        isRuning = false;
      }
 
      // 透明度 慢慢变透明
      alpha = Math.max(0, alpha-10);
 
      paint.setAlpha(alpha);
 
      System.out.println(alpha);
 
      // 设置半径
      radius += 5;
      paint.setStrokeWidth(radius / 3);
      invalidate();
 
      if(isRuning) {
        handler.sendEmptyMessageDelayed(0, 50);
      }
    }
  };
  private void startAnim() {
    isRuning = true;
    handler.sendEmptyMessageDelayed(0, 50);
  }
 
}