Android自定义View之酷炫数字圆环

2019-12-10 19:25:26王冬梅
易采站长站为您分析Android自定义View之酷炫数字圆环,实现效果很酷,值得大家学习,感兴趣的小伙伴们可以参考一下  

先看下最终的效果

Android自定义View之酷炫数字圆环

一、开始实现
新建一个DoughnutView继承View

  public class DoughnutView extends View {

  }

先重写onMeasure方法。  

 /**
   * 当布局为wrap_content时设置默认长宽
   *
   * @param widthMeasureSpec
   * @param heightMeasureSpec
   */
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    setMeasuredDimension(measure(widthMeasureSpec), measure(heightMeasureSpec));
  }

  private int measure(int origin) {
    int result = DEFAULT_MIN_WIDTH;
    int specMode = MeasureSpec.getMode(origin);
    int specSize = MeasureSpec.getSize(origin);
    if (specMode == MeasureSpec.EXACTLY) {
      result = specSize;
    } else {
      if (specMode == MeasureSpec.AT_MOST) {
        result = Math.min(result, specSize);
      }
    }
    return result;
  }

下面就是最重要的重写onDraw方法,大致流程如下
1、画白色圆环(背景),记得改下Activity背景色不然白色圆环看不出来。

 //画背景白色圆环
 initPaint();
 float doughnutWidth = Math.min(width, height) / 2 * 0.15f;
 paint.setStrokeWidth(doughnutWidth);
 paint.setStyle(Paint.Style.STROKE);
 paint.setColor(Color.WHITE);
 paint.setAntiAlias(true);
 RectF rectF = new RectF((width > height ? Math.abs(width - height) / 2 : 0) + doughnutWidth / 2, (height > width ? Math.abs(height - width) / 2 : 0) + doughnutWidth / 2, width - (width > height ? Math.abs(width - height) / 2 : 0) - doughnutWidth / 2, height - (height > width ? Math.abs(height - width) / 2 : 0) - doughnutWidth / 2);
 canvas.drawArc(rectF, 0, 360, false, paint);