使用canvas与Paint在View中居中绘制文字

我们在自定义View中有的时候会想自己绘制文字，自己绘制文字的时候，我们通常希望把文字精确定位，文字居中（水平、垂直）是普遍的需求，所以这里就以文字居中为例，看一下android中的文字应该如何绘制，它与Java又有什么区别。

先来看看我们的目标，见下图

上图是我打开了“显示布局边界”后截的图，所有会有好多框框。

仔细观察上图文字区域，我们会发现文字区域中有5条颜色不同的线。按着从上到下的顺序，他们的名字分别是：

top：浅灰色

ascent：黄色

baseline：红色

descent：蓝色

bottom：绿色

 

这5条线到底是什么？android开发文档中已经进行了解释。

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.

我们先稍微跑一下题

如果你尝试过将两个TextView上下排列，没有margin和padding，那么你一定会发现，两个TextView文字之间依然是有空隙的。首先我们需要设置includeFontPadding为false！但是依然有空隙，这时的空隙就是由top与ascent之间的空隙和bottom与descent直接的空隙造成的了。

 

那5条线的位置是由使用的字体和字号决定的。Paint提供了获取上面5条线位置的方法。

一般情况下，我们使用的字符是在ascent与descent之间的，所以我们让ascent与descent之间的部分相对我们的View居中即可。

以baseline为基准，向上为负，向下为正。ascent为负数，descent为正数。

Canvas中的drawText中的总坐标是baseline，所以我们这里要先算出baseline的位置才行。

baseline = (mHeight - (mFontMetricsInt.descent - mFontMetricsInt.ascent)) / 2 - mFontMetricsInt.ascent

使得ascent到View的是上边距与descent到View下边距距离一致即可，此段距离加上ascent的绝对值（-ascent）即为baseline的位置

[java]  view plain  copy

1. private void init() {  
2.     mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
3.     mPaint.setStrokeWidth(3);  
4.     mPaint.setTextSize(60);  
5.     mPaint.setTextAlign(Paint.Align.CENTER);  
6.     mPaint.setStyle(Paint.Style.STROKE);  
7.     mFontMetricsInt = mPaint.getFontMetricsInt();  
8. }  
9.   
10. @Override  
11. public void onDraw(Canvas canvas) {  
12.     int x;  
13.     if (mPaint.getTextAlign() == Paint.Align.LEFT) { //左  
14.         x = mWidth / 2 - (int) (mStringWidth / 2);  
15.     } else if (mPaint.getTextAlign() == Paint.Align.CENTER) { //中  
16.         x = mWidth / 2;  
17.     } else { //右  
18.         x = mWidth / 2 + (int) (mStringWidth / 2);  
19.     }  
20.   
21.     int xFrom = mWidth / 2 - (int) (mStringWidth / 2);  
22.     int xTo = mWidth / 2 + (int) (mStringWidth / 2);  
23.   
24.     // baseline = (mHeight - (mFontMetricsInt.descent - mFontMetricsInt.ascent)) / 2 - mFontMetricsInt.ascent  
25.     // baseline = (mHeight - mFontMetricsInt.ascent - mFontMetricsInt.descent) / 2  
26.     int y = (mHeight - mFontMetricsInt.ascent - mFontMetricsInt.descent) / 2;  
27.     Log.d(TAG, "ascent: " + mFontMetricsInt.ascent);  
28.     Log.d(TAG, "descent: " + mFontMetricsInt.descent);  
29.     Log.d(TAG, "top: " + mFontMetricsInt.top);  
30.     Log.d(TAG, "bottom: " + mFontMetricsInt.bottom);  
31.     Log.d(TAG, "baseline: " + y);  
32.   
33.     // baseline  
34.     mPaint.setColor(Color.RED);  
35.     canvas.drawLine(xFrom, y, xTo, y, mPaint);  
36.     // ascent  
37.     mPaint.setColor(Color.YELLOW);  
38.     canvas.drawLine(xFrom, y + mFontMetricsInt.ascent, xTo, y + mFontMetricsInt.ascent, mPaint);  
39.     // descent  
40.     mPaint.setColor(Color.BLUE);  
41.     canvas.drawLine(xFrom, y + mFontMetricsInt.descent, xTo, y + mFontMetricsInt.descent, mPaint);  
42.     // top  
43.     mPaint.setColor(Color.LTGRAY);  
44.     canvas.drawLine(xFrom, y + mFontMetricsInt.top, xTo, y + mFontMetricsInt.top, mPaint);  
45.     // bottom  
46.     mPaint.setColor(Color.GREEN);  
47.     canvas.drawLine(xFrom, y + mFontMetricsInt.bottom, xTo, y + mFontMetricsInt.bottom, mPaint);  
48.   
49.     mPaint.setColor(Color.BLACK);  
50.     canvas.drawText(TEST_STRING, x, y, mPaint);  
51. }  
52.   
53. @Override  
54. protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
55.     super.onSizeChanged(w, h, oldw, oldh);  
56.     mWidth = w;  
57.     mHeight = h;  
58. }  
59.   
60. private int mWidth;  
61. private int mHeight;  
62. private float mStringWidth;  
63.   
64. private float measureText() {  
65.     mStringWidth = mPaint.measureText(TEST_STRING);  
66.     return mStringWidth;  
67. }  

