Android字符串进阶:字体属性及测量(FontMetrics)



最近的一个模块正好用到字体的相关内容,整理出来。

(一) 字体的几个参数 ,以Android API文档定义为准,见下图


204659118.png 

要点如下:

1. 基准点是baseline

2. Ascent是baseline之上至字符最高处的距离

3. Descent是baseline之下至字符最低处的距离

4. Leading文档说的很含糊,其实是上一行字符的descent到下一行的ascent之间的距离

5. Top指的是指的是最高字符到baseline的值,即ascent的最大值

6. 同上,bottom指的是最下字符到baseline的值,即descent的最大值


Note:网上有很多错误的图,如果有疑问,就参看文档,区分对错。


为了帮助理解,我特此搜索了不同的示意图。对照示意图,会很容易理解FontMetrics的参数。

pic-1


204735397.png 
pic-2 
204802837.png 
pic-3 
204822971.png 

pic-4 
204802837.png 
pic-5 
204858283.png 
pic-6 
204956427.png 

(二) 测试

1,测试的代码直接使用网上的代码,因为重复着众多,无所给出原始出处,故不注出。

我增加了Bitmap作为输出显示,完整代码如下:

  1. public class FontMetricsDemoActivity extends Activity { 
  2.     private Canvas canvas; 

  3.     /** Called when the activity is first created. */ 
  4.     @Override 
  5.     public void onCreate(Bundle savedInstanceState) { 
  6.         super.onCreate(savedInstanceState); 
  7.         setContentView(R.layout.main); 
  8.          
  9.         Paint textPaint = new Paint( Paint.ANTI_ALIAS_FLAG); 
  10.         textPaint.setTextSize( 55); 
  11.         textPaint.setColor( Color.WHITE); 

  12.         // FontMetrics对象 
  13.         FontMetrics fontMetrics = textPaint.getFontMetrics(); 
  14.         String text = "abcdefghijklmnopqrstu"; 
  15.          
  16.          

  17.         // 计算每一个坐标 
  18.         float baseX = 0; 
  19.         float baseY = 100; 
  20.         float topY = baseY + fontMetrics.top; 
  21.         float ascentY = baseY + fontMetrics.ascent; 
  22.         float descentY = baseY + fontMetrics.descent; 
  23.         float bottomY = baseY + fontMetrics.bottom; 
  24.         float leading = baseY + fontMetrics.leading; 
  25.          
  26.          
  27.         Log.d("fontMetrics", "baseX    is:" + 0); 
  28.         Log.d("fontMetrics", "baseY    is:" + 100); 
  29.         Log.d("fontMetrics", "topY     is:" + topY); 
  30.         Log.d("fontMetrics", "ascentY  is:" + ascentY); 
  31.         Log.d("fontMetrics", "descentY is:" + descentY); 
  32.         Log.d("fontMetrics", "bottomY  is:" + bottomY); 
  33.         Log.d("fontMetrics", "leading  is:" + leading); 

  34.          
  35.          
  36.         Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.fontmetrics); 
  37.         Bitmap mutableBitmap = bitmap.copy(Bitmap.Config.ARGB_8888, true); 
  38.          
  39.         canvas  = new Canvas(mutableBitmap); 
  40.          
  41.          

  42.         // 绘制文本 
  43.         canvas.drawText(text, baseX, baseY, textPaint); 

  44.         // BaseLine描画 
  45.         Paint baseLinePaint = new Paint( Paint.ANTI_ALIAS_FLAG); 
  46.          
  47.         baseLinePaint.setColor( Color.RED); 
  48.         canvas.drawLine(0, baseY, canvas.getWidth(), baseY, baseLinePaint); 

  49.         // Base描画 
  50.         canvas.drawCircle( baseX, baseY, 5, baseLinePaint); 

  51.         // TopLine描画 
  52.         Paint topLinePaint = new Paint( Paint.ANTI_ALIAS_FLAG); 
  53.         topLinePaint.setColor( Color.LTGRAY); 
  54.         canvas.drawLine(0, topY, canvas.getWidth(), topY, topLinePaint); 

  55.         // AscentLine描画 
  56.         Paint ascentLinePaint = new Paint( Paint.ANTI_ALIAS_FLAG); 
  57.         ascentLinePaint.setColor( Color.GREEN); 
  58.         canvas.drawLine(0, ascentY, canvas.getWidth(), ascentY, ascentLinePaint); 

  59.         // DescentLine描画 
  60.         Paint descentLinePaint = new Paint( Paint.ANTI_ALIAS_FLAG); 
  61.         descentLinePaint.setColor( Color.YELLOW); 
  62.         canvas.drawLine(0, descentY, canvas.getWidth(), descentY, descentLinePaint); 

  63.         // ButtomLine描画 
  64.         Paint bottomLinePaint = new Paint( Paint.ANTI_ALIAS_FLAG); 
  65.         bottomLinePaint.setColor( Color.MAGENTA); 
  66.         canvas.drawLine(0, bottomY, canvas.getWidth(), bottomY, bottomLinePaint);  
  67.          
  68.         ImageView imageView = (ImageView) findViewById(R.id.imageView1); 
  69.         imageView.setImageBitmap(mutableBitmap); 
  70.          
  71.     } 
  72. }
