Android UI 之居中绘制文本内容的正确方法——实现自定义一个TextView

    我们在自定义一个控件的时候，有时候会需要自己来绘制一些文本内容，这样就自然而然遇到确定文本的方位的问题，比如文本需要水平居中，垂直居中，居左，居右，左上。。。等等很多情况。其中最常见的就是文本位于控件的正中央了。

    既然是文本居中，那就要让文本水平居中，并且同时垂直居中，我们分开来做。

    水平居中的思路很简单，一种是得到控件的宽度A，使得文本的中心位置x坐标=A/2就可以了。还有一种思路是我们得到控件的宽度A，然后测量出要绘制的文本的宽度B，然后使得文本的左端x坐标=(A-B)/2。

    相对复杂一点的实现文本垂直居中，我们需要用到FontMetrics，这里涉及到几个概念，分别是文本的top，bottom，ascent，descent，baseline。看下面的图：

    我们在画布中绘制文本的时候，会调用Canvas.drawText(String text, float x, float y, Paint paint)这个方法，其中y的坐标就是上图中baseline的y坐标，所以，如果我们只是简单地把drawText方法中的y设置为控件高度的1/2是不准确的，如果这样做的话会发现文本整体是位于画布的上半部分的，因为baseline下面的文本部分是很小的。

    正确的做法是通过一些合理的换算使得文本的y坐标（baseline的y坐标）位于控件的下半部分区域。下面是我自己通过计算和测试得到的准确换算关系：

float textCenterVerticalBaselineY = viewHeight / 2 - fm.descent + (fm.bottom - fm.top) / 2;

    textCenterVerticalBaselineY就是绘制文本时候的y坐标，viewHeight是控件的高度。其实这个换算关系也不难理解，viewHeight/2-fm.descent的意思是将整个文字区域抬高到控件的1/2，然后我们再加上(fm.bottom - fm.top) / 2的意思就是将文本下沉文本top到bottom长度的一半，从而实现文本垂直居中的目的。

    有的人或许会问，为什么最后加上的是bottom到top距离的一半而不是descent到ascent的一半呢？其实这个是我测试的结果，我发现如果用bottom到top距离的一半来设置文本垂直居中，和系统控件TextView的文本居中效果是一样的，我们来看下面的效果：

    首先是我们使用(fm.bottom - fm.top) / 2:

    然后是使用(fm.descent - fm.ascent) / 2: