波形效果有几种不同的呈现形式,比如从中间向四周散开的波形,也就是熟知的水涟漪;还有上下波动的曲线,像五线谱等。英文中可以称作Wave或者Ripple,所以暂且叫它们WaveView、WaveLayout、RippleView、RippleLayout,接下来开始实现这些效果。
首先看一下Solo 火爆足球动态壁纸,
下面中间的按钮就是一个波形按钮,它会不断地向四周辐射,由于是静态图,如果想体验真实效果可以另行下载。这种效果的实现思路是不断绘制圆形,当然半径也要不断变化,透明度也是一样。代码如下:/**
*
*/
package com.kince.rippleview;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.View;
/**
* @author kince
* @category 波纹
* @since 2014.8.9
* @version v1.0.0
*
*/
public class RippleView extends View {
private int mScreenWidth;
private int mScreenHeight;
private Bitmap mRippleBitmap;
private Paint mRipplePaint = new Paint();
private int mBitmapWidth;
private int mBitmapHeight;
private boolean isStartRipple;
private int heightPaddingTop;
private int heightPaddingBottom;
private int widthPaddingLeft;
private int widthPaddingRight;
private RectF mRect = new RectF();
private int rippleFirstRadius = 0;
private int rippleSecendRadius = -33;
private int rippleThirdRadius = -66;
private Paint textPaint = new Paint();
private String mText="点击我吧";
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
// TODO Auto-generated method stub
super.handleMessage(msg);
invalidate();
if (isStartRipple) {
rippleFirstRadius++;
if (rippleFirstRadius > 100) {
rippleFirstRadius = 0;
}
rippleSecendRadius++;
if (rippleSecendRadius > 100) {
rippleSecendRadius = 0;
}
rippleThirdRadius++;
if (rippleThirdRadius > 100) {
rippleThirdRadius = 0;
}
sendEmptyMessageDelayed(0, 20);
}
}
};
/**
* @param context
*/
public RippleView(Context context) {
super(context);
// TODO Auto-generated constructor stub
init();
}
/**
* @param context
* @param attrs
*/
public RippleView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
init();
}
/**
* @param context
* @param attrs
* @param defStyleAttr
*/
public RippleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// TODO Auto-generated constructor stub
init();
}
private void init() {
mRipplePaint.setColor(4961729);
mRipplePaint.setAntiAlias(true);
mRipplePaint.setStyle(Paint.Style.FILL);
textPaint.setTextSize(26);
textPaint.setAntiAlias(true);
textPaint.setStyle(Paint.Style.FILL);
textPaint.setColor(Color.WHITE);
mRippleBitmap = BitmapFactory.decodeStream(getResources()
.openRawResource(R.drawable.