Android Custom circular progress bar for dynamic circle effect

The Custom circular progress bar is as follows: application scenarios such as dynamic display of fractions.

The custom properties of the view are as follows Attr.xml

<?xml version= "1.0" encoding= "UTF-8"?><resources> <declare-styleable      name= "Arcprogressbar" > <!--ring Start angle--<attr name= "startangle" format= "integer"/> <attr name= "radius" format= "intege  R "/> <!--ring width default 115--> <attr name=" trokewidth "format=" integer "/> <!--progress bar Progress Color --<attr name= "Arccolor" format= "Color"/> </declare-styleable></resources>

The view code is as follows:

Package Com.gdmob.ui;import Android.content.context;import Android.content.res.resources;import Android.content.res.typedarray;import Android.graphics.canvas;import Android.graphics.color;import Android.graphics.paint;import Android.graphics.paint.cap;import Android.graphics.rectf;import Android.util.attributeset;import Android.util.displaymetrics;import Android.util.log;import Android.util.typedvalue;import android.view.view;import com.cwits.cex.picc.r;/** * Custom Circular progress bar * @author Hai * */public Class Arcprogressbar extends View {/** * ring radius */private int mradius =;//diameter English is diameter, this constant represents the DP value of the small circle diameter/** the width of the ring */pri vate int mtrokewidth = 15;/** * Start angle */private int mstartangle = 135;/** * progress bar Progress Color */private int marccolor;private Paint m Paint;private int mprogress;//represents progress private RECTF mrect;private int mdiameter; Diameter English is the diameter, in which to draw a circle, the ring is determined by two circles (large circle and Small circle), which represents the small circle diameter. private int mwidth;//This value represents twice times the width of the ring (large circle diameter-small circle diameter) private final int defaultcolor; Progress bar Background Color public arcprogressbar (context conText, AttributeSet attrs, int defstyle) {Super (context, Attrs, defstyle);d efaultcolor = color.transparent; TypedArray ta = Context.gettheme (). Obtainstyledattributes (Attrs, R.styleable.arcprogressbar, Defstyle, 0); int num = Ta.getindexcount (); for (int i = 0, i < num; i++) {int attr = Ta.getindex (i); switch (attr) {case r.styleable.arcprogress Bar_startangle:mstartangle = Ta.getint (attr, 135); Break;case R.styleable.arcprogressbar_arccolor:marccolor = Ta.getcolor (attr, Color.parsecolor ("#eed306")); Break;case r.styleable.arcprogressbar_trokewidth:mtrokewidth = Ta.getint (attr), break;case R.styleable.arcprogressbar_radius:mradius = Ta.getint (attr,); Init ();} Public Arcprogressbar (context context, AttributeSet Attrs) {This (context, attrs, 0);} Public Arcprogressbar (Context context) {This (context, null);} private void Init () {Resources res = getresources ();//Getdisplaymetrics () returns the currently displayed metrics. Displaymetrics metrics = Res.getdisplaymetrics ();//typedvalue.applydimension (int unit, FLOat value, displaymetrics//metrics)//The unit in this method represents the units to be converted, value represents a numeric value, metrics represents the current measure//diameter is a constant 0x1e, the decimal is 30, The following statement indicates that the value of TMP is 30DP converted to a pixel value of float tmp = typedvalue.applydimension (Typedvalue.complex_unit_dip, Mradius, metrics);// The Ceil function indicates rounding up mdiameter = (int) Math.ceil (TMP); tmp = Typedvalue.applydimension (Typedvalue.complex_unit_dip, Mtrokewidth, metrics); mwidth = (int) Math.ceil (TMP); Paint p = new paint ();p. SetStyle (Paint.Style.STROKE);p. Setantialias (TRUE);//Setstrokewidth () Set brush width// P.setstrokewidth (0.5f*mwidth+0.5f*mdiameter);p. Setstrokewidth (0.4F * mwidth);p. Setstrokecap (Cap.round); P.setcolor (defaultcolor); mpaint = P;float righttop = (float) (mwidth/2.0);//This value is the ring width (large circle radius-Small Circle radius) Mrect = new RECTF (right Top, Righttop, Mdiameter + righttop, Mdiameter + righttop); mprogress = 0;} Protected Boolean clear = False, @Overrideprotected void OnDraw (canvas canvas) {//Super.ondraw (canvas);//If mprogress <360, the circular progress bar has not yet been rotated, then a complete circle is drawn with the 0x7f transparency as the background of the progress bar//Note to draw the background bar before drawing the progress bar, because the drawing will overwrite the previous draw */* if (mprogress<) {Paint.setalpha (0x7f); * Paint.setcolor (DefaultColor); Canvas.drawarc (Mrect, 135, +, FALSE, * paint);} */if (Clear) {Mpaint.setcolor (color.transparent); clear = False;return;} if (mprogress! = 0) {Paint paint = mpaint;paint.setcolor (marccolor); float degree = (float) (360.0f * mprogress/360);p Ain T.setalpha (0xff);p Aint.setcolor (Marccolor) Canvas.drawarc (Mrect, Mstartangle, degree, false, paint);}} @Overrideprotected final void onmeasure (int widthmeasurespec, int heightmeasurespec) {//Mdiameter denotes small circle diameter, Mwidth represents twice times the width of the ring, so MEAs represents a large circle diameter//So the view hight,width is measfinal int meas = mdiameter + mwidth;setmeasureddimension (MEAs, MEAs);} public void setprogress (int p) {mprogress = P;invalidate ();} public void postprogress (final int p) {post (new Runnable () {@Overridepublic void run () {setprogress (P);}});} public void Setmarccolor (int marccolor) {this.marccolor = Marccolor;} public void Reset () {clear = True;invalidate (); mprogress = 0;}}

To let the score and progress bar dynamic from 0 to 90, the idea: Define a variable mprogress=0,new a timed task, let mprogress slowly from 0 to the end,

Arcprogressbar constantly calls setprogress (int p).

The code is as follows:

private void Setgrade (final int g) {mprogress = 1;arcprogressbar.reset (); final Handler Handler = new Handler () {@Overridep ublic void Handlemessage (Message msg) {if (0 < (mprogress/3.6) && (mprogress/3.6) <=) {Arcprogressbar . Setmarccolor (Color.parsecolor ("#ff0000")); Tv_grade.settextcolor (Color.parsecolor ("#ff0000"));} else if (< (mprogress/3.6) && (mprogress/3.6) <=) {Arcprogressbar.setmarccolor (Color.parsecolor ("# f39700 ")); Tv_grade.settextcolor (Color.parsecolor (" #f39700 "));} else if (< (mprogress/3.6) && (mprogress/3.6) <=) {Arcprogressbar.setmarccolor (Color.parsecolor (" #42ae7c ")); Tv_grade.settextcolor (Color.parsecolor (" #42ae7c "));} if (msg.what = = 0x1223) {arcprogressbar.setprogress (mprogress * (1)); Tv_grade.settext ("" + (int) (mprogress/3.6));} else if (msg.what = = 0x1224) {Tv_grade.settext ("" + g);}}}; New Timer (). Schedule (new TimerTask () {@Overridepublic void run () {message msg = new Message (); if (Mprogress <(int) (((float) 360/100) * g)) {msg.what = 0x1223;mprogress++;} else {msg.what = 0x1224;this.cancel ();} Handler.sendmessage (msg);}}, 0, 5);}

Android Custom circular progress bar for dynamic circle effect