Texto da tela do Android Center

191

Estou tentando exibir um texto usando o código abaixo. O problema é que o texto não está centralizado horizontalmente. Quando defino as coordenadas para drawText, ele define a parte inferior do texto nessa posição. Gostaria que o texto fosse desenhado para que o texto também se centrasse horizontalmente.

Esta é uma imagem para exibir ainda mais o meu problema:

Captura de tela

@Override
protected void onDraw(Canvas canvas) {
    // TODO Auto-generated method stub
    super.onDraw(canvas);
    //canvas.drawRGB(2, 2, 200);
    Paint textPaint = new Paint();
    textPaint.setARGB(200, 254, 0, 0);
    textPaint.setTextAlign(Align.CENTER);
    textPaint.setTypeface(font);
    textPaint.setTextSize(300);
    canvas.drawText("Hello", canvas.getWidth()/2, canvas.getHeight()/2  , textPaint);
}
Sebastian
fonte
20
Eu não declararia seu objeto de pintura dentro do evento onDraw. Ele é recriado cada vez que é redesenhado. Considere torná-lo uma variável de classe privada.
Christopher Rathgeb
8
Companheiro! Mencione que o link da sua imagem é NSFW! Não pretendo ser pudico, mas não preciso de anúncios com mulheres de topless aparecendo na minha tela no escritório.
Michael Scheper
5
@MichaelScheper Desculpe, atualizei o link!
21714 Sebastian
23
@Sebastian Ei, você ainda conseguiu esse link?
31516 S.Lukas
@ S.Lukas hhahaha
BOTJr.

Respostas:

375

Tente o seguinte:

 int xPos = (canvas.getWidth() / 2);
 int yPos = (int) ((canvas.getHeight() / 2) - ((textPaint.descent() + textPaint.ascent()) / 2)) ; 
 //((textPaint.descent() + textPaint.ascent()) / 2) is the distance from the baseline to the center.

 canvas.drawText("Hello", xPos, yPos, textPaint);
Arun George
fonte
10
Ótima resposta. Para mim, usei o seguinte, pois eu precisava centralizar totalmente o texto horizontalmente, em vez do texto, para começar na posição central: int xPos = (Largura - textPaint.TextSize * Math.Abs ​​(_text.Length / 2)) / 2; Não tenho certeza se existe uma maneira melhor de fazer isso.
paj7777
E provavelmente é melhor converter _text.Length para um float, pois obviamente não funcionará para comprimentos de texto ímpares.
paj7777
61
paj7777, isso não é necessário se você definir textPaint.setTextAlign (Align.CENTER);
Costi Muraru
@ paj7777 Isso funcionaria apenas para fontes de largura fixa. Além disso, você não precisa converter para um flutuador; se você dividir por um flutuador, o resultado será um flutuador. Por exemplo, float halfLength = text.length() / 2f;isso é chamado de promoção de tipo .
Michael Scheper
2
Comparei essa abordagem (= centralize com Paint.descent()e Paint.ascent()) com a abordagem centralizada no texto Paint.getTextBounds()na minha resposta abaixo. Paint.descent()e Paint.ascent()não leve em consideração o texto real. (Você pode reconhecer essa imprecisão na captura de tela na minha postagem abaixo.) É por isso que eu recomendaria essa abordagem. A abordagem com Paint.getTextBounds()parece funcionar mais precisa.
perfil
215

Centralize com Paint.getTextBounds () :

insira a descrição da imagem aqui

private Rect r = new Rect();

