android 自定义 view 水波纹效果

今天分享一个项目中用到的自定义 view，效果图如下，颜色设置得太浅，制作 gif 时候又把图片压缩了，不是很清晰，但还是可以看到淡淡的波纹。另外，很久之前也写过一个折线图LineChart，有兴趣的可以看一下，如果对你有用可以 star 一下 😁。

动画效果图

另附截图.jpeg

水波纹效果实现

波纹动画状态

//波纹状态
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;
 }

代码注释写得很清楚，我就不多说了。

水波纹效果使用

布局

<kntryer.spoil.ui.view.WaveView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:touch_anim="true"
    app:start_anim="true"
    app:wave_color="@color/waveColor">
    <!--这里是你的布局-->
    <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center_horizontal"
         android:background="@drawable/bg_circle_w"
         android:padding="5dp">
         <!--android:onClick="jumpToHome"-->
         <ImageView
             android:id="@+id/iv_avatar"
             android:layout_width="100dp"
             android:layout_height="100dp" />
     </LinearLayout>
     <!--这里是你的布局-->
</kntryer.spoil.ui.view.WaveView>

方法

startWave() //开始波纹动画

stopWave() //停止动画

基础知识点

TypedArray 的使用

新建 attrs 资源文件，并自定义属性，例如：

<declare-styleable name="WaveView">
      <attr name="touch_anim" format="boolean"/>
      <attr name="start_anim" format="boolean"/>
      <attr name="wave_color" format="color"/>
  </declare-styleable>

自定义 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();
     }
 }

布局中设置属性，例如：

<kntryer.spoil.ui.view.WaveView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     app:touch_anim="true"
     app:start_anim="true"
     app:wave_color="@color/waveColor">
            
</kntryer.spoil.ui.view.WaveView>

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 水波纹效果