Android TextView drawText BaseLine understanding

Keywords: Android xml Java

Android TextView drawText BaseLine understanding
Solution: how to set the vertical center of drawn text in the box
1. getHeight/2 is set to drawText to draw coordinates, which cannot be centered
Upper code XML:

 <com.denganzhi.cusomerwidget.View.MyView
            android:layout_width="100dp"
            android:layout_height="100dp">
        </com.denganzhi.cusomerwidget.View.MyView>

Java code:

package com.denganzhi.cusomerwidget.View;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/**
 * Created by Administrator on 2020/3/14.
 */

public class MyView extends View {
    public MyView(Context context) {
        super(context);
    }

    Paint paint=null;
    Context context;
    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.context=context;
        //Set paintbrush
        paint=new Paint();
        paint.setColor(Color.BLACK);
        paint.setTextSize(80);
        paint.setTypeface(Typeface.DEFAULT_BOLD);  // Set bold
        paint.setAntiAlias(true);  // Eliminating sawtooth

    }
    public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    int pxW = dip2px(context,100);
    int pxH = dip2px(context,100);
    //pxW:200
    Log.e("denganzhi","pxW:"+pxW);
        // canvas palette, background color
        canvas.drawColor(Color.GREEN);
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        // These coordinates are now for baseline, top and ascent are negative numbers, which are above baseline
        // bottom and descent are positive numbers
       float top=fontMetrics.top;
       float bottom= fontMetrics.bottom;
       float asscent= fontMetrics.ascent;
       float descent=fontMetrics.descent;
       // top:-84.49219 bottom:21.679688 asscent:-74.21875descent:19.53125  Y100
        Log.e("denganzhi","top:"+top+" bottom:"+bottom+ " asscent:"+asscent+ "descent:"+descent +" centerY"+ getHeight()/2);
        // Brush, this coordinate is the coordinate of the lower left corner, wrong calculation method, baseLine box center point, text cannot be centered
          canvas.drawText("g I f",10,pxH/2,paint);
  // float newBaseLineY= getHeight()/2 + (( bottom-top)/2 - bottom);
   String drawStr="g I f";
   // X axis centered
        //Get the width of the text, similar to the above, but a rough result
        float measureText = paint.measureText(drawStr);
        Log.e("denganzhi1", "measureText="+measureText);
        // Center X-axis, box / 2-text width / 2 coordinates start to draw text
        float newBaseLineX = getWidth()/2 - measureText/2;
  // canvas.drawText(drawStr,newBaseLineX,newBaseLineY,paint);
    }

    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}

Text failed to center vertically

Analysis: the most coordinate of text drawing is getHeight()/2, baseline. The text is above the horizontal center axis. If you want to achieve the horizontal center of the text, move down

Correct code:

package com.denganzhi.cusomerwidget.View;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/**
 * Created by Administrator on 2020/3/14.
 */

public class MyView extends View {
    public MyView(Context context) {
        super(context);
    }

    Paint paint=null;
    Context context;
    public MyView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.context=context;
        //Set paintbrush
        paint=new Paint();
        paint.setColor(Color.BLACK);
        paint.setTextSize(80);
        paint.setTypeface(Typeface.DEFAULT_BOLD);  // Set bold
        paint.setAntiAlias(true);  // Eliminating sawtooth

    }
    public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    int pxW = dip2px(context,100);
    int pxH = dip2px(context,100);
    //pxW:200
    Log.e("denganzhi","pxW:"+pxW);
        // canvas palette, background color
        canvas.drawColor(Color.GREEN);
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();
        // These coordinates are now for baseline, top and ascent are negative numbers, which are above baseline
        // bottom and descent are positive numbers
       float top=fontMetrics.top;
       float bottom= fontMetrics.bottom;
       float asscent= fontMetrics.ascent;
       float descent=fontMetrics.descent;
       // top:-84.49219 bottom:21.679688 asscent:-74.21875descent:19.53125  Y100
        Log.e("denganzhi","top:"+top+" bottom:"+bottom+ " asscent:"+asscent+ "descent:"+descent +" centerY"+ getHeight()/2);
        // Brush, this coordinate is the coordinate of the lower left corner, wrong calculation method, baseLine box center point, text cannot be centered
      //    canvas.drawText("g me f",10,pxH/2,paint);
   float newBaseLineY= getHeight()/2 + (( bottom-top)/2 - bottom);
   String drawStr="g I f";
   // X axis centered
        //Get the width of the text, similar to the above, but a rough result
        float measureText = paint.measureText(drawStr);
        Log.e("denganzhi1", "measureText="+measureText);
        // Center X-axis, box / 2-text width / 2 coordinates start to draw text
        float newBaseLineX = getWidth()/2 - measureText/2;
   canvas.drawText(drawStr,newBaseLineX,newBaseLineY,paint);
    }

    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}

Output effect:

pxW:200
top:-84.49219 bottom:21.679688 asscent:-74.21875descent:19.53125 centerY100
measureText=155.0

Operation effect:

Effect analysis:

 

88 original articles published, 87 praised, 120000 visitors+
Private letter follow

Posted by Masna on Sat, 14 Mar 2020 08:09:40 -0700