Creating an alternate progress bar for custom views

I. attrs. xml

This progress bar alternate and involves some attributes, such as the color and speed of the progress bar. These attributes are not included in the view, so they need to be customized.

<?xml version="1.0" encoding="utf-8"?><resources>    <attr name="firstColor" format="color" />    <attr name="secondColor" format="color" />    <attr name="circleWidth" format="dimension" />    <attr name="speed" format="integer" />    <declare-styleable name="CustomProgressBar">        <attr name="firstColor" />        <attr name="secondColor" />        <attr name="circleWidth" />        <attr name="speed" />    </declare-styleable></resources>

In the preceding file, several attributes are first declared, including the attribute name and unit of the attribute value. Color indicates the color unit. You can refer to the system color unit or custom color. dimensiion indicates that the ring width unit can be DP.

Integer indicates the speed unit is 1. The attribute name is used to set the attribute name when the view is referenced.

Each attribute has a unique identifier, just like an ID. The obtained method is R. styleable. customprogressbar_firstcolor. The same applies to other attributes.

Ii. customprogressbar

Package COM. example. customerviewdemo2; 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. util. attributeset; import android. util. typedvalue; import android. view. view; public class customprogressbar extends view {private int mfirstcolor; // the color of the first circle privat E int msecondcolor; // the second ring color private int mcirclewidth; // The Ring Width private paint mpaint; // brush private int mprogress; // The current progress Private int mspeed; // speed private Boolean isnext = false; // whether to start the next public customprogressbar (context) {This (context, null);} public customprogressbar (context, attributeset attrs) {This (context, attrs, 0) ;}/ *** required initialization to obtain some custom values ** @ Param context * @ Param attrs * @ Param Defstyle */Public customprogressbar (context, attributeset attrs, int defstyle) {super (context, attrs, defstyle);/* read attrs. the XML file returns an Attribute Set */typedarray A = context. gettheme (). obtainstyledattributes (attrs, R. styleable. customprogressbar, defstyle, 0); int n =. getindexcount (); For (INT I = 0; I <n; I ++) {int ATTR =. getindex (I); Switch (ATTR) {case R. styleable. customprogressbar_firstcolor: MFI Rstcolor =. getcolor (ATTR, color. blue); break; case R. styleable. customprogressbar_secondcolor: msecondcolor =. getcolor (ATTR, color. red); break; case R. styleable. customprogressbar_circlewidth:/* converts the unit of 20px to the unit of DP. the unit defined in XML is format = "dimension" */INT defaultvalue = (INT) typedvalue. applydimension (typedvalue. complex_unit_px, 20, context. getresources (). getdisplaymetrics (); mcirclewidth =. getdimens Ionpixelsize (ATTR, defaultvalue); break; case R. styleable. customprogressbar_speed: mspeed =. getint (ATTR, 20); // The default speed is 20, format = "integer" break;}. recycle (); mpaint = new paint (); // drawing thread new thread () {public void run () {While (true) {mprogress ++; if (mprogress = 360) {// after a lap, set mprogress to 0 and start running mprogress again. If (! Isnext) isnext = true; elseisnext = false;} postinvalidate (); // refresh the interface try {thread. sleep (mspeed); // follow the speed, mprogress increments, and constantly refreshes the interface} catch (interruptedexception e) {e. printstacktrace ();}}};}. start () ;}@ overrideprotected void ondraw (canvas) {int center = getwidth ()/2; // obtain the X coordinate int radius = center-mcirclewidth/2 of the center; // radius mpaint. setstyle (paint. style. stroke); // set the hollow mpaint. setstrokewidth (mcirclewidth );/ /Set the width of the ring mpaint. setantialias (true); // remove the Sawtooth rectf oval = new rectf (center-radius, center-radius, center + radius, center + radius ); // defines the arc shape and size boundary if (! Isnext) {// The Circle of the first color is complete, and the second color runs mpaint. setcolor (mfirstcolor); // set the color of the circle canvas. drawcircle (Center, Center, radius, mpaint); // draw the ring mpaint. setcolor (msecondcolor); // set the color of the circle canvas. drawarc (oval,-90, mprogress, false, mpaint); // draw an Arc Based on the Progress} else {mpaint. setcolor (msecondcolor); // set the color of the circle canvas. drawcircle (Center, Center, radius, mpaint); // draw the ring mpaint. setcolor (mfirstcolor); // set the color of the circle canvas. drawarc (oval,-90, mprogress, false, mpaint); // draw an Arc Based on the Progress }}}

3. Reference a custom View

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res/com.example.customerviewdemo2"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context=".MainActivity" >    <com.example.customerviewdemo2.CustomProgressBar        android:layout_width="100dp"        android:layout_height="100dp"        app:circleWidth="20dp"        app:firstColor="#F00"        app:secondColor="#0f0"        app:speed="20" >    </com.example.customerviewdemo2.CustomProgressBar>    <com.example.customerviewdemo2.CustomProgressBar        android:layout_width="100dp"        android:layout_height="100dp"        app:circleWidth="20dp"        app:firstColor="#2090C0"        app:secondColor="#C8F060"        android:layout_marginTop="10dp"        app:speed="20" >    </com.example.customerviewdemo2.CustomProgressBar></LinearLayout>

Iv. Effects:

Creating an alternate progress bar for custom views