android中自定义控件,自己绘制文字canvas.drawText()的时候,怎样才能让文字垂直居中那?

  drawText()的方法说明

也就是使用paint画笔在(X,Y)处进行绘制,X为横向坐标的起始位置,Y为纵向坐标的文本的baseline的坐标值。

首先必须了解下文本的五线谱

其中:

ascent :   该距离是从所绘字符的baseline之上至该字符所绘制的最高点。
descent:  该距离是从所绘字符的baseline之下至该字符所绘制的最低点。
top:          该距离是从所绘字符的baseline之上至可绘制区域的最高点。
bottom:    该距离是从所绘字符的baseline之下至可绘制区域的最低点。
leading:   为文本的线之间添加额外的空间,这是官方文档直译,debug时发现一般都为0.0,该值也是系统推荐的。
特别注意: ascenttop都是负值,而descentbottom:都是正值,这些值都是基于baseline为坐标0的相对值。

Android文字绘制是相对于基线绘制的,也就是图中的红线,而top+bottom的长度就等于字体高度,即等于|top|+|bottom|绝对值

实际绘制取决于基线上一个点来绘制文字,而这个点有三种分别对应为left, center, right如下图:

而drawText()方法中x,y坐标所指的点就是上图基线上三个点中的一个,具体是哪一个根据paint的setTextAlign()方法设置。默认为left

看代码:

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
areaRect = canvas.getClipBounds();
Log.d("Linghu","========linghu="+areaRect.width()+","+areaRect.height());
// paint.setColor(Color.parseColor("#0000ff"));
// canvas.drawText(conStr, 0, 0, paint); paint.setColor(Color.parseColor("#ff0000"));
canvas.drawText(conStr, 0, (areaRect.bottom+areaRect.top)/2.0f - metrics.descent+(metrics.bottom-metrics.top)/2, paint);
paint.setColor(Color.parseColor("#0000ff"));
canvas.drawLine(0, areaRect.height()/2, areaRect.right, areaRect.height()/2 +1, paint); // paint.setColor(Color.parseColor("#00ff00"));
Log.d("Linghu","========bottom="+metrics.bottom+",descent="+metrics.descent+",top="+metrics.top+",ascent="+metrics.ascent);
// int base = (int)(metrics.bottom - metrics.descent);
// canvas.drawText(conStr, 0, base, paint);
}

  

计算baseline值的过程大致如下:
第一: 获取View的中心位置
      (areaRect.top+areaRect.bottom)/2;
第二: 中心位置下移半个字体的高度,此时baseline的位置是图的文字
      +(metrics.bottom - metrics.top)/2;
第三: 上移descent,达到文字的最终位置:
      -descent;
(areaRect.top+areaRect.bottom)/2 +(metrics.bottom - metrics.top)/2 - descent;

经过这三步就使得文字在控件的居中位置了。这里paint的TextAlign是默认值top,因为这种情况比较多;如果设置TextAlign=center,那就简单多了,具体如下:
  (areaRect.top+areaRect.bottom)/2-(metrics.top + metrics.bottom)/2

希望对大家有所帮助。

Android 文字垂直居中的更多相关文章

  1. 移动Web单行文字垂直居中的问题

    单行文字垂直居中的方式你可能可以脱口而出,height和line-height设置为同样就行了,或者设置相同的padding-top和padding-bottom值. 上图是Chrome浏览器下的效果 ...

  2. select中文字垂直居中解决办法

    我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同,下面我们通过对主要 外形CSS属性的支持,打造全兼容select. 我对sel ...

  3. 在IE8中使用padding设置select控件文字垂直居中

    在火狐.苹果.谷歌.欧鹏等主流浏览器中,select下拉表单的文字能够垂直居中,如图: 而在ie8中,select下拉表单的文字基本就是靠底部显示,如图: 那么,如何使得ie8下的select文字垂直 ...

  4. css实现固定高度及未知高度文字垂直居中的完美解决方案

    在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...

  5. android文字阴影效果(转)

    关于android文字阴影,共有四个属性可以设置: android:shadowColor :阴影颜色 android:shadowDx :阴影x方向位移 android:shadowDy :阴影y方 ...

  6. [HTML]DIV+CSS 文字垂直居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  7. 文字垂直居中,水平居中 a标签水平居中只要给他的父级设置text-align=center

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  8. div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  9. 多行文字垂直居中(完美兼容chrome firefox IE6 7 8 9)

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. IO模型之阻塞IO

    1. IO模型的介绍 首先我们先来熟悉下什么是 同步,异步.阻塞.非阻塞 的知识: 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞 ...

  2. Cocos2d-html5帧动画

    单独获取plist里面一个文件: cc.SpriteFrameCache.getInstance().addSpriteFrames(s_test_plist); var spriteTest2 = ...

  3. Windows C盘文件夹介绍及说明

    Documents and Settings是什么文件? 答案: 是系统用户设置文件夹,包括各个用户的文档.收藏夹.上网浏览信息.配置文件等. 补:这里面的东西不要随便删除,这保存着所有用户的文档和账 ...

  4. Python小知识点(4)--模块相关

    1.模块: 定义:用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质就是以.py结尾的python文件(文件名:test.py,对应的模块名:test). 包:用来从逻辑上组 ...

  5. 用python3判断一个字符串 包含 中文

    在python中一个汉字算一个字符,一个英文字母算一个字符 用 ord() 函数判断单个字符的unicode编码是否大于255即可. s = '我xx们的88工作和生rr活168' n = 0 for ...

  6. 跟着太白老师学python 09day 初识函数

    函数的最主要的目的:封装一个功能 函数的优点: 减少代码的复用率, 增加代码的阅读性 def my_len(arvg): # arvg 形参 my_len函数名,应该具有代表性,让你一看就明白 # 函 ...

  7. 太白老师 day06 编码 encode decode

    ASCII : 字母, 数字, 特殊字符 字符:1个字节 数字: 1个字节 Unicode: 万国码, 包含所有文字 创建之初 字符: 2个字节 中文: 2个字节 升级: 字符: 4个字节 中文 : ...

  8. Elasticsearch学习系列之term和match查询实例

    Elasticsearch查询模式 一种是像传递URL参数一样去传递查询语句,被称为简单查询 GET /library/books/_search //查询index为library,type为boo ...

  9. 用jQuery获取table中行id和td值

    <%@ page language="java" pageEncoding="UTF-8"%> <% String path = reques ...

  10. ADB Not Responding - Android Studio

    问题描述: 最近安装了Android Studio v1.0,运行的时候老是这个错误 解决方案: 网上有人说是已经有adb的进程在运行,可是打开任务管理器,找不到对应的adb 进程. 无奈之下,想到a ...