Custom circular progress bar and circular progress bar

Custom circular progress bar and circular progress bar

As for controls, I think everyone should be familiar with them. In the MVC Architecture for android Application Development, controls play a crucial role, it can be said that it is the basis of controls-based event model human-computer interaction. This feature is more direct in wpf development. If you are interested, you can take a look. The android framework itself has provided us with many controls. Why? Why are there so many controls that can be used? Do you need to delete the chips and customize the controls? Is it because everyone is idle? Apparently not. I personally think that there are only two aspects, or that some native controls are ugly and unbearable (even if you have customized his shape and rounded corners, selector and other styles and annotation); the most common cause is that native controls are hard to meet your needs.
Okay, I admit it's all nonsense, but when I first started learning java and android, I remember it was my first summer vacation. At that time, I really didn't understand it, at that time, I would not be so confused if someone told me more about this.

Next let's take a look at how to implement a simple circular progress bar.

First, you need the extends View class. In this way, you can reference your custom control in the required Activity or fragment. However, for a circular progress bar, you need to draw circles by yourself according to specific rules (for example, countdown and download progress ). After the extends View, you need to reload the protected void onDraw (Canvas canvas) method. Then you can use canvas to create the desired shape. Let's draw a circle here. Canvas. drawArc (oval,-90, (float) progress/maxProgress) * 360, false, and paint are required for circle painting. The first parameter determines the circle range. The second parameter determines the starting position of the circle.-90 starts from 12 o'clock. The third parameter is the degree of the circle angle corresponding to each drawn arc. The last parameter is set paint. The most important thing is the RectF parameter, which determines where the arc is drawn, because the arc drawn by the canvas is the incircle of the rectangle area determined by the RectF (although the rectangle is not drawn, it actually exists and is automatically filled by the brain ). RectF has four parameters. Set the code below can jain. Next, the most important thing about price comparison is paint. You can set the color, line width, and anti-sawtooth attributes of paint.

The following code is provided, which contains detailed comments.

Package com. pocketdigi. curcleprogressbar. view; import android. content. context; import android. graphics. canvas; android. graphics. color; import android. graphics. paint; import android. graphics. paint. style; import android. graphics. rectF; import android. util. attributeSet; import android. view. view; public class CircleProgressBar extends View {private int maxProgress = 100; private int progress = 30; private int pro GressStrokeWidth = 4; // RectF oval; Paint paint; public CircleProgressBar (Context context, AttributeSet attrs) {super (context, attrs ); // The constructor stub oval = new RectF (); paint = new Paint () ;}@ Overrideprotected void onDraw (Canvas canvas) automatically generated by TODO) {// automatically generated method stub super. onDraw (canvas); int width = this. getWidth (); int height = this. getHeight (); if (width! = Height) {int min = Math. min (width, height); width = min; height = min;} paint. setAntiAlias (true); // you can specify the paint brush as a paint brush. setColor (Color. WHITE); // set the paint brush color canvas. drawColor (Color. TRANSPARENT); // paint the white background. setStrokeWidth (progressStrokeWidth); // width painting. setStyle (Style. STROKE); oval. left = progressStrokeWidth/2; // x oval in the upper left corner. top = progressStrokeWidth/2; // y oval in the upper left corner. right = width-progressStrokeWidth/2; // x oval in the lower left corner. bottom = height-progressStrokeWidth/2; // y canvas in the lower right corner. drawArc (oval,-90,360, false, paint); // draw a white circle, that is, the progress bar background paint. setColor (Color. rgb (0x57, 0x87, 0xb6); canvas. drawArc (oval,-90, (float) SS/maxProgress) * 360, false, paint); // draw the progress arc, Which is blue paint. setStrokeWidth (1); String text = progress + "%"; int textHeight = height/4; paint. setTextSize (textHeight); int textWidth = (int) paint. measureText (text, 0, text. length (); paint. setStyle (Style. FILL); canvas. drawText (text, width/2-textWidth/2, height/2 + textHeight/2, paint);} public int getMaxProgress () {return maxProgress ;} public void setMaxProgress (int maxProgress) {this. maxProgress = maxProgress;} public void setProgress (int progress) {this. progress = progress; this. invalidate ();}/*** non-UI thread call */public void setProgressNotInUiThread (int progress) {this. progress = progress; this. postInvalidate ();}}

Let's take a look at how to use this custom control. First, you need to reference it in the corresponding XML file.

 <wenyue.justdoit.view.CircleProgressBar android:id="@+id/circleProgressbar" android:layout_width="300dp" android:layout_height="300dp" android:layout_centerInParent="true" />

The findViewById and so on will not be detailed here. When you get the progressBar instance, you can set some parameters for it, and these set methods must be implemented in the override class. Example: progressBar. setProgressNotInUiThread (I );
Others, such as setOnclickListener, can be set as needed. So far, a simple circular progress bar has been achieved. Haha.