Android with progress on a circular progress bar _android

We still use a small example to see the use of Custom view and custom properties, to take you to define a progress with the circle of progress bar, we should first look at the effect

As you can see from the above, we can customize the color of the ring, the color of the ring progress, whether the percentage of progress, progress percentage of the color, and the progress is solid or hollow and so on, this is not very diverse very convenient? And then we're going to teach you how to define

1. Create a new attrs.xml under values, now define our attributes, different attributes for different format, and then I post the properties I used to customize this progress bar

 <?xml version= "1.0" encoding= "UTF-8"?> <resources> <declare-styleable Name= "Roundprogressbar" > <attr name= "roundcolor" format= "Color"/> "<attr" name= "Roundprogresscolor" f ormat= "Color"/> <attr name= "roundwidth" format= "Dimension" ></attr> <attr name= "TextColor" form at= "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&G 
  T </declare-styleable> </resources> 

2. Custom View properties We are defined, and the next is how to get the property and code written, we need to get our own definition of the relevant attributes, we first call Context.obtainstyledattributes (Attrs, R.styleable.roundprogressbar) to get Typedarray, and then get the attributes we defined from Typedarray, such as

Roundcolor = Mtypedarray.getcolor (R.styleable.roundprogressbar_roundcolor, color.red); 
    Roundprogresscolor = Mtypedarray.getcolor (R.styleable.roundprogressbar_roundprogresscolor, Color.GREEN); 
    TextColor = Mtypedarray.getcolor (R.styleable.roundprogressbar_textcolor, color.green); 
    Textsize = Mtypedarray.getdimension (r.styleable.roundprogressbar_textsize); 
    Roundwidth = Mtypedarray.getdimension (R.styleable.roundprogressbar_roundwidth, 5); 
    max = Mtypedarray.getinteger (R.styleable.roundprogressbar_max, MB); 
    textisdisplayable = Mtypedarray.getboolean (r.styleable.roundprogressbar_textisdisplayable, true); 
    style = Mtypedarray.getint (r.styleable.roundprogressbar_style, 0); 

In the above code, such as Roundcolor = Mtypedarray.getcolor (R.styleable.roundprogressbar_roundcolor, color.red); The first parameter of the GetColor method is the color we defined in the XML file, and if we don't define the color for our custom view, he uses the default value in the second argument, that is, the color.red

3. For the sake of understanding, I post all the code for the custom view, and I have a detailed comment on the code inside.

Package Com.example.roundprogressbar; 
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.util.Log; 
 
Import Android.view.View; 
 
