自定义View详解(3)

大家教师节快乐啊，不知道勤学的Coder们有没有去尝试下绘制上篇文章中最后留下的进阶效果，不管怎样，还是一起动手写一遍吧！看看套路是否一致。

---

水波纹

 

首先来看图-水波纹中的效果，其具有以下特点：

• 从内到外四层，内圆外环；

• 从内到外四个色值；

• 最内部圆局于View中心；

• 圆和环同心；

看出以下几点，我们就可以开始按照套路画图了，老套路走起(在以后自定义View部分新建项目及类相关的描述不再赘述)。

声明画笔和宽高

1.声明画笔及宽高
如上分析，我们需要两个画笔，一个用于绘制内圆，一个用于绘制外环。

/**
   * 绘制最中心圆的Paint
   */
  private Paint mInnerCirclePaint;

  /**
   * 绘制外部圆环的Paint
   */
  private Paint mOutterRingPaint;

  /**
   * View宽度
   */
  private int mWidth;

  /**
   * View高度
   */
  private int mHeight;

  /**
   * 外环宽度
   */
  private int mOuttterRingWidth = 50;

2.初始化画笔并在构造函数内调用
由于外部为圆环，所以外部画笔样式设置为空心，内部圆画笔样式设置为实心，同时设置画笔宽度为外部圆环宽度。

  public WaveView(Context context) {
    super(context);
    init();
  }

  public WaveView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    init();
  }

  public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }

  private void init() {
    mInnerCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mInnerCirclePaint.setColor(Color.BLUE);
    /** 内部画笔为实心 **/
    mInnerCirclePaint.setStyle(Style.FILL);

    mOutterRingPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mOutterRingPaint.setColor(Color.BLUE);
    /** 外部画笔为空心 **/
    mOutterRingPaint.setStyle(Style.STROKE);
    mOutterRingPaint.setStrokeWidth(mOuttterRingWidth);
  }

3.初始化宽高

  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    if (w > 0 && h > 0){
      mWidth = w;
      mHeight = h;
    }
  }

计算Points

声明内圆半径，圆环宽度，计算各圆的半径，同心圆及圆环，圆心位于View中心。

 

如图-水波纹内部距离说明，外环所在圆依次为（radius为外环半径，mInnerRadius为内圆半径，mOutterRingWidth为环宽度）：

一环：半径与内圆半径一致，radius = mInnerRadius+(mOutterRingWidth/2)1； 二环：半径等于内圆半径+圆环宽度，radius = mInnerRadius + (mOutterRingWidth/2)3;
…
依次类推，我们可以得到外部圆环半径公式：

radius = mInnerRadius + (mOutterRingWidth/2) * i;(i取1,3,5,7,9…)

如此我们就可以开始撸码了。

  /*  声明必要变量 */
  /**
   * 内圆半径
   */
  private int mInnerRadius = 50;

  /**
   * 存储计算所得的外环半径
   */
  private int[] mRadius = new int[4];

  /* 计算外环半径 */
  private void calculateRadius() {
    for (int i = 0; i < 4; i++) {
      mRadius[i] = mInnerRadius + (i * 2 + 1) * mOuttterRingWidth / 2;
    }
  }

获取画布绘制圆及圆环

重写onDraw函数获取canvas，并绘制圆环及内圆。

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    calculateRadius();
    canvas.drawCircle(mWidth / 2, mHeight / 2, mInnerRadius, mInnerCirclePaint);
    for (int i = 0; i < 4; i++) {
      /** 改变外环的颜色透明度 **/
      mOutterRingPaint.setAlpha(255 - (int) (255 * ((float) (i + 1) / 5)));
      canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius[i], mOutterRingPaint);
    }
  }

至于运行效果，大家自己动手试一下喽！

---

动起来的水波纹

虽然我们画出来了水波纹，但是和蔼的产品还是会批斗你的，他会说，你家水波纹静态的哦？这一秒钟心里是不是有一万只羊驼奔腾？哈哈！奔腾归奔腾，需求我们还是要实现下滴。

那么我们来观察下现实中的水波纹，不难发现与图-水波纹形成 相似的过程。

 

我们可以看出水波纹动态形成的本质是，外部圆环逐步扩张增加形成的。那么我们只需要动态控制外部圆环的绘制个数，就可以让它动起来了。

属性动画

说到控制外环个数动态增长，做过动画的朋友第一个直觉肯定就是属性动画喽，这样是值变化，所以我们使用ValueAnimator即可(关于属性动画，帧动画，View动画相关的细节，我们在后续文章中单独说明)。

1.声明动画相关的成员

  /**
   * 控制外环个数变化的属性动画对象
   */
  private ValueAnimator mValueAnimator;

  /**
   * 绘制的外环总个数
   */
  private int mOutterRingCount = 4;

2.初始化动画对象并开始

public void startAnimation(){
    //创建ValueAnimator对象，按照整型值从0变化到4
    mValueAnimator = ValueAnimator.ofInt(0,5);
    //设置动画重复类型,RESTART--重新开始，REVERSE--值反转
    mValueAnimator.setRepeatMode(ValueAnimator.RESTART);
    //设置动画重复次数，-1--不限制次数
    mValueAnimator.setRepeatCount(-1);
    mValueAnimator.setDuration(2000);
    mValueAnimator.addUpdateListener(new AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator valueAnimator) {
        mOutterRingCount = (int) valueAnimator.getAnimatedValue();
        postInvalidate();
      }
    });
    mValueAnimator.start();
  }

3.更新onDraw循环参数

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    calculateRadius();
    canvas.drawCircle(mWidth / 2, mHeight / 2, mInnerRadius, mInnerCirclePaint);
    for (int i = 0; i < mOutterRingCount; i++) {
      mOutterRingPaint.setAlpha(255 - (int) (255 * ((float) (i + 1) / 5)));
      canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius[i], mOutterRingPaint);
    }
  }

运行效果见gif，至此我们就完成了水波纹自定义View的开发，怎么样？是不是很有趣啊.