Advanced Android player, self-defined circular progress bar

Background Introduction

In Android development, we often encounter a variety of gorgeous controls, so, relying on our Android itself with the control is not enough, many times we need to customize the control, in the process of development. Our company came across a custom-made, self-paced, circular progress bar that looked gorgeous and of course others. For example: The round progress bar of the watermark shape is very nice. Suppose that a friend has realized, hope to share, I also good learning.

Well, not to mention. Next, let's see how we can achieve a circular progress bar.

Original address: http://blog.csdn.net/xiaanming/article/details/10298163

one: first.

Two: Instance code1. Define your own properties

<span style= "FONT-SIZE:14PX;" ><?xml version= "1.0" encoding= "Utf-8"?><resources> <declare-styleable    name= " Roundprogressbar ">        <attr name=" roundcolor "format=" color "/>        <attr name=" Roundprogresscolor " format= "Color"/>        <attr name= "Roundwidth" format= "Dimension" ></attr>        <attr name= " TextColor "format=" color "/>        <attr name=" textSize "format=" Dimension "/>        <attr name=" Max "format= "Integer" ></attr>        <attr name= "Textisdisplayable" format= "boolean" ></attr>        <attr Name= "Style" >            <enum name= "STROKE" value= "0" ></enum>            <enum name= "FILL" value= "1" > </enum>        </attr>    </declare-styleable></resources></span>

PS: Define your own properties. In fact, we may not be very clear, some of the little friends may know that I use this. A value that is capable of invoking it. Can get a value, or give a value. For example: You use the Android system itself with the control, TextView other, you know he has height. Width,textsize,textcolor, and so on, these attributes. You can assign a value. But have to understand how to get the value. If you do not understand, it's okay, I have an article in Hon Yang is more specific. Recommend to you: http://blog.csdn.net/lmj623565791/article/details/45022631, still waiting for what. Poke it in and take you to fly.

2. Define your own controlsSource code 1:

