Application of Android custom control series-circular progress bar and android progress bar

Application of Android custom control series-circular progress bar and android progress bar

I. Overview

In the previous blog, we introduced the basics of the Android custom control series. Link: http://blog.csdn.net/qq_24908939/article/details/44589669

In this blog post, we will rewrite the ondraw () method and custom attributes to implement the Circular progress bar based on the basic article. The effect is as follows:

II. Implementation steps

1. Compile the custom component MyCircleProgress extended View

public class MyCircleProgress extends View {…    }

2. Custom Attributes in the MyCircleProgress class

Public int progress = 0; // Actual progress value, current progress/*** custom control attribute, you can flexibly set the size, color, and type of the circular progress bar */private int mR; // The circle radius to determine the size of the circular private int bgColor; // background color of the circle or arc private int fgColor; // foreground color of the circle or arc, that is, the color private int drawStyle when drawing; // specifies the circular progress bar of the draw type FILL, STROKE draw arc progress bar private int strokeWidth; // STROKE draw arc width private int max; // maximum value, set the maximum progress/*** set the progress, this is a thread-safe control. Due to the multi-line issue, you need to synchronize */public synchronized void setProgress (int progress) {if (progress <0) {progress = 0 ;} else if (progress> max) {progress = max;} else {this. progress = progress;} public int getMax () {return max ;}

3. Compile the attrs. xml resource for Custom Attributes. The resource file is placed in the res/values directory and the content is as follows:

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="CircleProgressBar">        <attr name="bgColor" format="color"/>        <attr name="fgColor" format="color"/>        <attr name="r" format="integer"/>        <attr name="strokeWidth" format="integer"/>        <attr name="drawStyle">            <enum name="STROKE" value="0"></enum>            <enum name="FILL" value="1"></enum>        </attr>        <attr name="max" format="integer"/>    </declare-styleable></resources>

4. Define constructors in the MyCircleProgress class and initialize attributes.

Private void initProperty (AttributeSet attrs) {TypedArray tArray = context. obtainStyledAttributes (attrs, R. styleable. circleProgressBar); mR = tArray. getInteger (R. styleable. circleProgressBar_r, 10); bgColor = tArray. getColor (R. styleable. circleProgressBar_bgColor, Color. GRAY); fgColor = tArray. getColor (R. styleable. circleProgressBar_fgColor, Color. RED); drawStyle = tArray. getInt (R. styleable. circleProgressBar_drawStyle, 0); strokeWidth = tArray. getInteger (R. styleable. circleProgressBar_strokeWidth, 10); max = tArray. getInteger (R. styleable. circleProgressBar_max, 100);} public MyCircleProgress (Context context, AttributeSet attrs) {super (context, attrs); this. context = context; this. paint = new Paint (); this. paint. setAntiAlias (true); // remove the Sawtooth this. paint. setStyle (Style. STROKE); // draw a hollow circle or a hollow rectangle initProperty (attrs );}

5. Add the MyCircleProgress component to the MainActivity layout file, as shown below:

<RelativeLayout 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.jereh.mydrawcircleprogress"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity"     >    <com.jereh.views.MyCircleProgress        android:id="@+id/MyCircleProgress"        android:layout_width="wrap_content"        android:layout_height="wrap_content"         app:r="45"        app:strokeWidth="10"        app:bgColor="#cccccc"        app:fgColor="#ff0000"        app:drawStyle="FILL"        app:max="50"        /></RelativeLayout>

6. Override the onDraw method in the Custom component MyCircleProgress:

Protected void onDraw (Canvas canvas) {super. onDraw (canvas); int center = getWidth ()/2; // center position this. paint. setColor (bgColor); this. paint. setStrokeWidth (strokeWidth); canvas. drawCircle (center, center, mR, this. paint); // draw the ring this. paint. setColor (fgColor); if (drawStyle = 0) {this. paint. setStyle (Style. STROKE); opt = false;} else {this. paint. setStyle (Style. FILL); opt = true;} int top = (center-mR); int bottom = (center + mR); RectF oval = new RectF (top, top, bottom, bottom); canvas. drawArc (oval, 270,360 * progress/max, opt, paint );}

7. Compile MainActivity

Public class MainActivity extends Activity {private MyCircleProgress progressView; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); progressView = (MyCircleProgress) findViewById (R. id. myCircleProgress); new progressanimation(.exe cute ();} class ProgressAnimation extends AsyncTask <Void, Integer, Void >{@ Override protected Void doInBackground (Void... params) {// The Progress value is constantly changing for (int I = 0; I <progressView. getMax (); I ++) {try {publishProgress (I); Thread. sleep (100);} catch (InterruptedException e) {e. printStackTrace () ;}} return null ;}@ Override protected void onProgressUpdate (Integer... values) {// Update Progress value progressView. setProgress (values [0]); progressView. invalidate (); super. onProgressUpdate (values );}}}