Android 史上最简单的实现Canvas drawText文字垂直居中
楼主最近在做项目,为了方便,写一个自定义的滑动的Button控件,和ViewPager相关联,需要在View上绘制Text(控件后面有时间分享出来),实现Text的垂直居中,在网上看了好多blog参考很多文章,什么公式都有,眼花缭乱,我试了一个实现效果真的不行,我就想还是自己画图写一个吧,这么简单的东西为什么那么多人搞的这么复杂呢??
首先简单介绍一下基础知识
要点如下:
1. 基准点是baseline
2. Ascent是baseline之上至字符最高处的距离
3. Descent是baseline之下至字符最低处的距离
4. Leading文档说的很含糊,其实是上一行字符的descent到下一行的ascent之间的距离
5. Top指的是指的是最高字符到baseline的值,即ascent的最大值
6. 同上,bottom指的是最下字符到baseline的值,即descent的最大值
Note:网上有很多错误的图,如果有疑问,就参看文档,区分对错。
这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和decent之间的,所以我们让ascent与descent之间的部分相对我们的View居中即可!!!
如下图所示
说明:
> Android的Canvas绘图,drawText里的origin是以【baseline】为基准的,直接以目标矩形的bottom传进drawText,字符位置会偏下。
蓝色的横线指的是绘制Text的目标矩形的中点:targetRect.centerY() = (targetRect.bottom + targetRect.top)/2
textCenterVerticalBaselineY 就是绘制文本时候的y坐标,targetRect.centerY()是控件一半的高度。其实这个换算关系也不难理解,targetRect.centerY()-fm.descent的意思是将整个文字区域抬高到控件的1/2,然后我们再加上(fm.descent - fm.ascent) / 2的意思就是将文本下沉文本descent到ascent长度的一半,从而实现文本垂直居中的目的。,不难看出计算公式应该为:
textCenterVerticalBaselineY = targetRect.centerY() + (fm.descent - fm.ascent) / 2- fm.descent ;
注意:fm.top ,fm.ascent ,fm.descent,fm.bottom参照线为baseline,即baseline=0的情况下,其他各线的数值!!!
Get!!!
<转载请注明出处>