Custom controls: The implementation process of drawing rings

Using a custom control to draw a circle, the method to reproduce is to OnDraw () to draw the view to
Output view controls that match your needs
Observe the components of the ring:
Outer Circle + middle percent text + curved circle with changing progress
---> Analysis: The attributes required for each component to form several key custom attributes
1: The color of the outer circle
2: The color of the curved progress circle
3: Middle Percent text color
4: Size of middle percent text
5: Width of the ring (as the width of the arc Circle of the progress) 6:* home There is also a ring progress, in order to be compatible with the first page of the ring progress, add a custom property, draw the progress of the Arc circle style (solid [Fill], hollow [Stroken])

Analysis finished-Drawing steps:
1: Initialize the Brush object in the constructor method to get the custom property value.
2: Overriding the OnDraw method
---2.1: Draw the outermost circle
-Key Methods Canvas.drawcircle (center, center, RADIUS, paint); Draw a Circle

*: Calculate radius, center point coordinates, brush settings
Paint.setcolor (Roundcolor); Set the color of the ring
Paint.setstyle (Paint.Style.STROKE); Set Hollow
Paint.setstrokewidth (Roundwidth); Set the width of the ring---this width is also
The width of the cover when the arc circle is drawn in the supply progress
Paint.setantialias (TRUE); Anti-aliasing
Center Point coordinates
int center = getwidth ()/2; Gets the x-coordinate of the center point
Radius

Int radius = (int) (CENTER-ROUNDWIDTH/2)---Drawing description is easiest to understand
---2.2: Draw the middle percent text
--key method: Canvas.drawtext (Percent + "%") , CENTER-TEXTWIDTH/2,
Center + TEXTSIZE/2, paint); Draw progress Percentage
measure the width of text on the brush
Float textWidth = paint.measuretext (Percent + "%");
Brush Settings
Paint.setstrokewidth (0);
Paint.setcolor (TextColor);
Paint.settextsize (textSize);  

Paint.settypeface (Typeface.default_bold);//sets the position of the text drawn by the font, determined by the x, Y coordinate value of the parameter 2,3-the center point position of the ring displays X: Indicates where to start drawing, If you start with a direct center point--the drawing instructions are easiest to understand--the correct x=center-textwidth/2;y = center + TEXTSIZE/2--(because android coordinate system is the opposite of the mathematical coordinate system y-axis value, or you can draw a description, where textsize can small calculation, equivalent to Wrap_content, so textsize is the height of its own text) *: The progress of the drawing is to be converted to percent: int percent = (int) (((float) Progress/ (float) max);

---2.3: Draw the progress Arc circle
---key methods: Canvas.drawarc (Oval, 0, Progress/max, false, paint);
Draw arcs based on progress
Parameter explanation:
Oval: Sketched outline of the range of arcs
0: From how many angles to start drawing
Progress/max: Plot the area corresponding to the arc sweep angle
False: does not include the center of the circle, if true, indicates that contains the center of Paint: Paint used brush brush Settings paint.setstrokewidth (roundwidth); Set the width of the progress arc circle, which must be kept

Consistent with the strokewidth of the outer circle, making sure that the range covered by the arc circle is the width of the outer circle.
Paint.setcolor (Roundprogresscolor); Set the color of progress
Calculation of Arc Range
RECTF Oval = new RECTF (Center-radius, Center-radius, center
+ RADIUS, center + radius); ---> Drawing instructions are the easiest to understand
Left:center-radius
Top:center-radius
Right:center+radius
Intelligence Podcast Wuhan Campus Employment Department produced pragmatic, innovation, quality, sharing, focus, responsibility
Bottom:center+radius
*: note, because the progress is relative to 100, and the arc is in total according to the angle
is divided into 360 points, so the arc circle is drawn to specify the area angle of the parameter sweep needs to be calculated and converted.
=360 * Progress/max (max=100)
*: The last attribute in the corresponding custom attribute is solid or hollow, you need to determine when drawing a
, compatible with the first page of the Ring progress processing
switch (style) {
Case stroke:{
Paint.setstyle (Paint.Style.STROKE);
Canvas.drawarc (Oval, 0, 360 *
Progress/max, false, paint); Draw arcs based on progress
Break
}
Case fill:{
Paint.setstyle (Paint.Style.FILL_AND_STROKE);
if (Progress!=0)
Canvas.drawarc (Oval, 0, 360 *
Progress/max, true, paint); Draw arcs based on progress
Break
}
}
Finally, provide a way to set progress, redraw the ring based on progress
public void setprogress (int progress) {
if (Progress < 0) {
throw new
IllegalArgumentException ("Progress not less than
0 ");
}
if (Progress > Max) {
progress = max;
}
if (Progress <= max) {
This.progress = progress;
Postinvalidate ();
}
}

Custom controls: The implementation process of drawing rings