使用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的位置

private void init() {  
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
    mPaint.setStrokeWidth(3);  
    mPaint.setTextSize(60);  
    mPaint.setTextAlign(Paint.Align.CENTER);  
    mPaint.setStyle(Paint.Style.STROKE);  
    mFontMetricsInt = mPaint.getFontMetricsInt();  
}  
  
@Override  
public void onDraw(Canvas canvas) {  
    int x;  
    if (mPaint.getTextAlign() == Paint.Align.LEFT) { //左  
        x = mWidth / 2 - (int) (mStringWidth / 2);  
    } else if (mPaint.getTextAlign() == Paint.Align.CENTER) { //中  
        x = mWidth / 2;  
    } else { //右  
        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 - mFontMetricsInt.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);  
}  
  
@Override  
protected 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.measureText(TEST_STRING);  
    return mStringWidth;  
}

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

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

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

mPaint.setTextAlign(Paint.Align.CENTER);

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

int x;  
if (mPaint.getTextAlign() == Paint.Align.LEFT) { //左  
    x = mWidth / 2 - (int) (mStringWidth / 2);  
} else if (mPaint.getTextAlign() == Paint.Align.CENTER) { //中  
    x = mWidth / 2;  
} else { //右  
    x = mWidth / 2 + (int) (mStringWidth / 2);  
}

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

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

至此，问题全部解决，我们知道文字上面的那几条线的位置，就能随意放置我们的文字了。
绘制数字的时候，1明显比4瘦，但是我们可能会得到他们宽度相同的结果，也就没有办法“真正的居中”了。
附上layout文件，如果你设置了padding，记得把padding也计算进去。

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
              android:orientation="vertical"  
              android:layout_width="fill_parent"  
              android:layout_height="fill_parent"  
        android:background="#FFFFFF">  
    <com.example.TextTest.TextView  
            android:layout_width="250dip"  
            android:layout_height="100dip"  
            android:layout_marginTop="10dip"  
            android:layout_marginBottom="20dip"  
            android:layout_marginLeft="10dip"  
            android:layout_marginRight="20dip"/>  
</LinearLayout>

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

猜你喜欢