Android自定义控件系列五：自定义绚丽水波纹效果

今天我们来利用Android自定义控件实现一个比较有趣的效果：滑动水波纹。先来看看最终效果图：

图一

效果还是很炫的；饭要一口口吃，路要一步步走，这里我们将整个过程分成几步来实现

一、实现单击出现水波纹单圈效果：

图二

照例来说，还是一个自定义控件，这里我们直接让这个控件撑满整个屏幕(对自定义控件不熟悉的可以参看我之前的一篇文章：Android自定义控件系列二：自定义开关按钮（一）)。观察这个效果，发现应该需要重写onTouchEvent和onDraw方法，通过在onTouchEvent中获取触摸的坐标，然后以这个坐标值为圆心来绘制我们需要的图形，这个绘制过程就是调用的onDraw方法。

1、新建一个工程，定义一个WaterWave的类，继承自View，作为一个自定义控件；在清单文件中将这个自定义控件写出来，直接填满父窗体。

2、在WaterWave类中，实现它的两参构造函数：

[java] view plain copy

1. package com.example.waterwavedemo.ui;  
2.   
3.   
4. import android.content.Context;  
5. import android.graphics.Canvas;  
6. import android.graphics.Color;  
7. import android.graphics.Paint;  
8. import android.os.Handler;  
9. import android.os.Message;  
10. import android.util.AttributeSet;  
11. import android.view.MotionEvent;  
12. import android.view.View;  
13.   
14.   
15. public class WaterWave extends View {  
16.     ...  
17.     /* 
18.      * 1、两参构造函数 
19.      */  
20.     public WaterWave(Context context, AttributeSet attrs) {  
21.         super(context, attrs);  
22.         alpha = 0;  
23.         radius = 0;  
24.         initPaint();  
25.     }  
26.     ...  
27. }  

3、要使用自定义控件，那么一般都需要指定它的大小，这里我们由于只需要其填满窗体，所以使用默认的onMeasure方法即可：

[java] view plain copy

1. /** 
2.      * onMeasure方法，确定控件大小，这里使用默认的 
3.      */  
4.     @Override  
5.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
6.         // TODO Auto-generated method stub  
7.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
8.     }  

4、将这个自定义图形画出来，重写onDraw方法，在这里由于我们需要画一个圈，所以这样写：

[java] view plain copy

1. @Override  
2. /** 
3.  * 画出需要的图形的方法，这个方法比较关键 
4.  */  
5. protected void onDraw(Canvas canvas) {  
6.     canvas.drawCircle(xDown, yDown, radius, paint);  
7.   
8. }  

其中的参数xDown和yDown是成员变量，代表按下时的x和y坐标，这个坐标所对应的点就是要绘制的圆环的圆心；radius参数也是成员变量，代表要绘制的圆环的半径；

看到这里还需要一个paint，是Paint类型的画笔对象，这里先将其定义成一个成员变量，由于onDraw方法在第一次自定义控件显示的时候就会被调用，所以这个paint需要我们在两参的构造函数中就进行初始化，否则会报出空指针异常；那么我们这里另外写一个initPaint()方法来初始化我们的paint：

[java] view plain copy

1. /** 
2.  * 初始化paint 
3.  */  
4. private void initPaint() {  
5.     /* 
6.      * 新建一个画笔 
7.      */  
8.     paint = new Paint();  
9.   
10.     paint.setAntiAlias(true);  
11.     paint.setStrokeWidth(width);  
12.   
13.     // 设置是环形方式绘制  
14.     paint.setStyle(Paint.Style.STROKE);  
15.   
16.     System.out.println("alpha=" + alpha);  
17.     paint.setAlpha(alpha);  
18.     System.out.println("得到的透明度：" + paint.getAlpha());  
19.   
20.     paint.setColor(Color.RED);  
21. }  

5、触摸定时刷新

在onDraw方法之后，我们已经可以画出这个圆环了，但是实际问题是，我们想要实现点击的时候才在点击的位置来画一个圆环，那么我们肯定需要获得点击的时候的坐标xDown和yDown，所以肯定需要重写onTouchEvent方法，另外我们需要在按下的时候，让透明度是最不透明(alpha=255)，在绘制的过程中，让圆环的半径(radius)不断扩大，同时让透明度不断减小，直至完全透明(alpha=0)，这个不断变化的过程又需要每隔一段时间重新刷新状态和重新绘制图形，所以我们这里使用handler来处理：

[java] view plain copy

