android 文字垂,Android 史上最简单的实现Canvas drawText文字垂直居中

Android 史上最简单的实现Canvas drawText文字垂直居中

楼主最近在做项目,为了方便,写一个自定义的滑动的Button控件,和ViewPager相关联,需要在View上绘制Text(控件后面有时间分享出来),实现Text的垂直居中,在网上看了好多blog参考很多文章,什么公式都有,眼花缭乱,我试了一个实现效果真的不行,我就想还是自己画图写一个吧,这么简单的东西为什么那么多人搞的这么复杂呢??

首先简单介绍一下基础知识

0818b9ca8b590ca3270a3433284dd417.png

0818b9ca8b590ca3270a3433284dd417.png

要点如下:

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居中即可!!!

如下图所示

0818b9ca8b590ca3270a3433284dd417.png

说明:

> 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!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值