复制代码
log显示如下:
205132898.png 
Note1:注意到各个数值都是整数,这是建立在baseY=100的情况下,去掉baseY,重新运行代码,log如下
205237350.png 

Note2: 参照线为baseline,即baseline=0的情况下,其他各线的数值。leading = 0,即行间距=0

2,以上是根据paint设置,获取相关的FontMetrics属性,并且只绘制了一行字符串,我们猜想,如果是多行,是否可以获得行间距leanding,代码如下:

  1. //test_multiply_lines 
  2.         TextView textView = (TextView) findViewById(R.id.textView1); 
  3.         String textMultiLines = "abcdefghijklmnopqrstuabcdefghijklmnopqrstuabcdefghijklmnopqrstuabcdefghijklmnopqrstuabcdefghijklmnopqrstu"; 
  4.         textView.setTextSize(55); 
  5.         textView.setText(textMultiLines); 
  6.          
  7.         FontMetrics fontMetrics2 = textView.getPaint().getFontMetrics(); 
  8.          
  9.          

  10.         // 计算每一个坐标 

  11.         float topY = fontMetrics2.top; 
  12.         float ascentY = fontMetrics2.ascent; 
  13.         float descentY =  fontMetrics2.descent; 
  14.         float bottomY = fontMetrics2.bottom; 
  15.         float leading =  fontMetrics2.leading; 
  16.          
  17.          

  18.         Log.d("fontMetrics", "topY     is:" + topY); 
  19.         Log.d("fontMetrics", "ascentY  is:" + ascentY); 
  20.         Log.d("fontMetrics", "descentY is:" + descentY); 
  21.         Log.d("fontMetrics", "bottomY  is:" + bottomY); 
  22.         Log.d("fontMetrics", "leading  is:" + leading);
复制代码
log如下:
205537717.png 

Note:显然,即使是多行的情况下,仍不能获得leading。

3,如果text是单行,获得各个属性将会怎样,代码如下:

  1. String text = "abcdefghijklmnopqrstu"; 
  2.         TextView textView = (TextView) findViewById(R.id.textView1); 
  3.         textView.setTextSize(55); 
  4.         textView.setText(text); 
  5.          
  6.         FontMetrics fontMetrics = textView.getPaint().getFontMetrics(); 

  7.         // 计算每一个坐标 
  8.         float baseX = 0; 
  9.         float baseY = 100; 
  10.         float topY = baseY + fontMetrics.top; 
  11.         float ascentY = baseY + fontMetrics.ascent; 
  12.         float descentY = baseY + fontMetrics.descent; 
  13.         float bottomY = baseY + fontMetrics.bottom; 
  14.         float leading =  fontMetrics.leading; 
  15.          
  16.          

  17.         Log.d("fontMetrics", "topY     is:" + fontMetrics.top); 
  18.         Log.d("fontMetrics", "ascentY  is:" + fontMetrics.ascent); 
  19.         Log.d("fontMetrics", "descentY is:" + fontMetrics.descent); 
  20.         Log.d("fontMetrics", "bottomY  is:" + fontMetrics.bottom); 
  21.         Log.d("fontMetrics", "leading  is:" + fontMetrics.leading);
复制代码
log如下图所示:
205739620.png 

Note:与多行获得的属性都相同。


结论:

A:虽然paint和textView所设置的textSize均为55,且为相同的字符串,但是两个获得的FontMetrics属性值并不相同。但是,我们发现,做除法之后,均为1.5倍关系。做出猜测,即Paint下,为mdpi对应的size,而TextView的size已经关联到了显示屏幕本身的320dip。所以获得属性值均为整1.5倍数

B:各种情况下,均未获得leading值。




204659118.png (19.78 KB, 下载次数: 0)

204659118.png


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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值