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

本博客只要没有注明“转”，那么均为原创，转贴请注明本博客链接链接

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

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

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

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

top：浅灰色

ascent：黄色

baseline：红色

descent：蓝色

bottom：绿色

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

我们先稍微跑一下题

如果你尝试过将两个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的位置

@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;
}

垂直居中解决了，水平居中就容易了。因为……可以在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瘦，但是我们可能会得到他们宽度相同的结果，也就没有办法“真正的居中”了。

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

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

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

转贴请保留以下链接

本人blog地址

http://su1216.iteye.com/

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

版权声明：本文为博主原创文章，未经博主允许不得转载。