Cómo mostrar texto con fondo de dos colores?

Question

Necesito crear una aplicación para Android, donde el texto de 2 colores se mostrará en el fondo de 2 colores. Ver la imagen de la izquierda. Luego, la línea debe moverse con animación y la imagen resultante debe ser como en la imagen de la derecha.

tengo las siguientes preguntas:

1. ¿Debo usar algún motor 2D para hacer esto? O, ¿estará bien usar vistas estándar? ¿Cómo hacerlo?
2. ¿Cómo dibujar el texto como en las imágenes?

---------

Answer 1

Ésta no es la respuesta completa acabo de dar sugerencias. Conozco una posible solución, ¿cómo se puede hacer la imagen de la izquierda y la de la derecha? Pero la parte que no puedo descifrar es la animación. Quiero decir si quieres animación suave entre estados. Si solo quiere intercambiar vistas, es muy fácil, simplemente tome una vista flipper y eso, pero no creo que quiera lograr eso ...

Una de las cosas que puede hacer es establecer el fondo let decir con 320 de ancho y digamos 0-160 blanco y 160-320 negro. Entonces

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

por supuesto que tendrá que hacer un cálculo preciso de cuántas letras serán de color negro y el número de blanco, pero que es el concepto

Answer 2

En Android gráficos API, lo usaría pinza ruta para crear la región del clip. Pasos:

• lona relleno con el color negro:

• llamar su texto blanco sobre lienzo:

• crear el camino del clip y aplicarlo a su lienzo (ver Canvas.clipPath(Path))
• tela relleno con el color blanco:

• dibujar el mismo texto que en el paso 2 en negro sobre lienzo :

Answer 3

Puede crear una vista personalizada que enmascare su texto usando un filtro PorterDuff.

Así es como podría parecer:

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(); 
    } 
} 

Este es el resultado: Masked text