android 自定义 view 水波纹效果

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

动画效果图

android 自定义 view 水波纹效果_第1张图片
另附截图.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;
 }

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

水波纹效果使用

  • 布局

    
    
         
         
     
     

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

你可能感兴趣的:(android 自定义 view 水波纹效果)