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

也就是使用paint画笔在(X,Y)处进行绘制,X为横向坐标的起始位置,Y为纵向坐标的文本的baseline的坐标值。
首先必须了解下文本的五线谱

其中:
ascent : 该距离是从所绘字符的baseline之上至该字符所绘制的最高点。
descent: 该距离是从所绘字符的baseline之下至该字符所绘制的最低点。
top: 该距离是从所绘字符的baseline之上至可绘制区域的最高点。
bottom: 该距离是从所绘字符的baseline之下至可绘制区域的最低点。
leading: 为文本的线之间添加额外的空间,这是官方文档直译,debug时发现一般都为0.0,该值也是系统推荐的。
特别注意: ascent和top都是负值,而descent和bottom:都是正值,这些值都是基于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 文字垂直居中的更多相关文章
- 移动Web单行文字垂直居中的问题
单行文字垂直居中的方式你可能可以脱口而出,height和line-height设置为同样就行了,或者设置相同的padding-top和padding-bottom值. 上图是Chrome浏览器下的效果 ...
- select中文字垂直居中解决办法
我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同,从而造成select选择框在各浏览器的显示有不同,下面我们通过对主要 外形CSS属性的支持,打造全兼容select. 我对sel ...
- 在IE8中使用padding设置select控件文字垂直居中
在火狐.苹果.谷歌.欧鹏等主流浏览器中,select下拉表单的文字能够垂直居中,如图: 而在ie8中,select下拉表单的文字基本就是靠底部显示,如图: 那么,如何使得ie8下的select文字垂直 ...
- css实现固定高度及未知高度文字垂直居中的完美解决方案
在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...
- android文字阴影效果(转)
关于android文字阴影,共有四个属性可以设置: android:shadowColor :阴影颜色 android:shadowDx :阴影x方向位移 android:shadowDy :阴影y方 ...
- [HTML]DIV+CSS 文字垂直居中
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 文字垂直居中,水平居中 a标签水平居中只要给他的父级设置text-align=center
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- div+css文字垂直居中 解决左侧头像右侧姓名,姓名多换行后相对于头像仍居中显示
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 多行文字垂直居中(完美兼容chrome firefox IE6 7 8 9)
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
随机推荐
- OD 实验(十五) - 对一个程序的逆向
程序: 打开程序 出现一个 NAG 窗口 这是主界面 点击 Exit 程序出现 NAG 窗口,然后退出 用 PEiD 看一下 是用 VC++ 6.0 写的程序 逆向: 用 OD 载入程序 跑一下程序 ...
- PHP RSA加密解密
1.生成密钥和公钥 开始前需要准备openssl环境 linux 需要安装openssl工具包,传送门http://www.openssl.org/source/ window 下需要安装openss ...
- PHP对全局变量_GET、_POST中特殊字符的过滤
$sVariablesOrder = ini_get( 'variables_order' ); $request = array(); //过滤不安全数据 for ( $i ...
- delphi IOS 后台状态保存
FormSaveState procedure TFrm.FormSaveState(Sender: TObject);begin end; http://stackoverflow.com/ques ...
- xUtils怎么post请求上传字符串
xUtils算是一个非常实用老牌的框架了,但是有些情况,特别是网络请求部分,总是不太方便.需要折腾下才了解用法.今天来聊聊网络模块的用法. 其实看例子就明白了,post JSON数据也是一样道理,这里 ...
- angularjs 出现 “Possibly unhandled rejection: cancel ”错误
Try adding this to your config. I had a similar is once and this workaround did the trick. app.confi ...
- ELK 日志管理系统,初次尝试记录
简介: ELK 是一套开源的日志管理平台,主要包括三个组件,可以用于日志的收集.分析.存储和展示工作. ELK 成员:Elasticsearch .Logstash .Kibana( K4 ) ELK ...
- ssm框架整合之Spring4+SpringMVC+Mybaties3之配置文件如何配置及内容解释--可直接拷贝使用--不定时更改之2017/4/29
经测试,需注意以下几点: 1,controller的自动扫描不能放在applicationContext.xml中,要放在spring-mvc.xml中.同样是<context:componen ...
- 互联网大规模数据分析技术(自主模式)第五章 大数据平台与技术 第10讲 大数据处理平台Hadoop
大规模的数据计算对于数据挖掘领域当中的作用.两大主要挑战:第一.如何实现分布式的计算 第二.分布式并行编程.Hadoop平台以及Map-reduce的编程方式解决了上面的几个问题.这是谷歌的一个最基本 ...
- 钉钉开发笔记(三)MySQL的配置
最近在编写web的过程中,经常需要与后台工作人员互动.由于比较麻烦.没有效率. 就果断的请教了,公司的后台大牛,学习下数据库的一些简单操作,现在就把利用MySQL连接服务器, 进行可视化操作的简单步骤 ...