今天分享一个项目中用到的自定义 view, 效果图如下,颜色设置得太浅,制作 gif 时候又把图片压缩了,不是很清晰,但还是可以看到淡淡的波纹。另外,很久之前也写过一个 折线图LineChart,有兴趣的可以看一下,如果对你有用可以 star 一下 。
水波纹效果实现
- 波纹动画状态
//波纹状态
public enum WaveState {
STATE_IDLE,
STATE_ANIMATING,
STATE_STOPPING,
}
- 水波纹类
//波纹类
private class CircleWave {
private int mWaveRadius = mWaveRadiusInit;
//半径增加
public void step() {
mWaveRadius += mWaveStep;
}
//获取半径
public int getWaveRadius() {
return mWaveRadius;
}
}
以上已经完成了所有的准备工作,下面来画水波纹动画。
- 在 onDraw(Canvas canvas) 方法中实现以下代码
@Override
protected void onDraw(Canvas canvas) {
if(mWaveState == WaveState.STATE_IDLE){
super.onDraw(canvas);
return;
}
if (mWaveState == WaveState.STATE_ANIMATING) {
//获取最里面波纹的半径
int lastWaveRadius = mWaveList.size() == 0 ? mWaveRadiusInit : mWaveList.getLast().getWaveRadius();
//判断最里面的波纹是否达到间隔
if (mWaveList.size() == 0 || (lastWaveRadius - mWaveRadiusInit >= mWaveInternal)) {
//虽然new了对象但是不是非常频繁的操作
@SuppressLint("DrawAllocation")
CircleWave circleWave = new CircleWave();
mWaveList.add(circleWave);
}
}
//绘画波纹
for (CircleWave circleWave : mWaveList) {
//用半径来确定清晰度 alpha
int waveRadius = circleWave.getWaveRadius();
float ratio = (float) waveRadius / mMaxRadius;
int alpha = (int) ((1 - ratio) * AlphaFactor);
mPaint.setColor(mWaveColor);
mPaint.setAlpha(alpha);
//获取父布局的第一个子布局的中心坐标
PointF centerPoint = new PointF();
try {
if(getChildCount() <= 0){
throw new Exception("Please include a sub layout!");
}
centerPoint = getCenterPoint(getChildAt(0));
} catch (Exception e) {
e.printStackTrace();
}
canvas.drawCircle(centerPoint.x, centerPoint.y, waveRadius, mPaint);
//增加半径
circleWave.step();
}
if (mWaveList.size() > 0) {
//获取最外面的波纹
CircleWave circleWave = mWaveList.getFirst();
//当半径大于最大半径,去除波纹
if (circleWave.getWaveRadius() > mMaxRadius) {
mWaveList.remove(circleWave);
}
} else {
//重置状态
if (mWaveState == WaveState.STATE_STOPPING) {
mWaveState = WaveState.STATE_IDLE;
}
}
super.onDraw(canvas);
invalidate();
}
//获取 view 的 float 值中心坐标
private PointF getCenterPoint(View view) {
PointF pointF = new PointF();
int pivotX = (view.getRight() - view.getLeft()) / 2 + view.getLeft();
int pivotY = (view.getBottom() - view.getTop()) / 2 + view.getTop();
pointF.set(pivotX, pivotY);
return pointF;
}
代码注释写得很清楚,我就不多说了。
水波纹效果使用
- 布局
- 方法
startWave() //开始波纹动画
stopWave() //停止动画
基础知识点
TypedArray 的使用
- 新建 attrs 资源文件,并自定义属性,例如:
- 自定义 view 中获取自定义属性值,例如:
public WaveView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
mContext = context;
TypedArray typedArray = mContext.getTheme().obtainStyledAttributes(attrs, R.styleable.WaveView, 0, 0);
try {
mTouchAnim = typedArray.getBoolean(R.styleable.WaveView_touch_anim, true);
mStartAnim = typedArray.getBoolean(R.styleable.WaveView_start_anim, false);
mWaveColor = typedArray.getColor(R.styleable.WaveView_wave_color, mWaveColor);
} finally {
typedArray.recycle();
}
}
- 布局中设置属性,例如:
ViewTreeObserver 知识
ViewTreeObserver 是用来监听视图树状态的,详细介绍请阅读博文 Android ViewTreeObserver使用总结及获得View高度的几种方法
水波纹自定义 view 主要用 ViewTreeObserver 获取视图的宽高,例如:
getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
getViewTreeObserver().removeOnPreDrawListener(this);
mWaveRadiusInit = getWidth() / 2;
return false;
}
});
源码下载
注意:有些代码修改更新,请查看上面代码
Android自定义 view 水波纹效果