web-dev-qa-db-fra.com

Comment faire briller le texte?

Pouvons-nous appliquer un effet lumineux à tout texte comme indiqué ci-dessous:

enter image description here

Mise à jour: Veuillez également me dire de quoi j'ai besoin pour créer quelque chose comme ça:enter image description here

Ai-je besoin d'une police spéciale pour cela?

androiduser-interfacegraphicstextview
78
Farhan

Que diriez-vous de définir une ombre bleue pour la vue de texte en utilisant Android:shadowColor et réglage Android:shadowDx et Android:shadowDy à zéro, avec un assez gros Android:shadowRadius?

114
Bemmu

Pour des effets de texte avancés:

Existe-t-il un moyen d'ajouter une ombre intérieure à une TextView sur Android?

En particulier: MagicTextView

Je l'ai utilisé pour les LED HD Widgets: https://market.Android.com/details?id=cloudtv.hdwidgets

6
radley
<TextView
    Android:id="@+id/glowingText"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:padding="5dp"
    Android:shadowColor="#cf1d1d"
    Android:shadowDx="0.0"
    Android:shadowDy="0.0"
    Android:shadowRadius="8"
    Android:text="Radioactive"
    Android:textColor="#cf1d1d"
    Android:textSize="20sp" />

je recommande d'ajouter un rembourrage, car l'effet d'ombre/lueur augmente l'espace nécessaire.

Pour les polices personnalisées, créez un dossier avec le nom "polices" dans votre dossier d'actifs. Ensuite, placez vos fichiers .ttf à l'intérieur. Vous pouvez convertir des fichiers .otf en ligne, il existe de nombreux sites Web.

Mettez ceci dans votre classe

Typeface myFont = Typeface.createFromAsset(getAssets(), "fonts/yourCustomFont.ttf");

et voici comment vous définissez la police sur votre affichage de texte

yourTextView.setTypeface(myFont);

j'ai testé l'effet de lueur et cela fonctionne aussi avec des polices personnalisées. Gardez à l'esprit que vous devrez peut-être réduire la taille de votre texte car les polices personnalisées sont pour une raison quelconque plus grandes. J'ai utilisé la moitié de la taille sp que j'utiliserais normalement.

6
ORY

Bemmu a raison. C'est de loin le meilleur moyen sans passer par la route OpenGL complète. Vous voulez également vous assurer que le TextView a un rembourrage aqueux défini de chaque côté, sinon une ombre de grand rayon qui correspond à la couleur du texte d'origine (ou une légère teinte plus claire) affichera l'écrêtage de l'ombre portée de chaque côté du TextView.

Vous pourriez même être en mesure d'obtenir un effet de flou encore plus important en créant un groupe de vues en couches avec des effets d'ombre portée croissants/décroissants (mais vous ne savez pas à quoi ressemblerait la perf de rendu)

2
MrSewerPickle

J'avais une solution de contournement pour atteindre l'exigence, mais toujours pas parfaite ....

Le résultat de l'échantillon:

https://cloud.githubusercontent.com/assets/5714437/3962552/d5c29fee-276c-11e4-9ea3-d1b31d8c54ac.png

Point clé: * Donnez une peinture et dessinez huit fois dans onDraw() à partir de TextView *

public class ShadowTextView extends TextView {
private final Paint mStrokePaint = new Paint();
private final Rect mTextBounds = new Rect();
public ShadowTextView(Context context) {
    super(context);
    setupPaint();
}

public ShadowTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    setupPaint();
}

public ShadowTextView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    setupPaint();
}

protected void onDraw(Canvas canvas) {
    // Get the text to print
    final String text = super.getText().toString();
    // Figure out the drawing coordinates
    super.getPaint().getTextBounds(text, 0, text.length(), mTextBounds);
    float radius = (float) Math.hypot(3, 3);
    // draw everything
    drawShadow(canvas, text, 0, 3);
    drawShadow(canvas, text, 0, -3);
    drawShadow(canvas, text, 3, 0);
    drawShadow(canvas, text, -3, 0);

    drawShadow(canvas, text, radius, radius);
    drawShadow(canvas, text, -radius, radius);
    drawShadow(canvas, text, radius, -radius);
    drawShadow(canvas, text, -radius, radius);

    super.onDraw(canvas);
}

private void drawShadow (Canvas canvas, String text, float dx, float dy) {
    mStrokePaint.setShadowLayer(3, dx, dy, Color.BLACK);
    mStrokePaint.setXfermode(new PorterDuffXfermode(Mode.SRC_ATOP));
    canvas.drawText(text,
            0.0f + this.getPaddingLeft() * 1.0f , (super.getHeight() + mTextBounds.height()) * 0.5f,
            mStrokePaint);
}

private final void setupPaint() {
    mStrokePaint.setAntiAlias(true);
    mStrokePaint.setStyle(Paint.Style.FILL);
    // setup stroke
    mStrokePaint.setColor(0x75000000);
    mStrokePaint.setStrokeWidth(5);
    mStrokePaint.setTextSize(super.getTextSize());
    mStrokePaint.setFlags(super.getPaintFlags());
    mStrokePaint.setTypeface(super.getTypeface());
    mStrokePaint.setStrokeCap(Cap.ROUND);
    mStrokePaint.setStrokeJoin(Join.ROUND);
}

}
1
Hsiao-Ting