1. @Override  
2.     /** 
3.      * 触摸事件的方法 
4.      */  
5.     public boolean onTouchEvent(MotionEvent event) {  
6.         super.onTouchEvent(event);  
7.   
8.         switch (event.getAction()) {  
9.         case MotionEvent.ACTION_DOWN:  
10.             radius = 0;  
11.             alpha = MAX_ALPHA;  
12.             width = radius / 4;  
13.             xDown = (int) event.getX();  
14.             yDown = (int) event.getY();  
15.   
16.             handler.sendEmptyMessage(0);  
17.   
18.             break;  
19.         case MotionEvent.ACTION_MOVE:  
20.   
21.             break;  
22.         case MotionEvent.ACTION_UP:  
23.   
24.             break;  
25.   
26.         default:  
27.             break;  
28.         }  
29.   
30.         return true;  
31.     }  

可以看到，我们这里先只实现了ACTION_DOWN里面的逻辑，在每一个按下的时候将半径radius设置为0，透明度alpha设置为完全不透明，而宽度也为0，并且获取按下的x和y坐标，之后就使用handler发送了一个空消息，让handler去实现定时刷新状态和绘制图形的工作，我们想让圆环的透明度alpha捡到0的时候就不再继续定时自动刷新了，否则在每一次handleMessage的时候都先刷新状态值，然后绘制图形：

[java] view plain copy

1. private Handler handler = new Handler() {  
2.   
3.     @Override  
4.     public void handleMessage(Message msg) {  
5.         super.handleMessage(msg);  
6.         switch (msg.what) {  
7.         case 0:  
8.             flushState();  
9.   
10.             invalidate();  
11.   
12.             if (alpha != 0) {  
13.                 // 如果透明度没有到0，则继续刷新，否則停止刷新  
14.                 handler.sendEmptyMessageDelayed(0, 50);  
15.             }  
16.   
17.             break;  
18.   
19.         default:  
20.             break;  
21.         }  
22.     }  
23.   
24.     /** 
25.      * 刷新状态 
26.      */  
27.     private void flushState() {  
28.         radius += 5;  
29.         alpha -= 10;  
30.         if (alpha < 0) {  
31.             alpha = 0;  
32.         }  
33.         // System.out.println("alpha=" + alpha);  
34.         width = radius / 4;  
35.   
36.         paint.setAlpha(alpha);  
37.         paint.setStrokeWidth(width);  
38.     }  
39.   
40. };  

我们可以看到，在handler中，我们重写了handleMessage方法，在msg.what=0的时候，我们调用flushState()方法来刷新状态，和invalidate()方法来绘制图形，，然后使用handler.sendEmptyMessageDelayed(0, 50);来每隔50毫秒重复一次上面的工作；其中invalidate()是Android提供的，而flushState()则需要我们自己来实现；

按照我们的需求，每一次状态的刷新工作flushState()，我们需要做如下几件事：

(1)让半径增加

(2)让透明度减少，并设置给paint；

(3)环形的宽度增加，并设置给paint

(4)对于透明度而言，最大值是255，但是这里如果让透明度减少到0以下，比如说-1，那么实际上alpha的值不会是-1，而是255+(-1)=254，所以我们还需要加一个判断条件，防止alpha<0

[java] view plain copy

1. /** 
2.          * 刷新状态 
3.          */  
4.         private void flushState() {  
5.             radius += 5;  
6.             alpha -= 10;  
7.             if (alpha < 0) {  
8.                 alpha = 0;  
9.             }  
10.             // System.out.println("alpha=" + alpha);  
11.             width = radius / 4;  
12.   
13.             paint.setAlpha(alpha);  
14.             paint.setStrokeWidth(width);  
15.         }  

6、在两参的构造函数中添加一些初始化工作：

[java] view plain copy

1. public WaterWave(Context context, AttributeSet attrs) {  
2.         super(context, attrs);  
3.         alpha = 0;  
4.         radius = 0;  
5.         initPaint();  
6.     }  

至此，我们的第一步就基本完成了

二、实现多次点击圆环同时存在，同时刷新效果：

从面图二中，我们不难发现，不论如何点击，屏幕上都只会同时存在一个圆圈的效果，这是因为我们每次点击的时候，都重新设置了圆心，而且所有圆形的参数都是成员变量，都是共享的；不仅如此，如果在上一个圆圈没有消失的时候，就再次点击，会让新出现的圆圈变大的速度大大增加，这是因为使用handler.sendEmptyMessageDelayed(0,50)方法的原因，第二次点击时会重复触发这个方法，使得前后两次点击的handler.sendEmptyMessageDelayed()重叠生效，让实际间隔远远小于50毫秒，所以刷新速度快了很多

那么我们现在就要解决上面两个小问题，实现如下图的效果：

解决这两个小问题的思路：

1、针对所有水波纹圆圈共享参数的问题：

