Comment afficher du texte avec un fond bicolore?

Question

Je dois créer une application pour Android, où le texte en 2 couleurs sera affiché sur l'arrière-plan bicolore. Voir l'image sur la gauche. Ensuite, la ligne devrait être déplacée avec animation et l'image du résultat devrait être comme sur l'image à droite.

je les questions suivantes:

1. Dois-je utiliser un moteur 2D pour le faire? Ou, sera-t-il acceptable d'utiliser des vues standard? Comment faire?
2. Comment dessiner le texte comme sur les images?

---------

Answer 1

Ce n'est pas réponse complète que je viens de donner des suggestions. Je connais une solution possible comment pouvez-vous faire l'image sur la gauche et l'image sur la droite. Mais la partie que je ne peux pas comprendre est l'animation. Je veux dire si vous voulez une animation fluide entre les états. Si vous voulez juste échanger des vues c'est facile, il suffit de prendre une vue flip et ça, mais je ne pense pas que vous voulez y arriver ...

Une des choses que vous pouvez faire est de définir le fond disons avec 320 largeur et disons 0-160 blanc et 160-320 noir. Puis

tv.setText(Html.fromHtml("<font color='black'>black on white</font> <font color='white'>white on black</font>")); 

Bien sûr, vous aurez besoin de faire un calcul précis de combien de lettres seront noires et combien de blanc, mais c'est le concept

Answer 2

Dans Android graphiques API i utiliserais Clip chemin pour créer la région de clip. Étapes:

• toile de remplissage avec la couleur noire:

• dessiner votre texte blanc sur toile:

• créer le chemin clip et l'appliquer à votre toile (voir Canvas.clipPath(Path))
• remplissage toile couleur blanche:

• dessiner le même texte que dans l'étape 2 en noir sur toile :

Answer 3

Vous pouvez créer une vue personnalisée qui masque votre texte à l'aide d'un filtre PorterDuff.

Voici comment il pourrait regarder:

public class MaskedText extends View { 

    String sText; 
    Paint p, pReplace, pMask; 

    public MaskedText(Context context, AttributeSet attrs) { 
     super(context, attrs); 

     // base paint for you text 
     p = new Paint(Paint.ANTI_ALIAS_FLAG); 
     p.setTextSize(40); 
     p.setTextAlign(Paint.Align.CENTER); 
     p.setColor(0xFF000000); 
     p.setStyle(Paint.Style.FILL); 

     // replacement color you want for your the part of the text that is masked 
     pReplace = new Paint(p); 
     pReplace.setColor(0xFFFFFFFF); 
     pReplace.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OVER)); 

     // color of the drawing you want to mask with text 
     pMask = new Paint(); 
     pMask.setColor(0xFFFF0000); 
     pMask.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)); 
    } 

    public void setText(String text) { 
     sText = text; 
    } 

    @Override 
    public void onDraw(Canvas canvas) { 
     super.onDraw(canvas); 

     canvas.save(); 

     // here you draw the text with the base color. In your case black 
     canvas.drawText(sText, getWidth()/2, getHeight()/2, p); 

     // then draw the shape any graphics that you want on top of it 
     canvas.drawCircle(getWidth()/2, getHeight()/2, 50, pMask); 
     canvas.drawCircle(getWidth()/2 + 50, getHeight()/2 + 5, 20, pMask); 
     canvas.drawCircle(getWidth()/2 - 45, getHeight()/2 - 10, 30, pMask); 

     // finally redraw the text masking the graphics 
     canvas.drawText(sText, getWidth()/2, getHeight()/2, pReplace); 

     canvas.restore(); 
    } 
} 

Ceci est le résultat: Masked text