private void drawCenter(Canvas canvas, Paint paint, String text) {
    canvas.getClipBounds(r);
    int cHeight = r.height();
    int cWidth = r.width();
    paint.setTextAlign(Paint.Align.LEFT);
    paint.getTextBounds(text, 0, text.length(), r);
    float x = cWidth / 2f - r.width() / 2f - r.left;
    float y = cHeight / 2f + r.height() / 2f - r.bottom;
    canvas.drawText(text, x, y, paint);
}
  • Paint.Align.CENTER não significa que o ponto de referência do texto esteja centralizado verticalmente. O ponto de referência está sempre na linha de base. Então, por que não usar o Paint.Align.LEFT ? Você precisa calcular o ponto de referência de qualquer maneira.

  • Paint.descent () tem a desvantagem de não considerar o texto real. Paint.descent () recupera o mesmo valor, independentemente de o texto conter letras com descidas ou não. É por isso que eu uso o r.bottom .

  • Eu tive alguns problemas com o Canvas.getHeight () se a API <16. É por isso que eu uso o Canvas.getClipBounds (Rect) . (Não use Canvas.getClipBounds (). GetHeight () , pois aloca memória para um Rect .)

  • Por motivos de desempenho, você deve alocar objetos antes que eles sejam usados ​​no onDraw () . Como drawCenter () será chamado dentro de onDraw (), o objeto Rect r será pré-alocado como um campo aqui.


Tentei colocar o código das duas principais respostas no meu próprio código (agosto de 2015) e fiz uma captura de tela para comparar os resultados:

texto centrado em três versões

O texto deve estar centralizado dentro do retângulo preenchido em vermelho. Meu código produz o texto em branco, os outros dois códigos produzem todo o texto em cinza (eles são na verdade o mesmo, sobrepostos). O texto em cinza está um pouco baixo demais e dois à direita.

Foi assim que fiz o teste:

import android.app.Activity;
import android.content.Context;
import android.content.pm.ActivityInfo;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;

class MyView extends View {

    private static String LABEL = "long";
    private static float TEXT_HEIGHT_RATIO = 0.82f;

    private FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(0, 0);
    private Rect r = new Rect();
    private Paint paint = new Paint();
    private Paint rectPaint = new Paint();

    public MyView(Context context) {
        super(context);
    }

    private void drawTextBounds(Canvas canvas, Rect rect, int x, int y) {
        rectPaint.setColor(Color.rgb(0, 0, 0));
        rectPaint.setStyle(Paint.Style.STROKE);
        rectPaint.setStrokeWidth(3f);
        rect.offset(x, y);
        canvas.drawRect(rect, rectPaint);
    }

    // andreas1724 (white color):
    private void draw1(Canvas canvas, Paint paint, String text) {
        paint.setTextAlign(Paint.Align.LEFT);
        paint.setColor(Color.rgb(255, 255, 255));
        canvas.getClipBounds(r);
        int cHeight = r.height();
        int cWidth = r.width();
        paint.getTextBounds(text, 0, text.length(), r);
        float x = cWidth / 2f - r.width() / 2f - r.left;
        float y = cHeight / 2f + r.height() / 2f - r.bottom;
        canvas.drawText(text, x, y, paint);
        drawTextBounds(canvas, r, (int) x, (int) y);
    }

    // Arun George (light green color):
    private void draw2(Canvas canvas, Paint textPaint, String text) {
        textPaint.setTextAlign(Paint.Align.CENTER);
        textPaint.setColor(Color.argb(100, 0, 255, 0));
        int xPos = (canvas.getWidth() / 2);
        int yPos = (int) ((canvas.getHeight() / 2) - ((textPaint.descent() + textPaint.ascent()) / 2));
        canvas.drawText(text, xPos, yPos, textPaint);
    }

