自定义View-----汽泡效果

先来看一下这次要实现的最终效果：





首先来实现效果一，为实现效果二做充足的准备，下面开始：

新建工程，并定义一个自定义View，然后将其定义在布局文件中，里面是空实现，之后会一步步来填充代码：



MyRing.java:

public class MyRing extends View {

public MyRing(Context context, AttributeSet attrs) {
super(context, attrs);
}

}

activity_main.xml:

<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=".MainActivity" >

<com.example.waveview.MyRing
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

</RelativeLayout>

接下来一步步来实现第一张效果图所示的效果，先重写父类的某些方法：

public class MyRing extends View {

public MyRing(Context context, AttributeSet attrs) {
super(context, attrs);
}

/**
* 大小的测量按系统的默认规则
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

/**
* 绘制我们的内容
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
}

在点击时需要画一个圆，这是第一步，所以需要监听触摸事件：

public class MyRing extends View {

/**
* 圆环圆心的X坐标
*/
private int cx;

/**
* 圆环圆心的Y坐标
*/
private int cy;
private Paint paint;
/**
* 线条的厚度
*/
private float strokeWidth;

public MyRing(Context context, AttributeSet attrs) {
super(context, attrs);
// 初始化paint
paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.RED);
paint.setStyle(Style.STROKE); // 刻画，画线条
paint.setStrokeWidth(strokeWidth); // 设置条线的厚度
}

/**
* 大小的测量按系统的默认规则
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

/**
* 绘制我们的内容
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**
* 绘制圆环，为了看到效果先将半径写死
*/
canvas.drawCircle(cx, cy, 100, paint);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: // 点击，获得圆环的中心
cx = (int) event.getX();
cy = (int) event.getY();
invalidate();
break;
}
return true;
}
}

效果如下：



默认圆画在(0,0)的位置，有了第一步之后，接下来则要让这个圆进行动态渐变，半径、圆边线的粗度都得动态去改变，具体代码如下：

public class MyRing extends View {

/**
* 圆环圆心的X坐标
*/
private int cx;

/**
* 圆环圆心的Y坐标
*/
private int cy;
private Paint paint;
/**
* 线条的厚度
*/
private float strokeWidth;
/**
* 圆环的半径
*/
private float radius;
private Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
flushState();
// 刷新页面 执行onDraw()方法
invalidate();
if (paint.getAlpha() != 0) {
handler.sendEmptyMessageDelayed(0, 100);
}
};
};

public MyRing(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}

private void initView() {
// 初始化paint
paint = new Paint();
paint.setAntiAlias(true); // 抗矩齿
paint.setColor(Color.RED);
paint.setStyle(Style.STROKE); // 刻画，画线条
paint.setStrokeWidth(strokeWidth); // 设置条线的厚度
paint.setAlpha(255); // 设置透明度 ，0--255 0代表完全透明

//
this.radius = 0;
strokeWidth = 0;
}

/**
* 大小的测量按系统的默认规则
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

/**
* 绘制我们的内容
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**
* 绘制圆环
*/
canvas.drawCircle(cx, cy, radius, paint);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: // 点击，获得圆环的中心
cx = (int) event.getX();
cy = (int) event.getY();
// 初始化画笔
initView();
handler.sendEmptyMessage(0);
break;
}
return true;
}

/*
* 刷新状态
*/
private void flushState() {
this.radius += 10;
this.strokeWidth = radius / 4;
paint.setStrokeWidth(strokeWidth);

int nextAlpha = paint.getAlpha() - 20;
if (nextAlpha <= 20) {
nextAlpha = 0;
}
paint.setAlpha(nextAlpha);

}
}

这时就是图一的效果了，有了这个基础，要实现图二的效果也就不难了，下面来试一下：

由于是多个圆，所以肯定是需要一个集合来存储，另外需要用一个实体来表示一个圆的多个属性，如下：

/**
* 定义一个波浪
* @author leo
*/
private class Wave {
//圆心
int cx;
int cy;

//画笔
Paint p;
//半径
int r;
}

然后在按下或滑动时，则把相应的点给添加到集合中，并且需要点与点之间有一定的距离才行，挨得太近则不添加，具体逻辑如下：

@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(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(Style.STROKE);

w.p = pa;

wList.add(w);
}

其中当一第一次添加时，则会开启handler去跑圆环动画，其它的则相继往集合中添加，而handler的写法跟一个圆环的写法差不多，这里就不多解释，直接把整个代码贴上来，都比较好理解：

/**
* 水波纹效果
*
*/
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>();
}

private Handler handler = new Handler(){
public void handleMessage(android.os.Message msg) {

//刷新数据
flushData();
//刷新页面
invalidate();
//循环动画
if (isRunning) {
handler.sendEmptyMessageDelayed(0, 50);
}

};
};

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

}

/**
* 添加新的波浪中心点
* @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(Style.STROKE);

w.p = pa;

wList.add(w);
}

private int [] colors = new int[]{Color.BLUE,Color.RED,Color.YELLOW,Color.GREEN};
/**
* 刷新数据
*/
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;
}
}

/**
* 定义一个波浪
* @author leo
*/
private class Wave {
//圆心
int cx;
int cy;

//画笔
Paint p;
//半径
int r;
}
}

对于这个自定义效果倒不是很复杂，但效果还是挺炫滴，以后坚持收集学习好的UI效果。