Android Custom View Arc Progress control _android

This is an arc based on the progress control, mainly includes two arcs, a circle, a text.

When we click on the Start button, there will be an animation, the gradual emergence of progress, OK, the following start our code.

Create a new class, inherit from view, implement three construction methods, then define variables and initialize data for variables. The code is as follows:

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, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr);
 Initview ();
  Public Mviewone (context, AttributeSet attrs) {Super (context, attrs);
 Initview ();
  Public Mviewone {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);
 }

As you can see, there are four brushes, two arcs, one text, and one drawing circle.

In our Onsizechange method, we assign a value to the variable.

 @Override
 protected void onsizechanged (int w, int h, int oldw, int oldh) {
  super.onsizechanged (W, H, OLDW, OLDH); C3/>length = W;
  Mcirclexy = LENGTH/2;
  Mradius = (float) (length * 0.5/2);

 }

At this time, the radius of the circle, the starting point of the circle, are already a value.

Start drawing below

@Override
 protected void OnDraw (Canvas Canvas) {
  super.ondraw (Canvas);
  Draw Circle
  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);
  Draw arcs
  Canvas.drawarc (MRECTF, 270, 360, false, mpaint);

  Canvas.drawarc (MRECTF, 270, Msweepvalue, False, marcpaint);

  Draw Text
  Float textWidth = Mtextpaint.measuretext (Mshowtext);//measure font width, we need to set the width of the font to the center of the Ring

  Canvas.drawtext ( Mshowtext, (int) (LENGTH/2-TEXTWIDTH/2), (int) (LENGTH/2+TEXTWIDTH/2), mtextpaint);

 

This time, the full effect has come out, but this is still static, exposing a method, so that the data can be dynamically refreshed

 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 =;
   Mshowtext = + "%";
  }

  Invalidate ();
 }

Okay, all the code is here, the old rules, and finally I put all the code on it:

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, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr);
 Initview ();
  Public Mviewone (context, AttributeSet attrs) {Super (context, attrs);
 Initview ();
  Public Mviewone {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); Draw Circle 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);

  Draw Arcs Canvas.drawarc (MRECTF, 270, 360, false, Mpaint);

  Canvas.drawarc (MRECTF, 270, Msweepvalue, False, Marcpaint); Draw text Float textWidth = Mtextpaint.measuretext (Mshowtext); To measure the font width, we need to set the Canvas.drawtext (Mshowtext, (int) (LENGTH/2-TEXTWIDTH/2), (int) (LENGTH/2+TEXTWIDTH/2) According to the width of the font.

 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 ();

 }

}

Thank you for reading, learning to insist on, you insist on.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.