Android-based pedometer (pedometer) (iii)--circlebar (circular progress bar)

Pedometer (pedometer) the entire project source code, interested friends can download to see (remember to help younger brother on GitHub to play a Star ~)

Https://github.com/296777513/pedometer

This article is about the demo download here (0 download):

http://download.csdn.net/detail/a296777513/8328461

Give me a couple of cards first:

As shown, clicking in the middle of the circle will show 3 different pages (information) in turn, and the circular progress bar is dynamically added, the effect is still possible. Then give the source code, for everyone to reference

Circlebar's main code

Package Com.example.histogram.widet;import Android.annotation.suppresslint;import Android.content.context;import Android.graphics.canvas;import Android.graphics.color;import Android.graphics.paint;import Android.graphics.Rect; Import Android.graphics.rectf;import Android.graphics.paint.align;import Android.graphics.paint.style;import Android.util.attributeset;import Android.view.view;import Android.view.animation.animation;import android.view.animation.transformation;/** * This is a class that inherits the view of a re-drawing circle Author:liyachao email:[email protected] Date:2015-1-5 * Time: PM 2:39 */public Class Circlebar extends View {private RECTF mcolorwheelrectangle = new RECTF ();//Circle Circle Rectangle Range Private Paint mdefaultwheelpaint;//draw bottom gray circle brush private paint mcolorwheelpaint;//draw blue sector brush private paint textpaint;//The brush of the middle text private paint textpaint1;//The brush of the upper and lower text private float mcolorwheelradius;//Circle Normal state radius private float circlestrokewidth;//the line thickness of the circle private float pressextrastrokewidth;//The increased Circle line in the pressed state increases the thickness of the private int mtext;//IntermediateWord content private int mcount;//The variable added to achieve the number increase, he and mtext actually represent a variable that the private float mprogressani;//added in order to achieve the blue fan effect. He and mprogress actually represent a meaning private float mprogress;//sector radian private int mtextsize;//intermediate text size private int mtextsize1;// The distance between the upper and lower text size private int mdistance;//baranimation anim;//animation class private int mtype;//The page that should be displayed according to the value passed in the public Circlebar ( Context context) {super (context); init ();} Public Circlebar (context context, AttributeSet Attrs) {Super (context, attrs); init ();} Public Circlebar (context context, AttributeSet attrs, int defstyle) {Super (context, attrs, defstyle); init ();} private void Init () {circlestrokewidth = dip2px (GetContext (), 20);//The line thickness of the circle Pressextrastrokewidth = dip2px (GetContext () , 2)///increase the thickness of the Circle line by pressing the state mtextsize = dip2px (GetContext (), 80);//Intermediate text Size mTextSize1 = dip2px (GetContext (), 30);// The upper and lower text size mdistance = dip2px (GetContext (), 70),//The distance between the text//Draw the blue sector of the brush mcolorwheelpaint = new Paint (); Mcolorwheelpaint.setantialias (TRUE);//antialiasing Mcolorwheelpaint.setcolor (0XFF29A6F6);//Set Color Mcolorwheelpaint.setstylE (Paint.Style.STROKE);//Set Hollow Mcolorwheelpaint.setstrokewidth (circlestrokewidth);//Set circle thickness// Draws the brush of the bottom gray circle Mdefaultwheelpaint = new Paint (); Mdefaultwheelpaint.setantialias (true); Mdefaultwheelpaint.setcolor ( Color.parsecolor ("#d9d6c3")); Mdefaultwheelpaint.setstyle (Paint.Style.STROKE); mdefaultwheelpaint.setstrokewidth (circlestrokewidth);//The Brush textpaint = new Paint (paint.linear_text_flag) for intermediate text; Textpaint.setantialias (true); Textpaint.setcolor (Color.parsecolor ("#6DCAEC")); Textpaint.setstyle (Style.fill_and_stroke); Textpaint.settextalign (Align.left); textpaint.settextsize (mtextsize);//The brush of the upper and lower text textPaint1 = new Paint (paint.linear_ Text_flag); Textpaint1.setantialias (true); Textpaint1.setcolor (Color.parsecolor ("#a1a3a6")); Textpaint1.setstyle ( Style.fill_and_stroke); textpaint1.settextalign (Align.left); textpaint1.settextsize (mTextSize1);//Intermediate text content Mtext = 0 ;//Sector radian mprogress = 0;//Animation class Anim = new Baranimation (); anim.setduration (1000);} @SuppressLint ("drawallocation") @Overrideprotected void OnDraw (canvas canvas) {iNT Halfheight = getheight ()/2;int Halfwidth = getwidth ()/2;int radius = halfheight < Halfwidth? halfheight:halfwidth;//Circle's rectangular range draws a brush canvas.drawcircle the bottom gray circle (Halfwidth, Halfheight, Radius-20f,mdefaultwheelpaint) ;//Canvas.drawarc (Mcolorwheelrectangle, -90, false,//mdefaultwheelpaint);//variable added to achieve the blue sector increase effect, He and Msweepangle actually represent a meaning//mcolorwheelrectangle is to draw a blue fan of the brush mcolorwheelrectangle.top = Halfheight-radius + 20f; Mcolorwheelrectangle.bottom = halfheight + radius-20f;mcolorwheelrectangle.left = Halfwidth-radius + 20f;mColorWheelRe Ctangle.right = Halfwidth + radius-20f;//by Mprogressani (angle) sector Canvas.drawarc (Mcolorwheelrectangle, -90, MProgressAni , False,mcolorwheelpaint); Rect bounds = new rect (); String middletext = null;//middle text string uptext = null;//above literal string downtext = null;//Bottom text if (This.mtype = = 1) {//First page U Ptext = "Number of steps";d Owntext = "target: 10000"; middletext = string.valueof (MCount);} else if (This.mtype = = 2) {//second page Uptext = "Calories";d Owntext = "target: 10000"; middletext = String.valueof (MCount);} else if (This.mtype = = 3) {//third page Uptext = "Fill in according to your needs";d Owntext = "3"; middletext = "Weather";} Middle Text Brush textpaint.gettextbounds (middletext, 0, Middletext.length (), bounds);//DrawText the meaning of each attribute (text, x-coordinate, y-coordinate, brush) Canvas.drawtext (Middletext, (Mcolorwheelrectangle.centerx ())-(Textpaint.measuretext (Middletext)/2), Mcolorwheelrectangle.centery () + bounds.height ()/2, Textpaint) textpaint1.gettextbounds (uptext, 0, UpText.length (), bounds); Canvas.drawtext (Uptext, (Mcolorwheelrectangle.centerx ())-(Textpaint1.measuretext (Uptext)/2), Mcolorwheelrectangle.centery () + bounds.height ()/2-mdistance, textPaint1); Textpaint1.gettextbounds (DownText, 0, Downtext.length (), bounds); Canvas.drawtext (Downtext, (Mcolorwheelrectangle.centerx ())-(Textpaint1.measuretext ( Downtext)/2), Mcolorwheelrectangle.centery () + bounds.height ()/mdistance, textPaint1);} Measure the size of the parent layout protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {int height = getdefaultsize ( GetsuggestedminimumhEight (), heightmeasurespec); int width = getdefaultsize (Getsuggestedminimumwidth (), widthmeasurespec); int min = Math.min (width, height); setmeasureddimension (min, min); Mcolorwheelradius = Min-circlestrokewidth- pressextrastrokewidth;//The parameter of the Set method means: Left,top,right,bottommcolorwheelrectangle.set (circlestrokewidth + Pressextrastrokewidth,circlestrokewidth + pressextrastrokewidth, Mcolorwheelradius,mcolorwheelradius);} An external interface that is used to open the animation public void Startcustomanimation () {this.startanimation (anim);} The median value of public void SetText (int text) {MText = Text;this.postinvalidate ();//You can update the view's method call with a child thread. }//sets the progress of the circle and the circle shows the number of pages public void setprogress (float progress, int mtype) {mprogress = Progress;this.mtype = MTYPE;THIS.P Ostinvalidate ();//You can update the view's method call with a child thread. }/** * Inherit Animation an animated class * * @author Liyachao * */public class Baranimation extends Animation {/** * initializes expand C Ollapse animation, has both types, collapse (1) * and expand (0).   * * @param view * The view to animate * @param type *         The type of animation:0 would expand from gone and 0 size * to visible and layout size defined in XML. 1 'll collapse * View and set to Gone */@Overrideprotected void applytransformation (float interpolatedtime,tr Ansformation t) {super.applytransformation (interpolatedtime, T); if (Interpolatedtime < 1.0f) {Mprogressani = Interpolatedtime * mprogress;mcount = (int) (Interpolatedtime * mText);} else {Mprogressani = Mprogress;mcount = MText;} Postinvalidate ();}} public static int dip2px (context context, float Dipvalue) {final float scale = context.getresources (). Getdisplaymetrics () . Density;return (int) (Dipvalue * scale + 0.5f);}}

Fragmentpedometer 's The code is as follows

Package Com.example.histogram;import Com.example.changepage1.r;import Com.example.histogram.widet.CircleBar; Import Android.os.bundle;import Android.os.handler;import Android.os.message;import Android.support.v4.app.fragment;import Android.view.layoutinflater;import Android.view.view;import Android.view.viewgroup;import android.view.view.onclicklistener;/** * This is the fragment of the step * Author: Li Wu Super email:[email  Protected] * date:2015-1-2 * Time: PM 2:39 */public class Fragmentpedometer extends Fragment{private View view;private Cir Clebar circlebar;private int type = 1;//page type//needs to be modified in Handler uiprivate Handler Handler = new Handler () {public void Handleme Ssage (Android.os.Message msg) {if (type = = 1) {circlebar.setprogress (1); Circlebar.settext (1000); Circlebar.startcustomanimation ();} else if (type = = 2) {circlebar.setprogress (2); circlebar.settext; Circlebar.startcustomanimation ();} else if ( Type = = 3) {circlebar.setprogress (3); Circlebar.startcustomanimation ();}};}; @Overridepublic ViEW Oncreateview (layoutinflater inflater, ViewGroup container,bundle savedinstancestate) {view = Inflater.inflate ( R.layout.pedometer, container, false) Circlebar = (Circlebar) View.findviewbyid (r.id.circle); Circlebar.setprogress ( 1); Circlebar.settext (+); circlebar.startcustomanimation ();//Start animation Circlebar.setonclicklistener (new Onclicklistener () {public void OnClick (view view) {if (type = = 1) {type = 2;} else if (type = = 2) {type = 3;} else if (Typ E = = 3) {type = 1;} Message msg = new Message (); Handler.sendmessage (msg);}}); return view;}}

Android-based pedometer (pedometer) (iii)--circlebar (circular progress bar)