【移动应用开发技术】Android精确测量文本宽高及基线位置的方法

【移动应用开发技术】Android精确测量文本宽高及基线位置的方法

前言笔者最近在做一款弹幕控件，里面涉及到绘制文本，以及文本边框。而绘制文本边框需要知道文本的左边位置，上边位置，以及文本的宽高。

通常来说，使用Canvas绘制文本，可以通过画笔Paint来设置文字的大小。但是画笔的大小与文字的宽高并无直接关系。

大家应该能说上几种测量文字宽高的方法，如：

方案1.通过Paint的measureText方法，可以测量文字的宽度

方案2.通过获取Paint的FontMetrics,根据FontMetrics的leading,ascent,和descent可以获取文字的高度。

方案3.通过Paint的getTextBounds获取文本的边界矩形Rect，根据Rect可以计算出文字的宽高。

方案4.通过Paint获取文字的Path,根据Path获取文本的边界矩形Rect,根据Rect可以计算出文字的宽高。

表面上看，我们有以上四种方案可以获取文字的宽或高。但是不幸的，这四种方案里，有些方法获取到的数值不是真实的文字宽高。

我们通过以下测试代码，分别测试字母"e"和"j"。

调用以下代码测试

日志输出如下：

08-1322:50:20.7774977-4977/com.orzangleli.textbounddemoI/lxc:width2>21.0

08-1322:50:20.7774977-4977/com.orzangleli.textbounddemoI/lxc:height1>46.875

08-1322:50:20.7774977-4977/com.orzangleli.textbounddemoI/lxc:width3>18.0

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:height2>22.0

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:width4>17.929688

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:height3>21.914062

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:

<分割线>

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:width2>10.0

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:height1>46.875

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:width3>8.0

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:height2>37.0

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:width4>8.046875

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:height3>37.36328

08-1322:50:20.7774977-4977/com.orzangleli.textbounddemoI/lxc:width2>21.0

08-1322:50:20.7774977-4977/com.orzangleli.textbounddemoI/lxc:height1>46.875

08-1322:50:20.7774977-4977/com.orzangleli.textbounddemoI/lxc:width3>18.0

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:height2>22.0

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:width4>17.929688

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:height3>21.914062

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:

<分割线>

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:width2>10.0

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:height1>46.875

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:width3>8.0

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:height2>37.0

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:width4>8.046875

08-1322:50:20.7784977-4977/com.orzangleli.textbounddemoI/lxc:height3>37.36328

首先，我们可以确定字母"e"和"j"的显示高度应该不一样，而使用第二种FontMetrics方案计算出的两种情况文字高度一样，而且从代码的调用上看，我们也是直接根据Paint获取的FontMetrics,与文字内容无关。所以我们需要测量文字真实高度的话，需要排除第二种方案了。

我们准备一个自定义View，在onDraw方法中使用mPaint绘制一个文本"e"，然后截图测量文本宽高，得出以下结果：可以看到，文本的宽为18，高为22。可以得出以下结论：

方案1测量结果为近似值，存在一定误差。

方案3测量结果准确。

方案4测量结果精度更高，数值基本与方案3一致。

再多说几句。与测量文字高度类似，我们如何获取文字的基线baseline位置。一般的博客上会告诉我们，如果需要计算文字的基线baseline位置，可以通过FontMetrics来计算。FontMetrics基线上面的值为负数，基线下面的值为正数。baseline计算公式为：

baseline=ascent+leading

baseline=ascent+leading

如果你真的使用了这个公式就会发现坑。这个公式计算的基线位置实际上是默认字体的基线位置，与文字内容无关。我们可以看下面的例子：

在自定义View的onDraw方法中，绘制一个字符"e"，绘制y坐标为baseline，所以文字应该会顶着Activity的边界。

显示结果为：那问题来了，究竟怎么计算才能计算出真实的文本的基线位置呢。

我们使用之前的方案3来试试。代码如下：

看看效果，已经能够满足我们的需求，左上都顶着Activity显示了。总结

精确测量文本宽高时，尽量不要使用FontMetrics去做。如果要求不精确，可以使用Paint的measureText方法计算文本宽度，如果要求精确测量，可以使用Paint的get