Implementation 2 of wheel progressbar -- draw progress text

1. Effect display:

In the implementation of "Wheel progressbar-draw an arc", we explain how to accurately draw an arc in a rectangle area. In this section, we use the center of the ring (that is, the center of the rectangle) as the symmetric point to draw the progress text, as shown in the following figure: 2. Implementation principle:In Android, the character is drawn through canvas. drawtext (string text, float X, float y, paint); this interface is used to determine the values of x and y in addition to setting the paint brush parameters. By default, (x, y) indicates the coordinate point between the character and its lower-left coordinate point in the region. X indicates the distance between the left edge of the character and the left edge of the region, Y indicates the distance between the character baseline and the bottom of the region.
X is the position on the left of the character on the screen. This explanation is vague and it is proved wrong when drawing inside the view. The specific implementation principles are explained as follows:

First, we need to specify four areas: the character '90', the character '%', the interval between two characters, and the square area where the two characters are located. The size of each region has been described in the figure. Our task is to calculate the left and bottom coordinate points (Xn, yn) and (XP, YP) of two characters ). Based on the description in the figure, we can easily use the following formula to calculate the two coordinates: half of the width of the character and its interval: offset = (Wn + WP + DH) /2xn = W/2-offsetyn = W/2 + hn/2xp = W/2 + offset-wpyp = W/2-hn/2 + Hp
Wn, HN, WP, and HP can all be provided through related interfaces. DH can be specified by users.3. Specific implementation:We continue to implement this function in the customarc class defined in "Wheel progressbar implementation-draw an arc": 1. Set the paint character's brush parameter in the onattachedtowindow () method: @ override
Public void onattachedtowindow (){
Super. onattachedtowindow ();......
Mprogresspaint. setcolor (color. Black );

Mprogresspaint. setstyle (style. Fill); mprogresspaint. setantialias (true); mprogresspaint. settextsize (180 );
Mprogresspaint. settypeface (typeface. default_bold );

Mpercentpaint. setcolor (color. Black );
Mpercentpaint. setstyle (style. Fill );
Mpercentpaint. setantialias (true );
Mpercentpaint. settextsize (INT) (180*0.7 ));
Mpercentpaint. settypeface (typeface. default_bold );

Invalidate ();}
2. Draw characters in the ondraw () method:
@ Override
Protected void ondraw (canvas ){
Super. ondraw (canvas );
......
Mprogresspaint. gettextbounds ("90", 0, "90". Length (), mprogbounds );

Mpercentpaint. gettextbounds ("%", 0, 1, mpercentbounds); float offset =
(Mprogbounds. Width () + mpercentbounds. Width () + mpercentbounds. Width ()/2)/2;

Canvas. drawtext ("90 ",
This. getwidth ()/2-offset,
This. getheight ()/2 + mprogbounds. Height ()/2,
Mprogresspaint );

Canvas. drawtext ("%", this. getwidth ()/2 + offset-mpercentbounds. Width (),
This. getheight ()/2-mprogbounds. Height ()/2 + mpercentbounds. Height (),
Mpercentpaint );
}
3. Download The Complete Project: customarc