Android implements custom circular progress bars function _android

Android implements custom circular progress bars:

Android Custom View, in most projects according to customer needs and user experience, to write back the control to show the beautiful interface, here on the circular progress bar how to achieve.

Draw a custom circular progress bar, divided into three steps, inner circle, outer Circle, text.

The inner circle and the text are better drawn, the progress bar changes are controlled by the outer circle, so the core is to draw the outer circle.

First define the three brushes, two paint and one textpaint respectively.

Mcirclepaint = new Paint ();
Mcirclepaint.setantialias (true);
Mcirclepaint.setstrokewidth (circle_line_width);
Mcirclepaint.setstyle (Paint.Style.STROKE);
Mcirclepaint.setcolor (Contextcompat.getcolor (context, R.color.circle_color));

Mcircleinnerpaint = new Paint ();
Mcircleinnerpaint.setantialias (true);
Mcircleinnerpaint.setstyle (Paint.Style.FILL);
Mcircleinnerpaint.setcolor (Contextcompat.getcolor (context, R.color.circle_inner_color));

Mtextpaint = new Textpaint ();
Mtextpaint.setantialias (true);
Mtextpaint.setstyle (Paint.Style.FILL);
Mtextpaint.settypeface (typeface.default_bold);
Mtextpaint.setcolor (Contextcompat.getcolor (context, R.color.circle_text_color));
Mtextpaint.settextsize (text_size);

And then let's draw the three parts separately to get the width and height of the custom view

float Halfwidth = Getmeasuredwidth ()/2;
float halfheight = Getmeasuredheight ()/2;

Draw an outer circle

Canvas.drawcircle (Halfwidth, Halfheight, Circle_radius,mcirclepaint);

Draw Inner Circle

Canvas.drawcircle (Halfwidth, halfheight,circle_radius-circle_line_width/2,mcircleinnerpaint);

Draw text

Canvas.drawtext (Mprogresstext,halfwidth-mtextpaint.measuretext (mprogresstext)/2,halfheight-(MTextPaint.ascent ( ) + mtextpaint.descent ())/2,mtextpaint);

The final effect of the following figure

Finished drawing the basic pattern, the next step is to achieve the animation effect of the progress bar

Progress bar is real-time change, so you need to constantly update the progress, the progress can be drawn with the arc

How to set Progress

public void setprogress (float progress) {
 if (Progress >) {
  progress = n.
 }
 if (Progress < 0) {
  progress = 0;
 }
 Mprogress = progress;
 Mprogresstext = "Pause";
 Mstartprogress = true;
 Postinvalidate ();
}

To update a progress bar after a thread has simulated a network request in an activity

No 30 milliseconds to update the data, when the progress is over 100, stop the Refresh interface

private void Startprogress () {
 new Thread () {
 @Override public
 void Run () {
  super.run ();
  float currentprogress = mcustomview.getcurrentprogress ();
  ++currentprogress;
  Mcustomview.setprogress (currentprogress);
  try {sleep
   ();
   if (currentprogress <=) {
    startprogress ();
   } else {
    mcustomview.progressfinished ();
  }} catch (Interruptedexception e) {
    e.printstacktrace ();}}}
 . Start ();
}

The core part of the progress update after the draw circular progress bar

float Halfwidth = Getmeasuredwidth ()/2;
float halfheight = Getmeasuredheight ()/2;
if (null = = MCIRCLERECTF) {
  MCIRCLERECTF = new RECTF (Halfwidth-circle_radius, Halfheight-circle_radius,      halfWi DTH + Circle_radius, halfheight + Circle_radius);
}
if (mstartprogress) {
  float swipeprogress = mprogress/100f * 360;
  LOGUTILS.E ("swipeprogress =" + swipeprogress);
  Canvas.drawarc (MCIRCLERECTF, -90, Swipeprogress, True, mcirclepaint);
else {
  canvas.drawcircle (Halfwidth, Halfheight, circle_radius,mcirclepaint);
}

The idea of drawing is to convert the progress progress to arc, and then constantly draw out, here to note, starting from-90, that is, the clock 0 point time to start drawing. If the progress has been drawn or has not yet started, draw a circle directly.

This is probably the idea, the last two pictures

If there is any better way to achieve ideas, you can discuss learning together.

Thank you for reading, I hope to help you, thank you for your support for this site!