Android自定义View弧线进度控件

这个是一个以弧线为依托的进度控件，主要包括了两个圆弧、一个圆、一个文本。

 

当我们点击开始按钮的时候，会出现一个动画，逐渐的出现进度，好了，下面开始我们的编码。

新建一个类，继承自view，实现三个构造方法，接着定义变量，初始化变量的数据。代码如下：

private paint marcpaint, mcirclepaint, mtextpaint, mpaint;

 private float length;

 private float mradius;

 private float mcirclexy;

 private float msweepvalue = 0;

 private string mshowtext = "0%";

 private rectf mrectf;

 public mviewone(context context, attributeset attrs, int defstyleattr) {
  super(context, attrs, defstyleattr);
  initview();
 }

 public mviewone(context context, attributeset attrs) {
  super(context, attrs);
  initview();
 }

 public mviewone(context context) {
  super(context);
  initview();
 }

 private void initview() {
  marcpaint = new paint();
  marcpaint.setstrokewidth(50);
  marcpaint.setantialias(true);
  marcpaint.setcolor(color.green);
  marcpaint.setstyle(style.stroke);

  mcirclepaint = new paint();
  mcirclepaint.setcolor(color.green);
  mcirclepaint.setantialias(true);

  mtextpaint = new paint();
  mtextpaint.setantialias(true);
  mtextpaint.setcolor(color.red);
  mtextpaint.setstrokewidth(0);

  mpaint = new paint();
  mpaint.setstrokewidth(40);
  mpaint.setantialias(true);
  mpaint.setcolor(color.yellow);
  mpaint.setstyle(style.stroke);


 }

可以看到，这里一共定义了四个画笔，两个画弧形，一个画文本，还有一个绘制圆。

在我们的onsizechange方法里面，再给变量赋值。

 @override
 protected void onsizechanged(int w, int h, int oldw, int oldh) {
  super.onsizechanged(w, h, oldw, oldh);
  length = w;
  mcirclexy = length / 2;
  mradius = (float) (length * 0.5 / 2);

 }

这时候，圆的半径、圆的起绘点，都已经有值了。

下面开始绘制

@override
 protected void ondraw(canvas canvas) {
  super.ondraw(canvas);
  // 画圆
  mrectf = new rectf((float) (length * 0.1), (float) (length * 0.1),
    (float) (length * 0.9), (float) (length * 0.9));
  canvas.drawcircle(mcirclexy, mcirclexy, mradius, mcirclepaint);
  // 画弧线
  canvas.drawarc(mrectf, 270, 360, false, mpaint);

  canvas.drawarc(mrectf, 270, msweepvalue, false, marcpaint);

  // 绘制文字
  float textwidth = mtextpaint.measuretext(mshowtext); //测量字体宽度，我们需要根据字体的宽度设置在圆环中间

  canvas.drawtext(mshowtext, (int)(length/2-textwidth/2), (int)(length/2+textwidth/2) , mtextpaint);

 }

这个时候，全部的效果已经出来了，但是这个还是静态的，对外暴露一个方法，让数据可以动态的刷新

 public void setprogress(float msweepvalue) {
  float a = (float) msweepvalue;
  if (a != 0) {
   this.msweepvalue = (float) (360.0 * (a / 100.0));
   mshowtext = msweepvalue + "%";
   log.e("this.msweepvalue:", this.msweepvalue + "");
  } else {
   this.msweepvalue = 25;
   mshowtext = 25 + "%";
  }

  invalidate();
 }

好了，所有的代码都在这里了，老规矩，最后我贴上全部的代码：

public class mviewone extends view {
 private paint marcpaint, mcirclepaint, mtextpaint, mpaint;

 private float length;

 private float mradius;

 private float mcirclexy;

 private float msweepvalue = 0;

 private string mshowtext = "0%";

 private rectf mrectf;

 public mviewone(context context, attributeset attrs, int defstyleattr) {
  super(context, attrs, defstyleattr);
  initview();
 }

 public mviewone(context context, attributeset attrs) {
  super(context, attrs);
  initview();
 }

 public mviewone(context context) {
  super(context);
  initview();
 }

 private void initview() {
  marcpaint = new paint();
  marcpaint.setstrokewidth(50);
  marcpaint.setantialias(true);
  marcpaint.setcolor(color.green);
  marcpaint.setstyle(style.stroke);

  mcirclepaint = new paint();
  mcirclepaint.setcolor(color.green);
  mcirclepaint.setantialias(true);

  mtextpaint = new paint();
  mtextpaint.setantialias(true);
  mtextpaint.setcolor(color.red);
  mtextpaint.setstrokewidth(0);

  mpaint = new paint();
  mpaint.setstrokewidth(40);
  mpaint.setantialias(true);
  mpaint.setcolor(color.yellow);
  mpaint.setstyle(style.stroke);


 }

 @override
 protected void onsizechanged(int w, int h, int oldw, int oldh) {
  super.onsizechanged(w, h, oldw, oldh);
  length = w;
  mcirclexy = length / 2;
  mradius = (float) (length * 0.5 / 2);

 }

 @override
 protected void ondraw(canvas canvas) {
  super.ondraw(canvas);
  // 画圆
  mrectf = new rectf((float) (length * 0.1), (float) (length * 0.1),
    (float) (length * 0.9), (float) (length * 0.9));
  canvas.drawcircle(mcirclexy, mcirclexy, mradius, mcirclepaint);
  // 画弧线
  canvas.drawarc(mrectf, 270, 360, false, mpaint);

  canvas.drawarc(mrectf, 270, msweepvalue, false, marcpaint);

  // 绘制文字
  float textwidth = mtextpaint.measuretext(mshowtext); //测量字体宽度，我们需要根据字体的宽度设置在圆环中间

  canvas.drawtext(mshowtext, (int)(length/2-textwidth/2), (int)(length/2+textwidth/2) , mtextpaint);

 }

 public void setprogress(float msweepvalue) {
  float a = (float) msweepvalue;
  if (a != 0) {
   this.msweepvalue = (float) (360.0 * (a / 100.0));
   mshowtext = msweepvalue + "%";
   log.e("this.msweepvalue:", this.msweepvalue + "");
  } else {
   this.msweepvalue = 25;
   mshowtext = 25 + "%";
  }

  invalidate();
 }

}

谢谢阅读，学习重在坚持，贵在坚持。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。