<span style= "FONT-SIZE:14PX;" >package Com.example.testdemo.view;import Android.annotation.suppresslint;import Android.content.Context; Import Android.content.res.typedarray;import Android.graphics.canvas;import Android.graphics.color;import Android.graphics.paint;import Android.graphics.rectf;import Android.graphics.typeface;import Android.util.attributeset;import android.view.view;import com.example.testdemo.r;/** * Fake iphone with progress bar. Thread-safe view that updates progress directly in the threads * * @author Zengtao May 12, 2015 PM 7:43:32 * */@SuppressLint ("Drawallocation") public class Roundpro Gressbar extends View {/** * Brush object reference */private Paint paint;/** * ring color */private int roundcolor;/** * Ring Progress Color */private in T roundprogresscolor;/** * Middle progress percent of the string color */private int textcolor;/** * Middle Progress percentage of the font */private float textsize;/** * ring width Degree */private float roundwidth;/** * Max Progress */private int max;/** * Current Progress */private int progress;/** * Show Intermediate Progress */private bool EAN textisdisplayable;/** * Progress style. Solid or hollow */private int style;public statIC final int STROKE = 0;public static final int FILL = 1;public Roundprogressbar (context context) {This (context, null);} Public Roundprogressbar (context context, AttributeSet Attrs) {This (context, attrs, 0);} Public Roundprogressbar (context context, AttributeSet attrs, int defstyle) {Super (context, Attrs, defstyle);p aint = new Pa int (); TypedArray Mtypedarray = context.obtainstyledattributes (Attrs, R.styleable.roundprogressbar);// Get self-defined properties and default values Roundcolor = Mtypedarray.getcolor (R.styleable.roundprogressbar_roundcolor, Color.rgb (228, 232, 237)); Roundprogresscolor = Mtypedarray.getcolor (R.styleable.roundprogressbar_roundprogresscolor, Color.rgb (216, 6, 7)); TextColor = Mtypedarray.getcolor (R.styleable.roundprogressbar_textcolor, Color.rgb (216, 6, 7)); textSize = Mtypedarray.getdimension (r.styleable.roundprogressbar_textsize); roundwidth = Mtypedarray.getdimension ( R.styleable.roundprogressbar_roundwidth, 3); max = Mtypedarray.getinteger (R.styleable.roundprogressbar_max, 100); Textisdisplayable = Mtypedarray.getboolean (r.styleable.roundprogressbar_textisdisplayable, true); style = Mtypedarray.getint ( R.styleable.roundprogressbar_style, 0); Mtypedarray.recycle ();} @Overrideprotected void OnDraw (canvas canvas) {super.ondraw (canvas);/** * 1. Draw the outermost large ring */int centre = getwidth ()/2;//Get the Circle The x-coordinate of the heart int radius = (int) (CENTRE-ROUNDWIDTH/2); The radius of the ring Paint.setcolor (Roundcolor); Sets the color of the ring Paint.setstyle (Paint.Style.STROKE); Set Hollow Paint.setstrokewidth (Roundwidth); Sets the width of the ring Paint.setantialias (true); Anti-aliasing canvas.drawcircle (centre, centre, RADIUS, paint); Draw the Ring/** * 2. Draw Progress Percentage */paint.setstrokewidth (0);p Aint.setcolor (textcolor);p aint.settextsize (textSize); Paint.settypeface (Typeface.default); Set the font//middle progress percentage, first converted to float for division, otherwise 0int percent = (int) ((float) progress/(FLOAT) max) *, float textWidth = PA Int.measuretext (Percent + "%"); Measured font width, we need to set the width of the font according to the middle of the ring if (textisdisplayable && style = = STROKE) {Canvas.drawtext (percent + "%", centre-te XTWIDTH/2, centre + textsizE/2, paint); Draw a progress percentage}/** * 3. Draw an arc. Draw the progress of the ring *///set the progress is solid or hollow paint.setstrokewidth (roundwidth); Sets the width of the ring Paint.setcolor (Roundprogresscolor); Set the color of the progress RECTF oval = new RECTF (Centre-radius, Centre-radius, centre + RADIUS, centre + radius); Bounds for defining the shape and size of the arc switch (style) {case STROKE: {paint.setstyle (Paint.Style.STROKE); Canvas.drawarc (Oval,-90, 360 * Progress/max, false, paint); Draw Arc break based on progress;}  Case FILL: {paint.setstyle (Paint.Style.FILL_AND_STROKE); if (progress! = 0) Canvas.drawarc (Oval, -90, Progress/max, True, paint); Draw arc break according to progress;}}} public synchronized int Getmax () {return max;} /** * Set the maximum progress value * * @param max */public synchronized void Setmax (int max) {if (Max < 0) {throw new Illegalargumentexcep tion ("Max not less than 0");} This.max = max;} /** * Get progress. Need to sync * * @return */public synchronized int getprogress () {return progress;} /** * Set progress. This is a thread-safe control because it requires a synchronous refresh interface call Postinvalidate () to be able to refresh the * * @param progress */public synchronized void setprogress (int p) in a non-UI thread because of the problem of multi-line Rogress) {if (Progress < 0) {throw new IllegalArgumentException ("Progress not less than 0");} if (Progress > Max) {progress = max;} if (Progress <= max) {this.progress = Progress;postinvalidate ();}} public int Getcriclecolor () {return roundcolor;} public void Setcriclecolor (int criclecolor) {this.roundcolor = Criclecolor;} public int Getcricleprogresscolor () {return roundprogresscolor;} public void Setcricleprogresscolor (int cricleprogresscolor) {this.roundprogresscolor = Cricleprogresscolor;} public int GetTextColor () {return textcolor;} public void SetTextColor (int textcolor) {this.textcolor = TextColor;} public float GetTextSize () {return textSize;} public void Settextsize (float textSize) {this.textsize = textSize;} public float Getroundwidth () {return roundwidth;} public void Setroundwidth (float roundwidth) {this.roundwidth = Roundwidth;} public int GetStyle () {return style;} public void SetStyle (int style) {this.style = style;}} </span>

Source Code 2:

<span style= "FONT-SIZE:14PX;" >package Com.example.testdemo.view;import Android.annotation.suppresslint;import Android.content.Context; Import Android.content.res.typedarray;import Android.graphics.canvas;import Android.graphics.color;import Android.graphics.paint;import Android.graphics.rectf;import Android.graphics.typeface;import Android.util.attributeset;import android.view.view;import com.example.testdemo.r;/** * Fake iphone with progress bar, thread-safe view, Progress can be updated directly in the thread * * @author Zengtao May 12, 2015 PM 7:43:32 * * */@SuppressLint ("Drawallocation") public class RoundProgressBar2 E Xtends View {/** * Brush object reference */private Paint paint;/** * ring color */private int roundcolor;/** * Ring progress color */private int Roundpro gresscolor;/** * Middle Progress percent of the string color */private int textcolor;/** * Middle Progress percentage of the font */private float textsize;/** * Ring width */privat e Float roundwidth;/** * max Progress */private int max;/** * Current Progress */private int progress;/** * Show Intermediate Progress */private Boolean Textis displayable;/** * The style of progress. Solid or hollow */private int style;public STATic Final int STROKE = 0;public static final int FILL = 1;public RoundProgressBar2 (context context) {This (context, null);} Public RoundProgressBar2 (context context, AttributeSet Attrs) {This (context, attrs, 0);} Public RoundProgressBar2 (context context, AttributeSet attrs, int defstyle) {Super (context, Attrs, defstyle);p aint = new P Aint (); TypedArray Mtypedarray = context.obtainstyledattributes (Attrs, R.styleable.roundprogressbar);// Get self-defined properties and default values Roundcolor = Mtypedarray.getcolor (R.styleable.roundprogressbar_roundcolor, Color.rgb (228, 232, 237)); Roundprogresscolor = Mtypedarray.getcolor (R.styleable.roundprogressbar_roundprogresscolor, Color.rgb (216, 6, 7)); TextColor = Mtypedarray.getcolor (R.styleable.roundprogressbar_textcolor, Color.rgb (216, 6, 7)); textSize = Mtypedarray.getdimension (r.styleable.roundprogressbar_textsize); roundwidth = Mtypedarray.getdimension ( R.styleable.roundprogressbar_roundwidth, 3); max = Mtypedarray.getinteger (R.styleable.roundprogressbar_max, 100); TextisdisplayabLe = Mtypedarray.getboolean (r.styleable.roundprogressbar_textisdisplayable, true); style = Mtypedarray.getint ( R.styleable.roundprogressbar_style, 0); Mtypedarray.recycle ();} @Overrideprotected void OnDraw (canvas canvas) {super.ondraw (canvas);/** * Draw the outermost large ring */int centre = getwidth ()/2;//Get Center of x-coordinate int radius = (int) (CENTRE-ROUNDWIDTH/2); The radius of the ring Paint.setcolor (Roundcolor); Sets the color of the ring Paint.setstyle (Paint.Style.STROKE); Set Hollow Paint.setstrokewidth (Roundwidth); Sets the width of the ring Paint.setantialias (true); Anti-aliasing canvas.drawcircle (centre, centre, RADIUS, paint); Draw a Circle/** * Draw Progress Percentage */paint.setstrokewidth (0);p Aint.setcolor (textcolor);p aint.settextsize (textSize); Paint.settypeface (Typeface.default); Set font//int percent = (int) ((float) progress/(FLOAT) max) * 100); The percentage of progress in the middle, first converted to float in the division operation, otherwise all for 0float textWidth = Paint.measuretext ("Rob"); Measure the font width.  We need to set the font width in the middle of the ring if (textisdisplayable && style = = STROKE) {canvas.drawtext ("Rob", CENTRE-TEXTWIDTH/2, centre + TEXTSIZE/2-4, painT); Draw a progress percentage}/** * Draw an arc, draw the progress of the ring *///set the progress is solid or hollow paint.setstrokewidth (roundwidth); Sets the width of the ring Paint.setcolor (Roundprogresscolor); Set the color of the progress RECTF oval = new RECTF (Centre-radius, Centre-radius, centre + RADIUS, centre + radius); Bounds for defining the shape and size of the arc switch (style) {case STROKE: {paint.setstyle (Paint.Style.STROKE); Canvas.drawarc (Oval,-90, 360 * Progress/max, false, paint); Draw Arc break based on progress;}  Case FILL: {paint.setstyle (Paint.Style.FILL_AND_STROKE); if (progress! = 0) Canvas.drawarc (Oval, -90, Progress/max, True, paint); Draw arc break according to progress;}}} public synchronized int Getmax () {return max;} /** * Set the maximum progress value * * @param max */public synchronized void Setmax (int max) {if (Max < 0) {throw new Illegalargumentexcep tion ("Max not less than 0");} This.max = max;} /** * Get progress. Need to sync * * @return */public synchronized int getprogress () {return progress;} /** * Set Progress, this is a thread-safe control because of the problem of multi-line considerations. Need to synchronize Refresh interface call Postinvalidate () can refresh in non-UI thread * * @param progress */public synchronized void setprogress (int progress) {if (ProgRess < 0) {throw new IllegalArgumentException ("Progress not less than 0");} if (Progress > Max) {progress = max;} if (Progress <= max) {this.progress = Progress;postinvalidate ();}} public int Getcriclecolor () {return roundcolor;} public void Setcriclecolor (int criclecolor) {this.roundcolor = Criclecolor;} public int Getcricleprogresscolor () {return roundprogresscolor;} public void Setcricleprogresscolor (int cricleprogresscolor) {this.roundprogresscolor = Cricleprogresscolor;} public int GetTextColor () {return textcolor;} public void SetTextColor (int textcolor) {this.textcolor = TextColor;} public float GetTextSize () {return textSize;} public void Settextsize (float textSize) {this.textsize = textSize;} public float Getroundwidth () {return roundwidth;} public void Setroundwidth (float roundwidth) {this.roundwidth = Roundwidth;}} </span>

PS: Two copies of the above self-defined source code. In fact you look carefully. The difference is not very big, changed a place, the change of place, in fact, in our current project encountered, so, do not send this round control, I think you will use in the future, is worth collecting.

three. Detailed Call

<span style= "FONT-SIZE:14PX;" >package Com.example.testdemo;import Android.annotation.suppresslint;import Android.app.Activity;import Android.graphics.color;import Android.os.bundle;import Android.os.handler;import Android.os.Message;import Android.view.view;import Android.view.view.onclicklistener;import Android.widget.button;import Com.example.testdemo.view.roundprogressbar;import com.example.testdemo.view.roundprogressbar2;/** * Main interface * @author Zengtao June 10, 2015 PM 4:02:13 * */public class Mainactivity extends Activity {private RoundProgressBar2 r3;private Roundpro Gressbar R1, R2, R4, r5;private int pro1 = 80; The progress value that you want to display: as in the project. Data returned from server private int progress = 0;private Boolean flag = false;private MyThread thread1;private MyThread2 Thread2;priva Te Button start; @Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (R.layout.activity_main); Initview (); Setroundattribute (); can be set}/** * Start method */private void Start () {//thread 1thRead1 = new MyThread (); Thread1.start ();//Thread 2thread2 = new MyThread2 (); Thread2.start ();} /** * Initialize control */private void Initview () {r1 = (Roundprogressbar) Findviewbyid (R.ID.PRPGRESS1); r2 = (Roundprogressbar) findVi Ewbyid (R.ID.PRPGRESS2); r3 = (ROUNDPROGRESSBAR2) Findviewbyid (R.ID.PRPGRESS3); r4 = (Roundprogressbar) Findviewbyid ( R.ID.PRPGRESS4); r5 = (Roundprogressbar) Findviewbyid (R.ID.PRPGRESS5); start = (Button) Findviewbyid (R.id.start); Start.setonclicklistener (listener);} /** * Set the properties of the Circle */private Void Setroundattribute () {r1.setroundwidth () R1.settextcolor (Color.parsecolor ("#00ff00")); R1.setcriclecolor (Color.parsecolor ("#ff0000")); R2.setroundwidth R2.settextcolor (Color.parsecolor ("#0000ff") ); R2.setcriclecolor (Color.parsecolor ("#ff00ff")); r4.setroundwidth; R4.settextcolor (Color.parsecolor ("# FF00FF "), R4.setcriclecolor (Color.parsecolor (" #ff0000 ")), R4.setstyle (0); R4.setroundwidth (R4.settextcolor); Color.parsecolor ("#000000")); R4.setcriclecolor (Color.parsecolor ("#ffff00")); R4.setstyle (1);} /** * Click event */onclicklistener listener = new Onclicklistener () {@Overridepublic void OnClick (View v) {if (v = = start) {Star T ();}}};/ * * for updating UI */@SuppressLint ("Handlerleak") private Handler Mhandler = new Handler () {public void Handlemessage (Android.os. Message msg) {final int x = msg.what;final int temp = (int) msg.obj;if (x = = 0 * 1) {if (pro1-temp > 0) {r1.setprogre SS (temp); r2.setprogress (temp); r3.setprogress (temp); r4.setprogress (temp); r5.setprogress (temp);} else {r1.setprogress (Pro1); r2.setprogress (Pro1); r3.setprogress (Pro1); r4.setprogress (Pro1); r5.setprogress (Pro1); Thread1.stopthread ();}} else if (x = = 0 * 2) {if (pro1-temp > 0) {r1.setprogress (temp); r2.setprogress (temp); r3.setprogress (temp); R4.setprogre SS (temp); r5.setprogress (temp);} else {r1.setprogress (Pro1); r2.setprogress (Pro1); r3.setprogress (Pro1); r4.setprogress (Pro1); r5.setprogress (Pro1); Thread2.stopthread ();}}};};/ * * Thread, Control progress animation * @author Zengtao June 10, 2015 PM 4:31:11 * */class MyThread extends Thread {@OverridepuBlic void Run () {while (!flag) {try {progress + = 1; Message msg = new Message (); msg.what = 0 * 1;msg.obj = progress; Thread.Sleep (+); mhandler.sendmessage (msg);} catch (Interruptedexception e) {e.printstacktrace ();}}} public void Stopthread () {flag = true;}} /** * thread. Control Progress Animation * @author Zengtao June 10, 2015 PM 4:31:11 * */class MyThread2 extends Thread {@Overridepublic void run () {while (!flag {try {progress + = 2; Message msg = new Message (); msg.what = 0 * 2;msg.obj = progress; Thread.Sleep (+); mhandler.sendmessage (msg);} catch (Interruptedexception e) {e.printstacktrace ();}}} public void Stopthread () {flag = true;}} @Overrideprotected void OnDestroy () {Super.ondestroy (); if (thread1! = null) {Thread1.stopthread ();} if (thread2! = null) {Thread2.stopthread ();}}} </span>

Four. SummaryBy implementing the above steps, you implement a secure and reliable implementation of your own defined control. It seems simple, do not say minutes, but take a little bit of time this is yours.

Source code: http://download.csdn.net/detail/u011546655/8793521

Advanced Android player, self-defined circular progress bar