Import COM.EXAMPLE.CIRCLEPREGRESS.R; 
  /** * Imitation iphone with progress bar, thread safe view, can update progress directly in the thread * @author xiaanming * */public class Roundprogressbar extends View { 
   
  /** * A reference to the object of the brush * * Private Paint Paint; 
   
  /** * The color of the ring * * private int roundcolor; 
   
  /** * The color of the progress of the ring * * private int roundprogresscolor; 
   
  /** * The color of the string of the intermediate progress percentage * * private int textcolor; 
   
  /** * The font of the string for the intermediate progress percentage * * private float textsize; 
   
  /** * The width of the ring * * Private float roundwidth; 
   
  /** * Max progress/private int max; /** * Current Progress * * private int progress;
  /** * Whether to show the progress of the middle * * Private Boolean textisdisplayable; 
   
  /** * Progress style, solid or hollow */private int style; 
  public static final int STROKE = 0; 
   
  public static final int FILL = 1; 
  Public Roundprogressbar {This (context, NULL); 
  Public Roundprogressbar (context, AttributeSet attrs) {This (context, attrs, 0); Roundprogressbar (context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle) 
     
    ; 
 
     
    Paint = new paint (); 
     
    TypedArray Mtypedarray = context.obtainstyledattributes (Attrs, R.styleable.roundprogressbar); 
    Gets the custom attribute and default value Roundcolor = Mtypedarray.getcolor (R.styleable.roundprogressbar_roundcolor, color.red); 
    Roundprogresscolor = Mtypedarray.getcolor (R.styleable.roundprogressbar_roundprogresscolor, Color.GREEN); 
    TextColor = Mtypedarray.getcolor (R.styleable.roundprogressbar_textcolor, Color.green); Textsize = MtypEdarray.getdimension (R.styleable.roundprogressbar_textsize, 15); 
    Roundwidth = Mtypedarray.getdimension (R.styleable.roundprogressbar_roundwidth, 5); 
    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 (); 
     
    } @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas); /** * Draw the outermost large ring/INT centre = getwidth ()/2; Gets the x coordinate int radius = (int) (CENTRE-ROUNDWIDTH/2) of the center; Radius of the Ring Paint.setcolor (Roundcolor); Set the color of the ring Paint.setstyle (Paint.Style.STROKE); Setting Hollow Paint.setstrokewidth (Roundwidth); Sets the width of the ring Paint.setantialias (true); Anti-aliasing canvas.drawcircle (Centre, centre, RADIUS, paint); 
     
    Draw the Ring LOG.E ("Log", centre + ""); /** * Draw percent of progress * * * PAINT.SEtstrokewidth (0); 
    Paint.setcolor (TextColor); 
    Paint.settextsize (TEXTSIZE); Paint.settypeface (Typeface.default_bold); Sets the font int percent = (int) ((float) progress/(FLOAT) max) * 100);  In the middle of the progress percentage, first converted to float in the division operation, otherwise all 0 float textWidth = paint.measuretext (Percent + "%"); To measure the font width, we need to set the width of the font to the center of the ring if (textisdisplayable && percent!= 0 && style = = STROKE) {CA Nvas.drawtext (Percent + "%", CENTRE-TEXTWIDTH/2, centre + TEXTSIZE/2, paint); Draw a percentage of progress}/** * Draw arc, draw the progress of the ring//set progress is solid or hollow paint.setstrokewidth (Roun Dwidth); Set the width of the ring Paint.setcolor (Roundprogresscolor); Sets the color of the progress RECTF oval = new RECTF (Centre-radius, Centre-radius, centre + RADIUS, centre + radius); 
      Boundary switch (style) {case stroke:{Paint.setstyle (Paint.Style.STROKE) for the shape and size of the defined arc; Canvas.drawarc (Oval, 0, 360 * Progress/max, false, paint); 
 Draw the arc break according to the progress;   Case fill:{Paint.setstyle (Paint.Style.FILL_AND_STROKE); if (Progress!=0) Canvas.drawarc (Oval, 0, 360 * Progress/max, true, paint); 
    Draw the arc break according to the progress; 
  }} public synchronized int Getmax () {return max; 
      /** * Set the maximum of progress * @param max/public synchronized void Setmax (int max) {if (Max < 0) { 
    throw new IllegalArgumentException ("Max not less than 0"); 
  } This.max = max; 
  /** * Get progress. Need sync * @return/public synchronized int getprogress () {return progress;  /** * Set Progress, this is a thread-safe control, due to the problem of multiple lines, need to sync * Refresh interface call Postinvalidate () can refresh on non-UI thread * @param progress * * Public synchronized void setprogress (int progress) {if (Progress < 0) {throw new IllegalArgumentException ("Progre 
    SS not less than 0 "); 
    } if (Progress > Max) {progress = max; } if (Progress <= max) {this.progress = ProgrEss 
    Postinvalidate (); 
  } public int Getcriclecolor () {return roundcolor; 
  The public void Setcriclecolor (int criclecolor) {this.roundcolor = Criclecolor; 
  public int Getcricleprogresscolor () {return roundprogresscolor; 
  The public void Setcricleprogresscolor (int cricleprogresscolor) {this.roundprogresscolor = Cricleprogresscolor; 
  public int GetTextColor () {return textcolor; 
  The 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; 
 } 
 
 
 
}

4. With the above steps we have implemented custom view, and custom view properties, of course, there is a little change in the process, we must at the top of the interface layout plus
 xmlns:android_ custom= " http://schemas.android.com/apk/res/com.example.circlepregress This is the namespace, and the
Red section is the prefix of the custom attribute, what does it mean? For the Android system control we define its control properties with android:xxx= "XXXXXXX", and we define it by android_custom:xxx = "XXXXXX"
Green is the name of our package
. By using these two steps, we can define our own attributes, and I paste out the definition view to use in XML

 <relativelayout xmlns:android= "Http://schemas.android.com/apk/res/android" xmlns : android_custom= "http://schemas.android.com/apk/res/com.example.circlepregress" xmlns:tools= "http://  
  
  
  Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" Match_parent "> <com.example.roundprogressbar.roundprogressbar android:id= "@+id/roundprogressbar2" android:layout_width= "8 0dip "android:layout_height=" 80dip "android:layout_alignleft=" @+id/roundprogressbar1 "Android:layout_ali  
    Gnparentbottom= "true" android:layout_marginbottom= "78DP" android_custom:roundcolor= "#D1D1D1" Android_custom:roundprogresscolor= "@android: Color/black" android_custom:textcolor= "#9A32CD" Android_custom: Textisdisplayable= "false" Android_custom:roundwidth= "10dip" android_custom:textsize= "18sp"/> </relativ Elayout> 

SOURCE Download: "Android with progress of the circular progress bar"

The above is the entire content of this article, I hope to help you learn.