Android Imitation Millet Safety Center inspection progress bar Effect _android

Imitation Millet Safety Center detection effect

Cut the crap, let's go ahead. Effect Chart:

GitHub Address: Https://github.com/niniloveyou/GradeProgressView

This effect of the use of the scene is not much, mainly a variety of testing time, such as Garbage clean-up, mobile phone security detection, of course, if you do not want to avoid this effect is ugly, can also be used as a progress bar. Ha ha.

Here are some dry-goods analysis of how this effect can be achieved:

Get this effect first think about what are the main technical difficulties:

1. Progress bar

2. How does the middle pointer get

1. Progress bar

Did someone say that the progress bar was not easy? Write it like this:

Mpaint.setpatheffect (New Dashpatheffect (New Float[]{dashwith, dashspace}, ...) ));


Canvas.drawarc (MRECTF, 135, 270, false, mpaint);
Mpaint.setcolor (color.white);
Canvas.drawarc (MRECTF, 135, degree, false, mpaint);

Set up a Patheffect
Then draw an arc, set the color of the brush and then according to the progress, calculate the angle, and then draw an arc, covering the first arc of the part of the line. Nonsense so much.
But what I want to say is too young too. At that time I also think so, so realize it! Do the first draw a 50% (that is, the second arc covering the first half of the arc) try, good ah perfect seems to be like this, and then a 30% try the NI is not right ah, how small lattice does not coincide, a bit misplaced ah. Mdzz

Later thought a simple point of approach, do not cover, draw two arcs, but the two arcs are docked. For example, the first arc, draw half, the second draw half.

Draw Background Arc
Canvas.drawarc (MRECTF, 135 + degree, 270-degree, false, mpaint);

Draw Progress Arc
Canvas.drawarc (MRECTF, 135, degree, false, mprogresspaint);

2. How does the middle pointer get

First draw the path of the pointer

Mpointerpath = new Path ();
Mpointerpath.moveto (CenterX + Pointradius, centerY-7);
Mpointerpath.lineto (CenterX + Pointradius, centery + 7);
Mpointerpath.lineto (mrectf.right-pointgap-linewidth/2,centery);
Mpointerpath.lineto (CenterX + Pointradius, centerY-7);
Mpointerpath.close ();

Draw a small circle in the center
Then draw the pointer so that when the canvas rotates, the pointer naturally rotates and does not know what to look for Canvas.save (), Canvas.restore ().

 Draw Pointer
canvas.drawcircle (CenterX, CenterY, pointradius,minnercirclepaint);
Canvas.save ();
Canvas.rotate (135 + degree, CenterX, centery);
Canvas.drawpath (Mpointerpath, mpointerpaint);
Canvas.restore ();

The complete code below:

Package Deadline.grade;
Import Android.animation.ValueAnimator;
Import Android.annotation.TargetApi;
Import Android.content.Context;
Import Android.graphics.Canvas;
Import Android.graphics.Color;
Import Android.graphics.DashPathEffect;
Import Android.graphics.Paint;
Import Android.graphics.Path;
Import Android.graphics.RectF;
Import Android.os.Build;
Import Android.support.annotation.IntRange;
Import Android.util.AttributeSet;
Import Android.util.Log;
Import Android.view.View;