方法就是新建一个内部类Wave，用于存放每个圆圈的参数，每一个圆圈都对应一个Wave对象，然后在onDraw方法里面，同时重绘所有的圆圈视图；那么这里就还需要一个List集合waveList，用于存放所有的wave对象，方便遍历。

2、针对handler.sendEmptyMessageDelayed方法在后续点击的时候不断被调用，导致刷新越来越快的问题。

这里可以设置一个成员变量 boolean isStart;来标志是不是第一次按下；因为我们在第一次按下的时候，肯定是希望开始定时刷新，调用handler.sendEmptyMessageDelayed，让圆环的状态不断变化。但是对于之后的点击，我们其实只希望它立刻被刷新一次，并被加入到waveList集合中，而并不需要发送一个handler的信息来调用handler.sendEmptyMessageDelayed。所以在一开始的时候我们将其设置为true，而在第一次点击时候将其设置为false，那么在什么时候将其设置为false呢，这里牵涉到第三个问题：

3、对于waveList集合而言，如果一直点击往集合里面添加Wave对象，那么无疑会让这个集合越来越大，这个是我们不希望看到的。

我们希望在圆环的透明度值alpha变为0，也就是完全透明的时候，让其从waveList中remove掉，让其能被垃圾回收回收掉，这样如果点击几个点之后停止，点都会自动消失(alpha值减到0)，那么对应的Wave对象也会从waveList被移除，waveList的大小也会变成0，这个时候我们就可以停止handler.sendEmptyMessageDelayed方法继续被调用，同时可以将isStart重新设为true。那么isStart何时设为false呢？我们可以在flushState刷新状态的时候将其设为false，因为刷新状态的时候表明第一次点击已经按下了。然后在onTouchEvent方法的ACTION_DWON条件下，如果isStart为true才发送handler的消息，这代表第一次点击，之后再点击也不会发送而只是将wave对象添加到waveList中，因为第一次的时候调用flushState已经将isStart置为false了。

由于改动较大，代码如下：

[java] view plain copy

