码迷,mamicode.com
首页 > 其他好文 > 详细

自定义控件---继承View类方式(五彩绚烂的水波纹案例)

时间:2015-03-08 14:16:29      阅读:597      评论:0      收藏:0      [点我收藏+]

标签:

---------------------------------------看效果(还有动画效果哦)----------------------------------------------------

技术分享

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.atguigu.myware.MyWave
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

MainActivity.java

package com.atguigu.myware;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
}

MyWave.java

package com.atguigu.myware;

import java.util.ArrayList;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * 水波纹效果
 */
public class MyWave extends View {
	/**
	 * 定义一个水波浪类(一个圆环包括圆心、半径、画笔(需要绘制))
	 */
	private class Wave {
		// 圆心
		int pointX;
		int pointY;
		// 半径
		int radius;
		// 画笔
		Paint paint;
	}

	// 二个相临波浪中心点的最小距离
	private static final int DIS_SOLP = 13;
	// 是否有水波浪
	protected boolean isRunning = false;

	/**
	 * 第一步构造器
	 */
	// 定义水波纹的集合
	private ArrayList<Wave> wList;

	public MyWave(Context context, AttributeSet attrs) {
		super(context, attrs);
		// 初始化创建水波纹集合
		wList = new ArrayList<MyWave.Wave>();
	}

	/**
	 * touch事件
	 */
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		super.onTouchEvent(event);

		switch (event.getAction()) {
		//按下屏幕、滑动都可以产生水波
		case MotionEvent.ACTION_DOWN:
		case MotionEvent.ACTION_MOVE:
			// 得到down、move的圆心
			int x = (int) event.getX();
			int y = (int) event.getY();
			// 如果水波纹集合为空,就绘制一个水波纹
			if (wList.size() == 0) {
				//绘制水波纹
				addPoint2List(x, y);
				// 修改状态,说明水波生成
				isRunning = true;
				//此刻发送一个消息,说明绘制了一个水波
				handler.sendEmptyMessage(0);
			} else {
				// 如果水波集合不为空,就去最后一个绘制的环形水波
				Wave w = wList.get(wList.size() - 1);

				if (Math.abs(w.pointX - x) > DIS_SOLP
						|| Math.abs(w.pointY - y) > DIS_SOLP) {
					addPoint2List(x, y);
				}
			};
			break;

		default:
			break;
		}
		return true;
	}

	/*
	 * 定义4种色彩的水波
	 */
	private int[] colors = new int[] { Color.BLUE, Color.RED, Color.YELLOW,
			Color.GREEN };

	/**
	 * 添加波浪
	 */
	private void addPoint2List(int x, int y) {
		//创建一个水波类
		Wave w = new Wave();
		//将滑动或者按下时候的坐标赋值给水波类
		w.pointX = x;
		w.pointY = y;
		//创建画笔
		Paint pa = new Paint();
		//画出水波(环形)设置颜色,抗锯齿,形状
		pa.setColor(colors[(int) (Math.random() * 4)]);
		pa.setAntiAlias(true);
		pa.setStyle(Style.STROKE);
		//赋值
		w.paint = pa;
		//往集合中添加一个环形水波
		wList.add(w);
	}

	/**
	 * 绘制水波纹
	 */
	@Override
	protected void onDraw(Canvas canvas) {
		for (int i = 0; i < wList.size(); i++) {
			Wave wave = wList.get(i);
			canvas.drawCircle(wave.pointX, wave.pointY, wave.radius, wave.paint);
		}
	}

	/*
	 * 运用消息机制
	 */
	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.paint.getAlpha();
			if (alpha == 0) {
				wList.remove(i); 
				continue;
			}
			//每次透明度值减5
			alpha -= 5;
			if (alpha < 5) {
				alpha = 0;
			}
			// 降低透明度
			w.paint.setAlpha(alpha);

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

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

---------------------------看一个简单的版本----------------------效果是逐渐变大,直到消失--------------------------------

技术分享

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.atguigu.myware.MyWave
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

MainActivity.java

package com.atguigu.myware;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
}

MyWave.java

package com.atguigu.myware;


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;


/**
 * 水波纹的效果的视图
 * 
 */
public class MyWave extends View {


	private Paint paint;


	@Override
	public boolean onTouchEvent(MotionEvent event) {
		super.onTouchEvent(event);
		switch (event.getAction()) {
		/*
		 * 当按下的时候开始绘制圆环水波纹
		 */
		case MotionEvent.ACTION_DOWN:
			// 1. 设置圆心
			startX = event.getX();
			startY = event.getY();


			// 2.根据圆心创建新的圆
			initView();


			// 3.绘制
			invalidate();


			break;


		default:
			break;
		}
		return true;
	}


	private Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			// 1.透明度改变-小
			int alpha = paint.getAlpha();
			alpha -= 5;
			if (alpha < 0) {
				alpha = 0;
			}
			// 透明度:0~255之间
			paint.setAlpha(alpha);


			// 2.半径变大
			radius += 5;
			paint.setStrokeWidth(radius / 3);


			// 3.再次绘制一个,执行onDraw方法
			invalidate();
		};
	};


	/*
	 * 第一步、构造器
	 */
	public MyWave(Context context, AttributeSet attrs) {
		super(context, attrs);
		initView();
	}


	/**
	 * 初始化View
	 */
	private int radius;// 半径


	private void initView() {
		paint = new Paint();
		// 设置颜色
		paint.setColor(Color.RED);
		// 设置抗锯齿
		paint.setAntiAlias(true);
		// 设置圆环样式
		paint.setStyle(Style.STROKE);
		// 半径为5
		radius = 5;
		paint.setStrokeWidth(radius / 3);


	}


	// 圆形坐标
	private float startX;
	private float startY;


	/**
	 * 绘制环形水波纹
	 */
	@Override
	protected void onDraw(Canvas canvas) {
		if (paint.getAlpha() > 0) {
			if (startX > 0 && startY > 0) {
				// 绘制一个圆环
				canvas.drawCircle(startX, startY, radius, paint);
				// 绘制的同时,发送一个延迟消息
				handler.sendEmptyMessageDelayed(0, 50);
			}
		}
	}
}



自定义控件---继承View类方式(五彩绚烂的水波纹案例)

标签:

原文地址:http://blog.csdn.net/u013210620/article/details/44132559

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!