Android自定义控件之自定义View(三)——自定义水波纹

转载请注明出处：http://blog.csdn.net/xiaohao0724/article/details/54572605

上一篇我们实现了点击屏幕以点击的这个点为圆心画圆并放大，现在我们对上篇进一步加深自定义水波纹效果。

效果图如下:

1、定义一个自定义View和水波纹类，并在构造方法里面初始化水波纹类集合

public class RingWaveView extends View {


public RingWaveView(Context context, AttributeSet attrs) {
		super(context, attrs);
		ringWaveViewList = new ArrayList<RingWaveView.Wave>();
}
	
	/**
	 * 定义一个波浪
	 */
	private class Wave {

		int cx; // 圆心横坐标
		int cy; // 圆心纵坐标
		Paint paint; // 画笔
		int radius; // 半径
	}
		
}

2、重写onTouchEvent方法确定水波纹的圆心和半径

	@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;

	}

	/**
	 * 添加新的波浪中心点
	 * 
	 * @param x
	 * @param y
	 */
	private void addPoint(int x, int y) {

		if (ringWaveViewList.size() == 0) {

			addPoint2List(x, y);
			/*
			 * 第一次启动动画
			 */
			isRunning = true;
			handler.sendEmptyMessage(0);
		} else {
			 
			Wave wave = ringWaveViewList.get(ringWaveViewList.size() - 1);
			//判断当手指滑动与上一个圆环相差20px时再添加新的圆环
			if (Math.abs(wave.cx - x) > DIS_SOLP
					|| Math.abs(wave.cy - y) > DIS_SOLP) {
				addPoint2List(x, y);
			}

		}
		;

	}

	/**
	 * 添加新的波浪
	 * 
	 * @param x
	 * @param y
	 */
	private void addPoint2List(int x, int y) {

		Wave wave = new Wave();
		wave.cx = x;
		wave.cy = y;
		Paint paint = new Paint();
		paint.setColor(colors[(int) (Math.random() * 5)]);
		paint.setAntiAlias(true);
		paint.setStyle(Style.STROKE);

		wave.paint = paint;

		ringWaveViewList.add(wave);
	}

3、重写onDraw方法绘制水波纹

	@Override
	protected void onDraw(Canvas canvas) {
		for (int i = 0; i < ringWaveViewList.size(); i++) {
			Wave wave = ringWaveViewList.get(i);
			canvas.drawCircle(wave.cx, wave.cy, wave.radius, wave.paint);
		}
	}

4、根据手机触摸移动通过Handler发消息刷新数据重绘水波纹

	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 < ringWaveViewList.size(); i++) {

			Wave wave = ringWaveViewList.get(i);

			// 如果透明度为 0 从集合中删除
			int alpha = wave.paint.getAlpha();
			if (alpha == 0) {
				ringWaveViewList.remove(i); // 删除i 以后，i的值应该再减1
				i--;
				// 否则会漏掉一个对象，不过，在此处影响不大，效果上看不出来。
				continue;
			}

			alpha -= 5;
			if (alpha < 5) {
				alpha = 0;
			}
			// 降低透明度
			wave.paint.setAlpha(alpha);

			// 扩大半径
			wave.radius = wave.radius + 4;
			// 设置半径厚度
			wave.paint.setStrokeWidth(wave.radius / 4);
		}

		/*
		 * 如果集合被清空，就停止刷新动画
		 */
		if (ringWaveViewList.size() == 0) {
			isRunning = false;
		}
	}

OK，大功告成，有没有很炫的赶脚

点击下载源码