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

http://mikewang.blog.51cto.com/3826268/871765

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

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

要点如下:

1. 基准点是baseline

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

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

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

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

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

 

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

 

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

pic-1

 

pic-2

 

pic-3

 

pic-4

 

pic-5

pic-6

(二) 测试

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.         Paint textPaint = new Paint( Paint.ANTI_ALIAS_FLAG);
  9.         textPaint.setTextSize( 55);
  10.         textPaint.setColor( Color.WHITE);
  11.         // FontMetrics对象
  12.         FontMetrics fontMetrics = textPaint.getFontMetrics();
  13.         String text = “abcdefghijklmnopqrstu”;
  14.         // 计算每一个坐标
  15.         float baseX = 0;
  16.         float baseY = 100;
  17.         float topY = baseY + fontMetrics.top;
  18.         float ascentY = baseY + fontMetrics.ascent;
  19.         float descentY = baseY + fontMetrics.descent;
  20.         float bottomY = baseY + fontMetrics.bottom;
  21.         float leading = baseY + fontMetrics.leading;
  22.         Log.d(“fontMetrics”“baseX    is:” + 0);
  23.         Log.d(“fontMetrics”“baseY    is:” + 100);
  24.         Log.d(“fontMetrics”“topY     is:” + topY);
  25.         Log.d(“fontMetrics”“ascentY  is:” + ascentY);
  26.         Log.d(“fontMetrics”“descentY is:” + descentY);
  27.         Log.d(“fontMetrics”“bottomY  is:” + bottomY);
  28.         Log.d(“fontMetrics”“leading  is:” + leading);
  29.         Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.fontmetrics);
  30.         Bitmap mutableBitmap = bitmap.copy(Bitmap.Config.ARGB_8888, true);
  31.         canvas  = new Canvas(mutableBitmap);
  32.         // 绘制文本
  33.         canvas.drawText(text, baseX, baseY, textPaint);
  34.         // BaseLine描画
  35.         Paint baseLinePaint = new Paint( Paint.ANTI_ALIAS_FLAG);
  36.         baseLinePaint.setColor( Color.RED);
  37.         canvas.drawLine(0, baseY, canvas.getWidth(), baseY, baseLinePaint);
  38.         // Base描画
  39.         canvas.drawCircle( baseX, baseY, 5, baseLinePaint);
  40.         // TopLine描画
  41.         Paint topLinePaint = new Paint( Paint.ANTI_ALIAS_FLAG);
  42.         topLinePaint.setColor( Color.LTGRAY);
  43.         canvas.drawLine(0, topY, canvas.getWidth(), topY, topLinePaint);
  44.         // AscentLine描画
  45.         Paint ascentLinePaint = new Paint( Paint.ANTI_ALIAS_FLAG);
  46.         ascentLinePaint.setColor( Color.GREEN);
  47.         canvas.drawLine(0, ascentY, canvas.getWidth(), ascentY, ascentLinePaint);
  48.         // DescentLine描画
  49.         Paint descentLinePaint = new Paint( Paint.ANTI_ALIAS_FLAG);
  50.         descentLinePaint.setColor( Color.YELLOW);
  51.         canvas.drawLine(0, descentY, canvas.getWidth(), descentY, descentLinePaint);
  52.         // ButtomLine描画
  53.         Paint bottomLinePaint = new Paint( Paint.ANTI_ALIAS_FLAG);
  54.         bottomLinePaint.setColor( Color.MAGENTA);
  55.         canvas.drawLine(0, bottomY, canvas.getWidth(), bottomY, bottomLinePaint);
  56.         ImageView imageView = (ImageView) findViewById(R.id.imageView1);
  57.         imageView.setImageBitmap(mutableBitmap);
  58.     }
  59. }

log显示如下:

Note1:注意到各个数值都是整数,这是建立在baseY=100的情况下,去掉baseY,重新运行代码,log如下:

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.         FontMetrics fontMetrics2 = textView.getPaint().getFontMetrics();
  7.         // 计算每一个坐标
  8.         float topY = fontMetrics2.top;
  9.         float ascentY = fontMetrics2.ascent;
  10.         float descentY =  fontMetrics2.descent;
  11.         float bottomY = fontMetrics2.bottom;
  12.         float leading =  fontMetrics2.leading;
  13.         Log.d(“fontMetrics”“topY     is:” + topY);
  14.         Log.d(“fontMetrics”“ascentY  is:” + ascentY);
  15.         Log.d(“fontMetrics”“descentY is:” + descentY);
  16.         Log.d(“fontMetrics”“bottomY  is:” + bottomY);
  17.         Log.d(“fontMetrics”“leading  is:” + leading);

log如下:

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.         FontMetrics fontMetrics = textView.getPaint().getFontMetrics();
  6.         // 计算每一个坐标
  7.         float baseX = 0;
  8.         float baseY = 100;
  9.         float topY = baseY + fontMetrics.top;
  10.         float ascentY = baseY + fontMetrics.ascent;
  11.         float descentY = baseY + fontMetrics.descent;
  12.         float bottomY = baseY + fontMetrics.bottom;
  13.         float leading =  fontMetrics.leading;
  14.         Log.d(“fontMetrics”“topY     is:” + fontMetrics.top);
  15.         Log.d(“fontMetrics”“ascentY  is:” + fontMetrics.ascent);
  16.         Log.d(“fontMetrics”“descentY is:” + fontMetrics.descent);
  17.         Log.d(“fontMetrics”“bottomY  is:” + fontMetrics.bottom);
  18.         Log.d(“fontMetrics”“leading  is:” + fontMetrics.leading);

log如下图所示:

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

 

结论:

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

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