android - tamaño - ¿Cómo mostrar texto con fondo de dos colores?

estilos de texto css ejemplos

Question

Necesito crear una aplicación para Android, donde el texto de 2 colores se mostrará en el fondo de 2 colores. Ver imagen a la izquierda. Luego, la línea debe moverse con animación y la imagen del resultado debe estar 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

En la API de gráficos de Android utilizaría la ruta del clip para crear la región del clip. Pasos:

• lienzo de relleno con color negro:

• Dibuja tu texto blanco sobre lienzo:

• cree una ruta de clip y aplíquela a su lienzo (consulte Canvas.clipPath(Path) )
• lienzo de relleno con color blanco:

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

Answer 2

Esta no es una respuesta completa, solo estoy dando sugerencias. Conozco una posible solución, ¿cómo puede hacer la imagen de la izquierda y la de la derecha? Pero la parte que no puedo entender es la animación. Quiero decir si quieres una animación suave entre estados. Si solo quieres intercambiar vistas, es fácil, solo toma una vista de fliper y no lo creo, pero no creo que quieras lograr eso ...

Una de las cosas que puede hacer es establecer el fondo, digamos 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, tendrá que hacer un cálculo preciso de cuántas letras serán negras y cuántas blancas, pero ese es el concepto

Answer 3

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

Aquí es cómo podría verse:

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: texto enmascarado.