您的位置:首页 > 其它

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

2015-03-08 14:07 239 查看
---------------------------------------看效果(还有动画效果哦)----------------------------------------------------



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);
}
}
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