Import Android.view.animation.AccelerateDecelerateInterpolator; /** * @author deadline * @time 2016/9/24/public class Gradeprogressview extends View {private static final Strin

 G TAG = GradeProgressView.class.getSimpleName ();
 private static final int default_progress_color = Color.White;

 private static final int default_background_color = 0X5AFFFFFF;
 private int mbackgroundcolor = Default_background_color;

 private int mprogresscolor = Default_progress_color; Progress bar of each line of width, spacing, length private int dashwith = 4;
 private int dashspace = 6;

 private int linewidth = 60;
 The width of the outermost line and the spacing with the progress bar private int outlinewidth = 5;

 private int gapwidth = 25;
 The line width of the pointer, the radius, and the spacing of the pointer to the progress bar private int pointlinewidth = 10;
 private int pointradius = 25;

 private int pointgap = 20;

 private int mprogress = 0;
 Outside the private RECTF MOUTERRECTF;

 Private Paint Mouterpaint;
 Progress bar Private RECTF MRECTF;
 Private Paint Mpaint;

 Private Paint Mprogresspaint;
 pointer private Paint minnercirclepaint;
 Private Paint Mpointerpaint;

 Private Path Mpointerpath;
 private float CenterX;

 private float centery;

 Private Valueanimator animator;

 Private Onprogresschangelistener Mlistener;
 Public Gradeprogressview {This (context, NULL);
 Public Gradeprogressview (context, AttributeSet attrs) {This (context, attrs, 0); Gradeprogressview (context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr)
 ;
 Setup (); } @TargetApi (Build.version_codes. Lollipop) public Gradeprogressview (context, AttributeSet attrs, int defstyleattr, int defstyleres) {Super (conte
 XT, Attrs, Defstyleattr, defstyleres);
 private void Setup () {MRECTF = new RECTF ();

 MOUTERRECTF = new RECTF ();
 Mouterpaint = new Paint (Paint.anti_alias_flag);
 Mouterpaint.setstrokewidth (Outlinewidth);
 Mouterpaint.setcolor (Mbackgroundcolor);

 Mouterpaint.setstyle (Paint.Style.STROKE);
 Mpaint = new Paint (Paint.anti_alias_flag);
 Mpaint.setstrokewidth (linewidth);
 Mpaint.setcolor (Mbackgroundcolor);
 Mpaint.setstyle (Paint.Style.STROKE);

 Mpaint.setpatheffect (New Dashpatheffect (New Float[]{dashwith, dashspace}, Dashspace));
 Mprogresspaint = new Paint (Paint.anti_alias_flag);
 Mprogresspaint.setstrokewidth (linewidth);
 Mprogresspaint.setcolor (Mprogresscolor);
 Mprogresspaint.setstyle (Paint.Style.STROKE);

 Mprogresspaint.setpatheffect (New Dashpatheffect (New Float[]{dashwith, dashspace}, Dashspace));
Mpointerpaint = new Paint (Paint.anti_alias_flag); Mpointerpaint.setstrokewidth (POINTLINEWIDTH/2);
 Mpointerpaint.setcolor (Mprogresscolor);
 Mpointerpaint.setstyle (Paint.Style.FILL_AND_STROKE);
 Mpointerpaint.setstrokecap (Paint.Cap.ROUND);

 Mpointerpaint.setshadowlayer (4, 3, 0, 0x20000000);
 Minnercirclepaint = new Paint (Paint.anti_alias_flag);
 Minnercirclepaint.setstrokewidth (Pointlinewidth);
 Minnercirclepaint.setcolor (Mprogresscolor);
 Minnercirclepaint.setstyle (Paint.Style.STROKE);
 Minnercirclepaint.setshadowlayer (4, 3, 0, 0x20000000);

 @Override protected void onsizechanged (int w, int h, int oldw, int oldh) {super.onsizechanged (W, H, OLDW, OLDH);
 int value = OUTLINEWIDTH/2;

 Mouterrectf.set (value, value, W-value, H-value);

 int gap = LINEWIDTH/2 + outlinewidth + gapwidth;

 Mrectf.set (Mouterrectf.left + gap, Mouterrectf.top + Gap, Mouterrectf.right-gap, mouterrectf.bottom-gap);
 CenterX = Mrectf.centerx ();

 CenterY = Mrectf.centery ();
 Mpointerpath = new Path (); Mpointerpath.moveto (CenterX + POintradius, centerY-7);
 Mpointerpath.lineto (CenterX + Pointradius, centery + 7);
 Mpointerpath.lineto (MRECTF.RIGHT-POINTGAP-LINEWIDTH/2, centery);
 Mpointerpath.lineto (CenterX + Pointradius, centerY-7);
 Mpointerpath.close ();

 } @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas);

 float degree = 2.7f * mprogress;

 Draw out Arc Canvas.drawarc (MOUTERRECTF, 135, 270, false, Mouterpaint);

 Draw Background Arc Canvas.drawarc (MRECTF, 135 + degree, 270-degree, false, Mpaint);


 Draw Progress Arc Canvas.drawarc (MRECTF, 135, degree, false, mprogresspaint);

 Draw Pointer Canvas.drawcircle (CenterX, CenterY, Pointradius, Minnercirclepaint);
 Canvas.save ();
 Canvas.rotate (135 + degree, CenterX, centery);
 Canvas.drawpath (Mpointerpath, mpointerpaint);
 Canvas.restore ();  @Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {super.onmeasure (Widthmeasurespec,

 HEIGHTMEASURESPEC); int measurewidth = measurespec.geTsize (WIDTHMEASURESPEC);
 int measureheight = measurespec.getsize (Heightmeasurespec);
 Setmeasureddimension (Math.min (Measureheight, Measurewidth), Math.min (Measureheight, measurewidth));
 public void Setonprogresschangelistener (Onprogresschangelistener listener) {This.mlistener = listener;
 public int Getprogresscolor () {return mprogresscolor;
 The public void Setprogresscolor (int progresscolor) {this.mprogresscolor = Progresscolor;
 if (mprogresspaint!= null) {Mprogresspaint.setcolor (mprogresscolor);
 } if (Mpointerpaint!= null) {Mpointerpaint.setcolor (mprogresscolor);
 } if (Minnercirclepaint!= null) {Minnercirclepaint.setcolor (mprogresscolor);
 } postinvalidate ();
 public int Getbackgroundcolor () {return mbackgroundcolor;
 The public void SetBackgroundColor (int backgroundcolor) {this.mbackgroundcolor = BackgroundColor;
 if (mpaint!= null) {Mpaint.setcolor (mbackgroundcolor);
 } if (Mouterpaint!= null) {Mouterpaint.setcolor (mbackgroundcolor);
} Postinvalidate ();
 public int getlinewidth () {return linewidth;
 The public void setlinewidth (int linewidth) {this.linewidth = linewidth;
 if (mpaint!= null) {mpaint.setstrokewidth (linewidth);
 } if (Mprogresspaint!= null) {mprogresspaint.setstrokewidth (linewidth);
 } postinvalidate ();
 public int getoutlinewidth () {return outlinewidth;
 The public void setoutlinewidth (int outlinewidth) {this.outlinewidth = Outlinewidth;
 if (mouterpaint!= null) {mouterpaint.setstrokewidth (outlinewidth);
 } postinvalidate ();
 public int getgapwidth () {return gapwidth;
 The public void setgapwidth (int gapwidth) {this.gapwidth = Gapwidth;
 public int getprogress () {return mprogress;
 The public void Setprogress (The @IntRange (from = 0, to =) int progress) {if (Progress > MB) {progress = 100;
 } if (Progress < 0) {progress = 0;
 } this.mprogress = progress;
 if (Mlistener!= null) {mlistener.onprogresschanged (gradeprogressview.this, mprogress); } POStinvalidate ();  The public void Setprogresswidthanimation (@IntRange (from = 0, to = m) int progress) {if (Progress >) {progress
 = 100;
 } if (Progress < 0) {progress = 0;
  } if (animator!= null && animator.isrunning ()) {animator.cancel ();
 animator = null;
 } animator = Valueanimator.ofint (mprogress, progress);
 int duration = ten * Math.Abs (progress-mprogress);

 Animator.setduration (duration);
 Animator.setinterpolator (New Acceleratedecelerateinterpolator ()); Animator.addupdatelistener (New Valueanimator.animatorupdatelistener () {@Override public void onanimationupdate (
  Valueanimator valueanimator) {int value = (int) valueanimator.getanimatedvalue ();
   if (mprogress!= value) {mprogress = value;
   if (Mlistener!= null) {mlistener.onprogresschanged (gradeprogressview.this, mprogress);
  } postinvalidate ();
 }
  }
 });

 Animator.start ();

 } @Override protected void Ondetachedfromwindow () {Super.ondetachedfromwindow (); if (animaTor!= null) {animator.cancel ();
 animator = null; } public interface onprogresschangelistener{void onprogresschanged (Gradeprogressview gradeprogressview, int prog
 RESS);

 }
}

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.