注意：上面的那几条线的位置和字体是有关的，比如，当你使用“方正姚体”的时候，会发现top和ascent重合了

[java]  view plain  copy

1. private void init() {  
2.     mTf = Typeface.createFromAsset(mContext.getAssets(), "fzyt.ttf");  
3.     mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
4.     mPaint.setTypeface(mTf);  
5.     mPaint.setStrokeWidth(3);  
6.     mPaint.setTextSize(60);  
7.     mPaint.setTextAlign(Paint.Align.CENTER);  
8.     mPaint.setStyle(Paint.Style.STROKE);  // 画空心矩形  
9.     mFontMetricsInt = mPaint.getFontMetricsInt();  
10.     Log.d(TAG, "measureText: " + measureText());  
11. }  

垂直居中解决了，水平居中就容易了。因为……可以在Paint中直接设置。

[java]  view plain  copy

1. mPaint.setTextAlign(Paint.Align.CENTER);  

当然，这里的对其方式只有左中右，即使这里没有设置居中，我们也是可以手动居中文字的。

[java]  view plain  copy

1. int x;  
2. if (mPaint.getTextAlign() == Paint.Align.LEFT) { //左  
3.     x = mWidth / 2 - (int) (mStringWidth / 2);  
4. } else if (mPaint.getTextAlign() == Paint.Align.CENTER) { //中  
5.     x = mWidth / 2;  
6. } else { //右  
7.     x = mWidth / 2 + (int) (mStringWidth / 2);  
8. }  

横纵坐标计算好了之后，我们就可以drawText了。

[java]  view plain  copy

1. canvas.drawText(TEST_STRING, x, y, mPaint);  

至此，问题全部解决，我们知道文字上面的那几条线的位置，就能随意放置我们的文字了。

绘制数字的时候，1明显比4瘦，但是我们可能会得到他们宽度相同的结果，也就没有办法“真正的居中”了。

附上layout文件，如果你设置了padding，记得把padding也计算进去。

[xml]  view plain  copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.               android:orientation="vertical"  
4.               android:layout_width="fill_parent"  
5.               android:layout_height="fill_parent"  
6.         android:background="#FFFFFF">  
7.     <com.example.TextTest.TextView  
8.             android:layout_width="250dip"  
9.             android:layout_height="100dip"  
10.             android:layout_marginTop="10dip"  
11.             android:layout_marginBottom="20dip"  
12.             android:layout_marginLeft="10dip"  
13.             android:layout_marginRight="20dip"/>  
14. </LinearLayout>  

 

最后我们来看看Java中的字体和Android的区别。

Java中字体的概念在这里：Font Concepts。可以看到，这里并没有Android中的top和bottom的概念。

在维基百科中也有baseline相关解释。这里也是没有提到Android中的top与bottom的概念

 

 

转贴请保留以下链接

本人blog地址

http://su1216.iteye.com/

http://blog.youkuaiyun.com/su1216/