Android中相信大家经常会用到自定义view,而自定义view中同样常常需要自己去绘制里面的图片与文字,绘制图片就不在这里讨论了,下面我们来讨论一下如何绘制“你想要位置的文字”。当然有什么不严格或是可以提高的地方希望大家踊跃指出。
一、使用canvas.drawText(text, x, y, paint);绘制文字。
二、确定参数:
text:想要绘制的文字。
x:文字左边界的横坐标。
y:注意:这里的y并不是文字左上角的纵坐标,而是文字的baseline(基准线)的纵坐标。所以我们常常看见我们所绘制出来的文字的位置与我们所设置的位置有所出入。
3.如何准确定位文字的y坐标。
首先我们先来了解一下android绘制文字的依据。如图:
通常文字的“实际高度(1跟5之间的距离)”会大于文字的“视觉高度(2跟4之间的距离)”,视觉高度——绘制完成后我们眼睛所能看见的,实际高度——文字真正所占的高度。我们通常绘制文字所定义的y,其实就是baseline所位置,所以给我们的视觉效果就是文字会向上偏移一定距离。下面我们在对图中参数做出一定说明:
1. 标号1是文字“实际”大小的顶端;
2. 标号2是文字“视觉”大小的顶端;
3. 标号3是文字的基准线;
4. 标号4是文字“视觉”大小的底端;
5 标号5是文字“实际”大小的底端;
6. |top|:是基准线与文字“实际”顶端的距离;
7. |bottom|:是基准线与文字“实际”底端的距离;
8. |ascent|:是基准线与文字“视觉”顶端的距离;
9. |descent|:是基准线与文字“视觉”底端的距离。
其中,top、bottom、ascent、descent(区分正负)是FontMetrics中的属性,而FontMetrics可以通过paint.getFontMetrics()获得。当然我们现在关心的是视觉效果,所以我们只需要用到ascent、descent。
三、最后步骤——计算文字下移偏移量。
通过前面我们可以看见,文字的显示位置比我们设置的位置靠上,现在我们在来计算应该向下移动多少才能到我们想要的位置。显然,我们只需要移动(|ascent| - |descent|)/ 2 就可以了(实际计算时注意正负)。下面我们就来看一个简单示例代码(让文字垂直居中):
1.自定义TextView:MyTextView
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.util.AttributeSet;
import android.widget.TextView;
public class MyTextView extends TextView{
private Paint paint;
public MyTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public MyTextView(Context context, AttributeSet attrs) {
super(context, attrs);
paint = new Paint();
paint.setColor(Color.BLUE);
paint.setTextSize(20);
}
public MyTextView(Context context) {
super(context);
}
@Override
protected void onDraw(Canvas canvas) {
FontMetrics fontMetrics = paint.getFontMetrics();
int height = getLayoutParams().height;
int y = (int) (height / 2 + Math.abs((fontMetrics.ascent + fontMetrics.descent) / 2));
canvas.drawText(getText().toString(), 10, y, paint);
super.onDraw(canvas);
}
}
2.布局文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.example.demo007.MyTextView
android:id="@+id/myTextView1"
android:layout_width="200dip"
android:layout_height="200dip"
android:background="#ffaa0000"
android:text="MyTextView" />
</LinearLayout>
3.运行效果如图:
其中蓝色文字就是我们的居中文字,看起来是不是垂直居中了呢。