Android textview outline text

Question

Existe-t-il un moyen simple de faire en sorte que le texte puisse avoir un contour noir ? J'ai des vues de texte qui seront de différentes couleurs, mais certaines des couleurs n'apparaissent pas très bien sur mon fond, donc je me demandais s'il y avait un moyen simple d'obtenir un contour noir ou quelque chose d'autre qui ferait l'affaire ? Je préférerais ne pas avoir à créer une vue personnalisée et à créer un canevas, etc.

Answer 1

Vous pouvez mettre une ombre derrière le texte, ce qui peut souvent améliorer la lisibilité. Essayez de mettre des ombres noires translucides à 50 % sur votre texte vert. Vous trouverez des détails sur la façon de procéder ici : Android - ombre sur le texte ?

Pour vraiment ajouter un trait autour du texte, vous devez faire quelque chose d'un peu plus compliqué, comme ceci : Comment dessiner du texte avec une bordure sur une MapView dans Android ?

Answer 2

Alors, un peu tard, mais MagicTextView permet de faire des contours de texte, entre autres choses.

<com.qwerjk.better_text.MagicTextView
    xmlns:qwerjk="http://schemas.android.com/apk/res/com.qwerjk.better_text"
    android:textSize="78dp"
    android:textColor="#ff333333"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    qwerjk:strokeColor="#FFff0000"
    qwerjk:strokeJoinStyle="miter"
    qwerjk:strokeWidth="5"
    android:text="Magic" />

Note : J'ai fait ceci, et je poste plus pour le bien des futurs voyageurs que pour le PO. C'est à la limite du spam, mais étant sur le sujet, peut-être acceptable ?

Answer 3

Le cadre prend en charge le text-shadow mais pas le text-outline. Mais il y a une astuce : l'ombre est quelque chose qui est translucide et qui s'estompe. Redessinez l'ombre plusieurs fois et tout l'alpha s'additionne et le résultat est un contour.

Une mise en œuvre très simple étend TextView et remplace le draw(..) méthode. Chaque fois qu'un dessin est demandé, notre sous-classe effectue 5 à 10 dessins.

public class OutlineTextView extends TextView {

    // Constructors

    @Override
    public void draw(Canvas canvas) {
        for (int i = 0; i < 5; i++) {
            super.draw(canvas);
        }
    }

}

<OutlineTextView
    android:shadowColor="#000"
    android:shadowRadius="3.0" />

Answer 4

J'ai essayé de comprendre comment faire cela et je n'ai pas trouvé de bon guide en ligne, mais j'ai fini par trouver la solution. Comme Steve Pomeroy l'a suggéré, vous devez faire quelque chose de plus compliqué. Pour obtenir l'effet de texte contourné, il faut dessiner le texte deux fois : une première fois avec un contour épais, puis une seconde fois avec le texte principal par-dessus le contour. Mais la tâche est facilitée car vous pouvez très facilement adapter l'un des échantillons de code fournis avec le SDK, à savoir celui qui se trouve sous ce nom dans votre répertoire SDK : "/samples/Android-/ApiDemos/src/com/example/Android/apis/view/LabelView.java". Qui peut également être trouvé sur le site web du développeur Android ici .

Selon ce que vous faites, il est très facile de voir que vous n'aurez besoin que d'apporter des modifications mineures à ce code, comme le changer pour l'étendre à partir de TextView, etc. Avant de découvrir cet exemple, j'avais oublié de surcharger onMeasure() (ce que vous devez faire en plus de surcharger onDraw() comme indiqué dans le guide "Building Custom Components" sur le site Android Developer), ce qui explique en partie pourquoi j'avais des problèmes.

Une fois que tu as fait ça, tu peux faire ce que j'ai fait :

public class TextViewOutline extends TextView {

private Paint mTextPaint;
private Paint mTextPaintOutline; //add another paint attribute for your outline
...
//modify initTextViewOutline to setup the outline style
   private void initTextViewOutline() {
       mTextPaint = new Paint();
       mTextPaint.setAntiAlias(true);
       mTextPaint.setTextSize(16);
       mTextPaint.setColor(0xFF000000);
       mTextPaint.setStyle(Paint.Style.FILL);

       mTextPaintOutline = new Paint();
       mTextPaintOutline.setAntiAlias(true);
       mTextPaintOutline.setTextSize(16);
       mTextPaintOutline.setColor(0xFF000000);
       mTextPaintOutline.setStyle(Paint.Style.STROKE);
       mTextPaintOutline.setStrokeWidth(4);

       setPadding(3, 3, 3, 3);
}
...
//make sure to update other methods you've overridden to handle your new paint object
...
//and finally draw the text, mAscent refers to a member attribute which had
//a value assigned to it in the measureHeight and Width methods
   @Override
   protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       canvas.drawText(mText, getPaddingLeft(), getPaddingTop() - mAscent, 
           mTextPaintOutline);
       canvas.drawText(mText, getPaddingLeft(), getPaddingTop() - mAscent, mTextPaint);
   }

Ainsi, pour obtenir l'effet de texte contourné, vous dessinez le texte deux fois : une fois avec un contour épais et la deuxième fois, nous dessinons le texte principal par-dessus le contour.

Answer 5

Voici l'astuce que j'ai trouvée et qui fonctionne mieux que le trait de MagicTextView IMO

@Override
protected void onDraw(Canvas pCanvas) {
    int textColor = getTextColors().getDefaultColor();
    setTextColor(mOutlineColor); // your stroke's color
    getPaint().setStrokeWidth(10);
    getPaint().setStyle(Paint.Style.STROKE);
    super.onDraw(pCanvas);
    setTextColor(textColor);
    getPaint().setStrokeWidth(0);
    getPaint().setStyle(Paint.Style.FILL);
    super.onDraw(pCanvas);
}