    // VinceStyling (light blue color):
    private void draw3(Canvas yourCanvas, Paint mPaint, String pageTitle) {
        mPaint.setTextAlign(Paint.Align.LEFT);
        mPaint.setColor(Color.argb(100, 0, 0, 255));
        r = yourCanvas.getClipBounds();
        RectF bounds = new RectF(r);
        bounds.right = mPaint.measureText(pageTitle, 0, pageTitle.length());
        bounds.bottom = mPaint.descent() - mPaint.ascent();
        bounds.left += (r.width() - bounds.right) / 2.0f;
        bounds.top += (r.height() - bounds.bottom) / 2.0f;
        yourCanvas.drawText(pageTitle, bounds.left, bounds.top - mPaint.ascent(), mPaint);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        int margin = 10;
        int width = w - 2 * margin;
        int height = h - 2 * margin;
        params.width = width;
        params.height = height;
        params.leftMargin = margin;
        params.topMargin = margin;
        setLayoutParams(params);
        paint.setTextSize(height * TEXT_HEIGHT_RATIO);
        paint.setAntiAlias(true);
        paint.setTypeface(Typeface.create(Typeface.SERIF, Typeface.BOLD_ITALIC));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.rgb(255, 0, 0));
        draw1(canvas, paint, LABEL);
        draw2(canvas, paint, LABEL);
        draw3(canvas, paint, LABEL);
    }
}

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setRequestedOrientation (ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        FrameLayout container = new FrameLayout(this);
        container.setLayoutParams(new ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT));
        container.addView(new MyView(this));
        setContentView(container);
    }
}
andreas1724
fonte
1
Muito obrigado .. Sua lógica realmente me ajudou muito.
Sujay ONU
Muito obrigado .. Sua lógica também me ajudou muito!
LiuWenbin_NO.
Esta é a única resposta que realmente centraliza o texto.
Joery
63

Alinhar verticalmente é difícil porque aconteceu a descida e a subida do texto, muitos caras usaram o Paint.getTextBounds () para recuperar TextWidth e TextHeight, mas isso não torna o texto centralizado. Aqui, podemos usar o Paint.measureText () para calcular a TextWidth, a TextHeight, que simplesmente subtraímos com descida e subida; depois, temos a abordagem mais aproximada do TextSize; o trabalho a seguir é bastante fácil para o outro.

// the Paint instance(should be assign as a field of class).
Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setTextSize(getResources().getDimension(R.dimen.btn_textsize));

// the display area.
Rect areaRect = new Rect(0, 0, 240, 60);

// draw the background style (pure color or image)
mPaint.setColor(Color.BLACK);
yourCanvas.drawRect(areaRect, mPaint);

String pageTitle = "文字小说";

RectF bounds = new RectF(areaRect);
// measure text width
bounds.right = mPaint.measureText(pageTitle, 0, pageTitle.length());
// measure text height
bounds.bottom = mPaint.descent() - mPaint.ascent();

bounds.left += (areaRect.width() - bounds.right) / 2.0f;
bounds.top += (areaRect.height() - bounds.bottom) / 2.0f;

mPaint.setColor(Color.WHITE);
yourCanvas.drawText(pageTitle, bounds.left, bounds.top - mPaint.ascent(), mPaint);

captura de tela pelo código

A propósito, é altamente recomendável usar RectF em vez de Rect, porque as posições precisam de valores mais precisos. Na minha experiência, o RectF fez o desvio superior e inferior de apenas um pixel no dispositivo xhdpi; o Rect seria mais dois.

VinceStyling
fonte
Como está escrito, o var "Paint" é confuso. Como é atribuído? como ele sabe a subida e descida do texto para bounds.bottom?
RoundSparrow hilltx
1
sim, otimizei minha resposta para isso, dê uma olhada.
VinceStyling 23/05
Obrigado por salvar meu precioso tempo))
Andrey
16

Seu código está desenhando o centro da linha de base do texto, no centro da vista. Para centralizar o texto em algum momento, x, y, você precisa calcular o centro do texto e colocá- lo no ponto.

Este método desenhará o texto centrado no ponto x, y. Se você passar o centro da sua visualização, ele desenhará o texto centralizado.

private void drawTextCentered(String text, int x, int y, Paint paint, Canvas canvas) {
    int xPos = x - (int)(paint.measureText(text)/2);
    int yPos = (int) (y - ((textPaint.descent() + textPaint.ascent()) / 2)) ;

    canvas.drawText(text, xPos, yPos, textPaint);
}
Borislav Markov
fonte
@MarcioGranzotto sua a android.graphics.Paintser usado para desenhar o texto
William Reed
4

Acho que a melhor solução para centralizar o texto é a seguinte:

