关于自定义view中的文字垂直居中的问题。

很多同学在刚刚接触到自定义view 的时候就一阵头大,本人也是菜鸟一枚,近些天辞职没事情,所以在家里研究自定义view,在研究圆形进度条的时候发现进度条中间的百分比文字始终没有在圆所在的正中心,于是就各种搜索,解决了文字居中的问题。接下来就把我的处理分享给大家。

先来张图(从别的地方copy过来的安静


这张图是我们在

canvas.drawText
的时候离不开的,也就是说只有了解了这个图片的内容,才可以对自定义view的文字轻车熟路,画出自己想要的效果。
图中的top,ascent,baseline,descent,bottom所在的类是FontMetricsInt和FontMetrics,这两个其实作用是相同的,只不过前者返回的是int类型的数据,而后面返回的是float类型的数据。
 
在我们画文字的时候,很多人认为它的x,y的坐标是从文字的左上角开始的,其实只说对了一半,y轴的坐标是从基线(baseline)开始的,也就是说如果我们从(0,0)点开始画,
那么它的坐标应该是上图中红色线(baseline)最左侧开始的,这也就导致了很多人画的文字不垂直居中的问题所在。
 
那么怎么解决这个问题呢,其实很好解决。大家看我打印的log
E/tag: ascent=-56;top=-64;descent=15;bottom=17
有人问ascent和top怎么是负数呢?
其实上图中除了baseline之外,其他的四条线的位置是基于baseline定位的,换句话说如果baseline的y坐标是0,那么ascent=baseline-ascent。
这下大家理解了吗。
 
而想要文字垂直居中就可以这样写
canvas.drawText(string,centerX - textwidth/2, centerY+((Math.abs(metrics.ascent)+metrics.descent)/2-metrics.descent), paint);

以上只是个人在工作中的解决办法,如果有误,请各位大神们指正,希望各位大神不吝赐教。
祝愿所有的程序猿的代码没有bug。
 
 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值