1. package com.example.waterwavedemo.ui;  
2.   
3. import java.util.ArrayList;  
4. import java.util.Collections;  
5. import java.util.List;  
6.   
7. import android.content.Context;  
8. import android.graphics.Canvas;  
9. import android.graphics.Color;  
10. import android.graphics.Paint;  
11. import android.os.Handler;  
12. import android.os.Message;  
13. import android.util.AttributeSet;  
14. import android.view.MotionEvent;  
15. import android.view.View;  
16.   
17. public class WaterWave extends View {  
18.   
19.     /** 
20.      * 波形的List 
21.      */  
22.     private List<Wave> waveList;  
23.   
24.     /** 
25.      * 最大的不透明度，完全不透明 
26.      */  
27.     private static final int MAX_ALPHA = 255;  
28.   
29.     protected static final int FLUSH_ALL = -1;  
30.   
31.     private boolean isStart = true;  
32.   
33.     // /**  
34.     // * 按下的时候x坐标  
35.     // */  
36.     // private int xDown;  
37.     // /**  
38.     // * 按下的时候y的坐标  
39.     // */  
40.     // private int yDown;  
41.     // /**  
42.     // * 用来表示圆环的半径  
43.     // */  
44.     // private float radius;  
45.     // private int alpha;  
46.   
47.     /* 
48.      * 1、两参构造函数 
49.      */  
50.     public WaterWave(Context context, AttributeSet attrs) {  
51.         super(context, attrs);  
52.         waveList = Collections.synchronizedList(new ArrayList<Wave>());  
53.     }  
54.   
55.     /** 
56.      * onMeasure方法，确定控件大小，这里使用默认的 
57.      */  
58.     @Override  
59.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
60.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
61.     }  
62.   
63.     @Override  
64.     /** 
65.      * 画出需要的图形的方法，这个方法比较关键 
66.      */  
67.     protected void onDraw(Canvas canvas) {  
68.         // 重绘所有圆环  
69.         for (int i = 0; i < waveList.size(); i++) {  
70.             Wave wave = waveList.get(i);  
71.             canvas.drawCircle(wave.xDown, wave.yDown, wave.radius, wave.paint);  
72.         }  
73.   
74.     }  
75.   
76.     /** 
77.      * 初始化paint 
78.      */  
79.     private Paint initPaint(int alpha, float width) {  
80.         /* 
81.          * 新建一个画笔 
82.          */  
83.         Paint paint = new Paint();  
84.   
85.         paint.setAntiAlias(true);  
86.         paint.setStrokeWidth(width);  
87.   
88.         // 设置是环形方式绘制  
89.         paint.setStyle(Paint.Style.STROKE);  
90.   
91.         // System.out.println("alpha=" + alpha);  
92.         paint.setAlpha(alpha);  
93.         // System.out.println("得到的透明度：" + paint.getAlpha());  
94.   
95.         paint.setColor(Color.RED);  
96.         return paint;  
97.     }  
98.   
99.     private Handler handler = new Handler() {  
100.   
101.         @Override  
102.         public void handleMessage(Message msg) {  
103.             super.handleMessage(msg);  
104.             switch (msg.what) {  
105.             case 0:  
106.                 flushState();  
107.   
108.                 invalidate();  
109.   
110.                 if (waveList != null && waveList.size() > 0) {  
111.                     handler.sendEmptyMessageDelayed(0, 50);  
112.                 }  
113.   
114.                 break;  
115.   
116.             default:  
117.                 break;  
118.             }  
119.         }  
120.   
121.     };  
122.   
123.     /** 
124.      * 刷新状态 
125.      */  
126.     private void flushState() {  
127.         for (int i = 0; i < waveList.size(); i++) {  
128.             Wave wave = waveList.get(i);  
129.             if (isStart == false && wave.alpha == 0) {  
130.                 waveList.remove(i);  
131.                 wave.paint = null;  
132.                 wave = null;  
133.                 continue;  
134.             } else if (isStart == true) {  
135.                 isStart = false;  
136.             }  
137.             wave.radius += 5;  
138.             wave.alpha -= 10;  
139.             if (wave.alpha < 0) {  
140.                 wave.alpha = 0;  
141.             }  
142.             wave.width = wave.radius / 4;  
143.             wave.paint.setAlpha(wave.alpha);  
144.             wave.paint.setStrokeWidth(wave.width);  
145.         }  
146.   
147.     }  
148.   
149.     // private Paint paint;  
150.     // private float width;  
151.   
152.     @Override  
153.     /** 
154.      * 触摸事件的方法 
155.      */  
156.     public boolean onTouchEvent(MotionEvent event) {  
157.         super.onTouchEvent(event);  
158.   
159.         switch (event.getAction()) {  
160.         case MotionEvent.ACTION_DOWN:  
161.             Wave wave = new Wave();  
162.             wave.radius = 0;  
163.             wave.alpha = MAX_ALPHA;  
164.             wave.width = wave.radius / 4;  
165.             wave.xDown = (int) event.getX();  
166.             wave.yDown = (int) event.getY();  
167.             wave.paint = initPaint(wave.alpha, wave.width);  
168.             if (waveList.size() == 0) {  
169.                 isStart = true;  
170.             }  
171.             System.out.println("isStart=" + isStart);  
172.             waveList.add(wave);  
173.             // 点击之后刷洗一次图形  
174.             invalidate();  
175.             if (isStart) {  
176.                 handler.sendEmptyMessage(0);  
177.             }  
178.             break;  
179.         case MotionEvent.ACTION_MOVE:  
180.   
181.             break;  
182.         case MotionEvent.ACTION_UP:  
183.   
184.             break;  
185.   
186.         default:  
187.             break;  
188.         }  
189.   
190.         return true;  
191.     }  
192.   
193.     private class Wave {  
194.         int waveX;  
195.         int waveY;  
196.         /** 
197.          * 用来表示圆环的半径 
198.          */  
199.         float radius;  
200.         Paint paint;  
201.         /** 
202.          * 按下的时候x坐标 
203.          */  
204.         int xDown;  
205.         /** 
206.          * 按下的时候y的坐标 
207.          */  
208.         int yDown;  
209.         float width;  
210.         int alpha;  
211.     }  
212.   
213. }  

三、实现完全效果（点击和移动，颜色随机，圆圈大小变化速度）

效果图就是跟图一的一样了，主要做几个小地方：

1、让onTouchEvent里面的ACTION_DOWN和ACTION_MOVE响应同样的事件，实际上就是去掉ACTION_DOWN的break;然后将处理代码写到随后的ACTION_MOVE中去即可

2、新建一个成员变量数组colors，里面放自己想要的颜色，然后在initPaint方法的设置color的时候，使用paint.setColor(colors[(int) (Math.random() * (colors.length - 1))]);

3、控制波形的变化趋势，这个看个人爱好，我是这样做的：在flushState中：

[java] view plain copy

1. wave.radius += waveList.size() - i;  
2. wave.width = (wave.radius / 3);  
3. wave.paint.setStrokeWidth(wave.width);  
4.   
5. // wave.alpha -= 10;  
6. if (wave.alpha < 0) {  
7.     wave.alpha = 0;  
8. }  
9. // wave.width = wave.radius / 4;  
10. wave.paint.setAlpha(wave.alpha);  

至此，就完成了自定义的水波纹效果了。存在的问题就是，如果在模拟器上，快速滑动，会有卡顿，在我的手机Nexus5上，还算流畅，应该跟内存无关，后续可能还会做一些优化。