textPaint.setTextAlign(Paint.Align.CENTER);
//textPaint is the Paint object being used to draw the text (it must be initialized beforehand)
float textY=center.y;
float textX=center.x; 
// in this case, center.x and center.y represent the coordinates of the center of the rectangle in which the text is being placed
canvas.drawText(text,textX,textY,textPaint);    `
Daniel
fonte
Parece exatamente o caminho, o questionador tentou centralizar o texto. O texto não será centralizado verticalmente porque Paint.Align.Center não significa que o ponto de referência do texto seja centralizado verticalmente.
precisa saber é o seguinte
3

funciona para eu usar: textPaint.textAlign = Paint.Align.CENTER com textPaint.getTextBounds

private fun drawNumber(i: Int, canvas: Canvas, translate: Float) {
            val text = "$i"
            textPaint.textAlign = Paint.Align.CENTER
            textPaint.getTextBounds(text, 0, text.length, textBound)

            canvas.drawText(
                    "$i",
                    translate + circleRadius,
                    (height / 2 + textBound.height() / 2).toFloat(),
                    textPaint
            )
        }

O resultado é:

insira a descrição da imagem aqui

Serg Burlaka
fonte
1

Eu crio um método para simplificar isso:

    public static void drawCenterText(String text, RectF rectF, Canvas canvas, Paint paint) {
    Paint.Align align = paint.getTextAlign();
    float x;
    float y;
    //x
    if (align == Paint.Align.LEFT) {
        x = rectF.centerX() - paint.measureText(text) / 2;
    } else if (align == Paint.Align.CENTER) {
        x = rectF.centerX();
    } else {
        x = rectF.centerX() + paint.measureText(text) / 2;
    }
    //y
    metrics = paint.getFontMetrics();
    float acent = Math.abs(metrics.ascent);
    float descent = Math.abs(metrics.descent);
    y = rectF.centerY() + (acent - descent) / 2f;
    canvas.drawText(text, x, y, paint);

    Log.e("ghui", "top:" + metrics.top + ",ascent:" + metrics.ascent
            + ",dscent:" + metrics.descent + ",leading:" + metrics.leading + ",bottom" + metrics.bottom);
}

rectF é a área que você deseja desenhar o texto, é isso. Detalhes

Seth
fonte
1

Se estivermos usando layout estático

mStaticLayout = new StaticLayout(mText, mTextPaint, mTextWidth,
                Layout.Alignment.ALIGN_CENTER, 1.0f, 0, true);

Layout.Alignment.ALIGN_CENTER isso fará o truque. O layout estático também tem muitas outras vantagens.

Referência: documentação do Android

hushed_voice
fonte
1

Isso funcionou para mim:

 paint.setTextAlign(Paint.Align.CENTER);
        int xPos = (newWidth / 2);
        int yPos = (newHeight / 2);
        canvas.drawText("Hello", xPos, yPos, paint);

se alguém encontrar algum problema, por favor me avise

JSONParser
fonte
ele começará a escrever texto do ponto central, mas o texto inteiro não estará no centro
M Shaban Ali
0

No meu caso, não precisei colocar o texto no meio de uma tela, mas em uma roda que gira. Embora eu tivesse que usar esse código para ter sucesso:

fun getTextRect(textSize: Float, textPaint: TextPaint, string: String) : PointF {
    val rect = RectF(left, top, right, bottom)
    val rectHeight = Rect()
    val cx = rect.centerX()
    val cy = rect.centerY()

    textPaint.getTextBounds(string, 0, string.length, rectHeight)
    val y = cy + rectHeight.height()/2
    val x = cx - textPaint.measureText(string)/2

    return PointF(x, y)
}

Então eu chamo esse método da classe View:

private fun drawText(canvas: Canvas, paint: TextPaint, text: String, string: String) {
    val pointF = getTextRect(paint.textSize, textPaint, string)
    canvas.drawText(text, pointF!!.x, pointF.y, paint)
}
Mattia Ferigutti
fonte