One of the implementation of the Wheel ProgressBar -- draw an arc

1. Implementation principle:
Wheel ProgressBar (rolling progress bar). In the native android progress bar, there is only an indeterminate scroll progress bar. Now we can implement a determinate progress bar to display the rolling progress bar of a specific progress, shows the effect:

 

 
 

 

We will explain it in three steps:
1. How to draw an arc accurately;
2. How to accurately draw the progress text;
3. How to dynamically simulate the progress process.

The three steps have basically explained the implementation principle of the final rolling progress bar: dynamically draw an Arc Based on the progress and display the progress text.

2. Draw arc principle:
To draw an arc in android, you must first provide a rectangular area, then, you can draw an arc according to the set brush parameters, starting point degrees, and arc spans in the limited rectangle area. The specific interface is android. graphics. canvas. drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) (http://developer.android.com/reference/android/graphics/Canvas.html#drawArc (android. graphics. rectF, float, float, boolean, android. graphics. paint ))

Here we will focus on how to accurately draw an arc in a restricted area. For ease of description, we take an arc of 360 degrees (that is, a circle) as an example. Let's first look at one:

 

 
 

If we want to draw an Arc with the width of w1, we know that we must first set the area R_XX of a square, which has two areas: R_out and R_in, the interval between R_out and R_in is w2 = w1/2. I believe many people will choose R_out from the very beginning. In fact, when draw an arc in android, R_in is the right choice. That is, we need to draw an arc with a diameter of d and a width of w, the relationship with the size and size of the required painting Square area is:

Size = d-w

The relationship is as follows:

R_in_size = R_out_size-w1

 

3. Specific implementation:
1. Customize a class CustomArc and inherit from the View;
2. Override the onAttachedToWindow () method and set the arc square area (RectF mArcBounds;) and the Paint mArcPaint parameter (Paint mArcPaint ;):

@ Override
Public void onAttachedToWindow (){
Super. onAttachedToWindow ();

MArcBounds = new RectF (mArcWidth + 1)/2, (mArcWidth + 1)/2,
GetLayoutParams (). width-(mArcWidth + 1)/2,
GetLayoutParams (). height-(mArcWidth + 1)/2 );

MArcPaint. setColor (mArcColor );
MArcPaint. setAntiAlias (true );
MArcPaint. setStyle (Style. STROKE );
MArcPaint. setStrokeWidth (mArcWidth );

Invalidate ();
}

Pay special attention to the bold part of the Code: mArcWidth + 1. Because the pixel value is an integer, when the width of the paint brush (that is, the width of the circular arc mArcWidth) is an odd number, there is a pixel difference between the set square area and the actual ideal area's wide and high values. In this case, we should take a small area to ensure that the drawn arc will not overflow a pixel around it.

3. Override the onDraw () method to draw an arc:

@ Override
Protected void onDraw (Canvas canvas ){
Super. onDraw (canvas );

Canvas. drawArc (mArcBounds,-90,360, false, mArcPaint );
}