Use canvas and paint to center the text in view

This blog as long as not marked "turn", then are original, paste please indicate this blog link link

We are in the custom view sometimes want to draw their own text, when we draw the text, we usually want to put the text accurately positioning, text center (horizontal, vertical) is a common demand, so here is the text center as an example, see how the text in Android should be drawn, What's the difference between it and Java.

Let's take a look at our goals and see

I opened the "Show layout boundary" after the cut of the graph, all there will be a lot of box.

Look closely at the text area and we'll find 5 lines with different colors in the text area . In order from top to bottom , their names are as follows:

Top: Light Grey

Ascent: Yellow

Baseline: Red

Descent: Blue

Bottom: Green

What exactly are these 5 lines? An explanation has been made in the Android development documentation.

Top	The maximum distance above the baseline for the tallest glyph in the font at a given text size.
Ascent	The recommended distance above the baseline for singled spaced text.
Leading	The recommended additional space to add between lines of text.
Descent	The recommended distance below the baseline for singled spaced text.
Bottom	The maximum distance below the baseline for the lowest glyph in the font at a given text size.

Let's run a little bit first.

If you have tried to arrange two textview up and down, without margin and padding, then you will surely find that there is still space between the two TextView words. First we need to set includefontpadding to false! But there is still space, the gap between top and ascent and the bottom and descent direct gap caused by.

The position of the 5 lines is determined by the font and size used. Paint provides a way to get the position of the above 5 lines.

In general, the characters we use are between ascent and descent, so we let the part between ascent and descent be centered on our view.

With baseline as the benchmark, the upward is negative and the downward is positive. Ascent is negative and descent is positive.

The total coordinates in the DrawText in the canvas are baseline, so we have to figure out the baseline position here first.

Baseline = (Mheight-(mfontmetricsint.descent-mfontmetricsint.ascent))/2-mfontmetricsint.ascent

@Overridepublic void OnDraw (canvas canvas) {int x;    if (mpaint.gettextalign () = = Paint.Align.LEFT) {//Left x = MWIDTH/2-(int) (MSTRINGWIDTH/2);    } else if (mpaint.gettextalign () = = Paint.Align.CENTER) {//in x = MWIDTH/2;    } else {//Right x = MWIDTH/2 + (int) (MSTRINGWIDTH/2);    } int xfrom = MWIDTH/2-(int) (MSTRINGWIDTH/2);    int xTo = MWIDTH/2 + (int) (MSTRINGWIDTH/2);  Baseline = (Mheight-(mfontmetricsint.descent-mfontmetricsint.ascent))/2-mfontmetricsint.ascent//baseline = (mheight-mfontmetricsint.ascent-mfontmetricsint.descent)/2 int y = (mheight-mfontmetricsint.ascent-mfontmetr    icsint.descent)/2;    LOG.D (TAG, "ascent:" + mfontmetricsint.ascent);    LOG.D (TAG, "Descent:" + mfontmetricsint.descent);    LOG.D (TAG, "top:" + mfontmetricsint.top);    LOG.D (TAG, "bottom:" + mfontmetricsint.bottom);    LOG.D (TAG, "Baseline:" + y);    Baseline Mpaint.setcolor (color.red); Canvas.drawline (XfroM, y, XTo, y, mpaint);    Ascent Mpaint.setcolor (Color.yellow);    Canvas.drawline (xfrom, y + mfontmetricsint.ascent, xTo, y + mfontmetricsint.ascent, mpaint);    Descent Mpaint.setcolor (Color.Blue);    Canvas.drawline (xfrom, y + mfontmetricsint.descent, xTo, y + mfontmetricsint.descent, mpaint);    Top Mpaint.setcolor (Color.ltgray);    Canvas.drawline (xfrom, y + mfontmetricsint.top, xTo, y + mfontmetricsint.top, mpaint);    Bottom Mpaint.setcolor (color.green);    Canvas.drawline (xfrom, y + mfontmetricsint.bottom, xTo, y + mfontmetricsint.bottom, mpaint);    Mpaint.setcolor (Color.Black); Canvas.drawtext (test_string, x, Y, mpaint);}    @Overrideprotected void onsizechanged (int w, int h, int oldw, int oldh) {super.onsizechanged (W, H, OLDW, OLDH);    Mwidth = W; Mheight = h;} private int mwidth;private int mheight;private float mstringwidth;private float measuretext () {mstringwidth = MPAINT.M    Easuretext (test_string); return mstringwidth;}

Vertical centering is solved, and horizontal centering is easy. Because...... Can be set directly in the paint.

Mpaint.settextalign (Paint.Align.CENTER);

Of course, there is only the right and left, even if there is no center, we can manually center the text.

int x;if (mpaint.gettextalign () = = Paint.Align.LEFT) {//left    x = MWIDTH/2-(int) (MSTRINGWIDTH/2);} else if (mpaint . gettextalign () = = Paint.Align.CENTER) {//in    x = MWIDTH/2;} else {//right    x = MWIDTH/2 + (int) (MSTRINGWIDTH/2) ;}

After the horizontal ordinate calculation is done, we can drawtext.

Canvas.drawtext (test_string, x, Y, mpaint);

At this point, the problem is all solved, we know the text above the position of the lines, we can place our text at will.

When plotting numbers, 1 is significantly thinner than 4, but we may get the same result with the same width, and there is no way to "really center".

Finally, let's look at the differences between fonts and Android in Java.

The concept of fonts in Java is here: Font concepts. As you can see, there is no concept of top and bottom in Android.

There are also baseline related explanations in Wikipedia. The concept of top and bottom in Android is also not mentioned here.

Please keep the following link

My blog Address

http://su1216.iteye.com/

http://blog.csdn.net/su1216/

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Use canvas and paint to center the text in view