Android carácter por carácter de texto de la pantalla de animación

Alguien sabe algún método eficiente de realizar una animación que lo que se tiene que hacer es mostrar un texto, carácter por carácter? Como:

T
Th
Thi

Esto me
Este es

Y así sucesivamente.

Gracias!

  • bien se ve impresionante, pero mi opinión, palabra por palabra mejor. esto, esto es…
InformationsquelleAutor zegnus | 2011-07-14

11 Kommentare

  1. 100

    Esto puede no ser la solución más elegante, pero la más sencilla es probablemente una rápida subclase de TextView con un Handler que actualiza el texto de cada tan a menudo, hasta que la secuencia completa se muestra:

    public class Typewriter extends TextView {
    
        private CharSequence mText;
        private int mIndex;
        private long mDelay = 500; //Default 500ms delay
    
    
        public Typewriter(Context context) {
            super(context);
        }
    
        public Typewriter(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        private Handler mHandler = new Handler();
        private Runnable characterAdder = new Runnable() {
            @Override
            public void run() {
                setText(mText.subSequence(0, mIndex++));
                if(mIndex <= mText.length()) {
                    mHandler.postDelayed(characterAdder, mDelay);
                }
            }
        };
    
        public void animateText(CharSequence text) {
            mText = text;
            mIndex = 0;
    
            setText("");
            mHandler.removeCallbacks(characterAdder);
            mHandler.postDelayed(characterAdder, mDelay);
        }
    
        public void setCharacterDelay(long millis) {
            mDelay = millis;
        }
    }

    Usted puede utilizar esto en una Actividad así:

    public class MyActivity extends Activity {
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            Typewriter writer = new Typewriter(this);
            setContentView(writer);
    
            //Add a character every 150ms
            writer.setCharacterDelay(150);
            writer.animateText("Sample String");
        }
    }

    Si quieres algunos efectos de animación con cada letra añadido, quizá un aspecto en la creación de subclases TextSwitcher lugar.

    Espero que ayude!

    • Super greattttttt : -) ¿cómo puedo hacer si quiero usar diseño de un xml de diseño de fondo y se benefician de que la animación? o ¿cómo puedo hacer para agregar un fondo especial a la escritora??
    • youssoua, dependiendo del paquete de su máquina de escribir de la clase está en, usted podría usar algo como <com.yourpackage.somethingTypewriter en lugar de <TextView en el xml del layout. Como es un TextView aún, usted puede utilizar todos los atributos xml haría normalmente.
    • Puedo obtener sin resolver método para setContentView
    • ¿Tengo que usar el escritor de mi setContentFunction() ??
    • escritor.setCharacterDelay(150); el escritor.animateText(«Ejemplo de Cadena»); // Después de usar estas dos líneas cómo voy a imprimir todo esto en mi textView ? Por favor, dime
    • Yo extendida @Devunwired del código para incluir a animar a escribir, borrar, poner en pausa y la ejecución arbitraria runnables. Consulte gist.github.com/claudijo/0cf9f43705efadfeb852
    • Cómo agregar un onAnimationEndListener a ella por favor?
    • cuando la palabra no cabe en la línea actual, se elimina en reescribe en la línea siguiente. Es muy molesto comportamiento. ¿Tiene una solución para esto?
    • android studio me está pidiendo que me ampliar android.support.v7.widget.AppCompatTextView lugar. ¿por qué es eso ?

  2. 15

    uso Devunwired de la máquina de escribir de la clase

    entonces, en el diseño:

    <com.example.fmm.Typewriter
        android:id="@+id/typewriter"
        android:layout_alignParentTop="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

    código de la actividad:

    Typewriter writer = (Typewriter)findViewById(R.id.typewriter);
            //Add a character every 150ms
            writer.setCharacterDelay(150);
            writer.animateText("Sample String");
    • gracias por la aclaración
  3. 9

    No hay necesidad de establecer una clase extra el Uso de este, aquí la televisión es un textview en su diseño
    simplemente llame a

    setCharacterDelay(150);

    animateText(«Ejemplo de Cadena»);

    private Handler mHandler = new Handler();
    private Runnable characterAdder = new Runnable() {
        @Override
        public void run() {
            tv.setText(mText.subSequence(0, mIndex++));
            if(mIndex <= mText.length()) {
                mHandler.postDelayed(characterAdder, mDelay);
            }
        }
    };
    
    public void animateText(CharSequence text) {
        mText = text;
        mIndex = 0;
    
        tv.setText("");
        mHandler.removeCallbacks(characterAdder);
        mHandler.postDelayed(characterAdder, mDelay);
    
    }
    
    public void setCharacterDelay(long millis) {
        mDelay = millis;
    }
  4. 3

    esta nueva copia para Devunwired con xml de diseño

        public class Typewriter extends TextView {
    
        private CharSequence mText;
        private int mIndex;
        private long mDelay = 500; //Default 500ms delay
    
    
        public Typewriter(Context context) {
            super(context);
        }
    
        public Typewriter(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        private Handler mHandler = new Handler();
        private Runnable characterAdder = new Runnable() {
            @Override
            public void run() {
                setText(mText.subSequence(0, mIndex++));
                if(mIndex <= mText.length()) {
                    mHandler.postDelayed(characterAdder, mDelay);
                }
            }
        };
    
        public void animateText(CharSequence text) {
            mText = text;
            mIndex = 0;
    
            setText("");
            mHandler.removeCallbacks(characterAdder);
            mHandler.postDelayed(characterAdder, mDelay);
        }
    
        public void setCharacterDelay(long millis) {
            mDelay = millis;
        }
    }

    el uso de código

            textView = (Typewriter)findViewById(R.id.textView1);
        //Add a character every 150ms
        textView.setCharacterDelay(150);
        textView.animateText("Sample String");

    a continuación, definir textView en classStart

    • Esto funcionó para mí, con la ayuda de K-RAD respuesta. No fui claro en la textView variable en el TyperWriter de la clase. De allí, que sustituyó a textView con Typewriter.this
  5. 1

    Sé que es demasiado tarde ahora, pero alguien todavía podría llegar aquí desde Google.
    En realidad, yo también necesitaba algo como esto para mi aplicación, por lo que el hecho mismo.
    Probar Fade-In TextView, hace que todos los personajes que aparecen con un suave alfa de animación. El uso también es muy simple.

    En el XML de diseño

        <believe.cht.fadeintextview.TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:textColor="@android:color/black"
    
            app:letterDuration="250"/>

    En la Actividad/Fragmento

    believe.cht.fadeintextview.TextView textView = (believe.cht.fadeintextview.TextView) findViewById(R.id.textView);
    
    textView.setLetterDuration(250); //sets letter duration programmatically
    textView.isAnimating(); //returns current animation state (boolean)
    textView.setText(); //sets the text with animation

    Algo más de información

    El Fade-In TextView biblioteca hereda sus propiedades directamente de los nativos de la clase TextView, lo que significa que todos los nativos TextView métodos son compatibles. Prácticamente no hay limitaciones, incluyendo varias líneas de apoyo. La biblioteca también cuenta con algunos de sus propios métodos y atributos, los cuales ofrecen un completo control sobre la Vista.

    • He comprobado el código. Es bastante impresionante. Muy recomendable!
  6. 1

    He utilizado un método recursivo, también se agrega un poco de retraso entre las palabras tienen más humana.
    Enviar el textView como la vista, junto con el texto y enviar un » 1 » como la longitud, el tipo de inicio

      private fun typingAnimation(view: TextView, text: String, length: Int) {
        var delay = 100L
        if(Character.isWhitespace(text.elementAt(length-1))){
            delay = 600L
        }
        view.text = text.substring(0,length)
        when (length) {
            text.length -> return
            else -> Handler().postDelayed({
                typingAnimation(view, text, length+1 )
            }, delay)
        }
    }
  7. 0

    En teoría sería


    string text = "hello"
    string temp = "h"

    iterate: temp += if (text.length > temp.length) text[temp.length]; wait

    Por supuesto que vas a hacer el iterar en su runmethod.

    • El bloqueo de subproceso de interfaz de usuario en el que tienes que actualizar el texto no está permitido en Android. Usted necesita algunas asincrónica solución para eso.
  8. 0

    La mayoría de las soluciones proporcionadas por encima de lanzar varios errores. Supongo que las soluciones son viejos. Me encontré con este android studio plugin y funciona como un encanto.

    1.Instalación de AutoTypeTextView es preety simple. Sólo añadir en construir.gradle

    compilar ‘com.krsticdragan:autotypetextview:1.1’

    2.Añadir un nuevo espacio de nombres que se usan para agregar AutoTypeTextView y el uso de sus etiquetas.

    xmlns:attv=»http://schemas.android.com/apk/res-auto»

    Por lo tanto su diseño raíz debe tener este aspecto

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:attv="http://schemas.android.com/apk/res-auto"

    1. Agregar esto a tu archivo xml.

      <com.dragankrstic.autotypetextview.AutoTypeTextView
      android:id="@+id/lblTextWithoutMistakes"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      attv:animateTextTypeWithoutMistakes="Hello World!" />

    Con sólo estos tres pasos que son buenos para ir. Usted puede comprobar fuera de la documentación aquí para más detalles

  9. 0

    Sólo para agregar a @Devunwired la respuesta cuando se trabaja con Kotlin código,

    He cambiado (en animateText de la función):

    mHandler.postDelayed(mRunnable,mDelay) a mRunnable.run()

    así que mi final Kotlin clase se parece a esto:

    class TextViewAnimationComponent(context: Context,attributeSet: AttributeSet?) : TextView(context,attributeSet) {
        private var mHandler = Handler()
        private var mText:CharSequence = ""
        private var mIndex:Int = 0
        private var mDelay:Long = 500
    
        private val mRunnable = object: Runnable{
            override fun run() {
                text = mText.subSequence(0,mIndex++)
                if(mIndex <= mText.length){
                    mHandler.postDelayed(this,mDelay)
                }
            }
        }
    
        fun animateText(mText:CharSequence){
            this.mText = mText
            mIndex = 0
    
            text = ""
            mHandler.removeCallbacks(mRunnable)
            mRunnable.run()
    //       mHandler.postDelayed(mRunnable,mDelay)
        }
    
        fun setCharacterDelay(millis:Long){
            mDelay = millis
        }
    }

    También, rápido y sucio código (todavía en Kotlin) sin subclases.

    Dentro De La Actividad:

        private fun animateText(mText: CharSequence, delayMillis: Long, postFunction:() -> Unit){
            var mIndex = 0
    
            val runnable = object : Runnable {
                override fun run() {
    
                    //RunRunnable is a boolean flag; used in case you want to interrupt the execution
                    if(runRunnable) {
                        if (mIndex <= mText.length) {
    
                            //change textViewSwitchStateValue with your own TextView id
                            textViewSwitchStateValue.text = mText.subSequence(0, mIndex++)
                            Handler().postDelayed(this, delayMillis)
                        } else {
    
                            //After all the characters finished animating; Clear the TextView's text and then run the postFunction
                            textViewSwitchStateValue.text = ""
                            postFunction()
                        }
                    }
                }
            }
            runOnUiThread(runnable)

    Un ejemplo sencillo para animar una carga de puntos:

    animateText(". . .", 400){switchStateON()}

  10. 0

    Sí,sé que ha pasado un tiempo, pero espero poder ayudar a otros con un enfoque diferente utilizando ValueAnimator

    val text = "This is your sentence"
    val textLength = text.length-1
    val textView = findViewById<TextView>(R.id.sampleText)
    
    ValueAnimator.ofInt(0, textLength).apply {
         var _Index = -1
         interpolator = LinearInterpolator()
         duration = 2000
         addUpdateListener { valueAnimator ->
             val currentCharIndex = valueAnimator.animatedValue as Int
             if (_Index != currentCharIndex) {
                 val currentChar = text[currentCharIndex]
                 textView.text = textView.text.toString().plus(currentChar.toString())
             }
            _Index = currentCharIndex
         }
    }.start()

    Actualización

    Creo que es más apropiado, en lugar de la solución anterior, por supuesto, si usted está utilizando RxJava

     Observable.range(0, textLength)
            .concatMap { Observable.just(it).delay(75, TimeUnit.MILLISECONDS) }
            .map { text[it].toString() }
            .subscribeOn(Schedulers.computation())
            .observeOn(AndroidSchedulers.mainThread())
            .subscribe { char ->
                println("Item: $char")
                textView.text = textView.text.toString().plus(char)
            }
  11. -1

    Puede utilizar esta librería para el mismo: TypeWriterView Android biblioteca

    Un vistazo en la biblioteca:

        //Create Object and refer to layout view
        TypeWriterView typeWriterView=(TypeWriterView)findViewById(R.id.typeWriterView);
    
        //Setting each character animation delay
        typeWriterView.setDelay(int);
    
        //Setting music effect On/Off
        typeWriterView.setWithMusic(boolean);
    
        //Animating Text
        typeWriterView.animateText(string);
    
        //Remove Animation. This is required to be called when you want to minimize the app while animation is going on. Call this in onPause() or onStop()
        typeWriterView.removeAnimation();
    • P Sandesh Baliga, por favor, no acaba de publicar alguna herramienta o biblioteca o un plugin como respuesta. Por lo menos, demostrar ¿cómo se resuelve el problema en la respuesta misma.
    • Ok seguro.. @Shree

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea