Android中怎樣設定文字居中

戲耍明天發表於2014-12-22

        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.執行效果如圖:

                                                              


其中藍色文字就是我們的居中文字,看起來是不是垂直居中了呢。


相關文章