web-dev-qa-db-fra.com

Animation de texte d'affichage caractère par caractère Android

Tout le monde connaît une méthode efficace pour réaliser une animation qui consiste à afficher un texte, caractère par caractère?, Comme:

T
Th
Thi
Ce
Ce je
C'est
...

etc.

Merci!

androidanimationtextcharacter
37
zegnus

Ce n'est peut-être pas la solution la plus élégante, mais la plus simple est probablement une sous-classe rapide de TextView avec une Handler qui met à jour le texte de temps en temps jusqu'à ce que la séquence complète soit affichée:

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

Vous pouvez ensuite utiliser ceci dans une activité comme ceci:

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 vous souhaitez que des effets d’animation soient ajoutés à chaque lettre, consultez plutôt le sous-classement TextSwitcher.

J'espère que cela pourra aider!

98
Devunwired

utiliser la classe Typewriter de Devunwired

puis, dans la mise en page:

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

code dans l'activité:

Typewriter writer = (Typewriter)findViewById(R.id.typewriter);
        //Add a character every 150ms
        writer.setCharacterDelay(150);
        writer.animateText("Sample String");
15
K-RAD

Pas besoin de définir une classe supplémentaire Utilisez ceci, ici tv est une vue en texte dans votre mise en page

setCharacterDelay (150);
animateText ("Sample String"); 

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;
}
8
Viswanath Lekshmanan

cette nouvelle copie pour Devunwired avec layout XML

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

utilisation du code 

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

puis définissez textView dans classStart

3
Baha'a Odeh

J'ai utilisé une méthode récursive, également ajouté un peu de retard entre les mots pour avoir une sensation plus humaine ..

  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)
    }
}
1
Shashank Bhushan

La plupart des solutions proposées ci-dessus génèrent diverses erreurs. Je suppose que les solutions sont anciennes. Je suis tombé sur ce plugin studio Android et cela fonctionne comme un charme. 

1. L’installation d’AutoTypeTextView est simple. Il suffit d'ajouter dans build.gradle

compile 'com.krsticdragan: autotypetextview: 1.1'

2.Ajoutez un nouvel espace de noms que vous utiliserez pour ajouter AutoTypeTextView et utiliser ses balises.

xmlns: attv = "http://schemas.Android.com/apk/res-auto"

Par conséquent, votre mise en page racine devrait ressembler à ceci

<?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. Ajoutez ceci à votre fichier XML.

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

Avec seulement ces trois étapes, vous êtes prêt à partir. Vous pouvez consulter la documentation ici pour plus de détails

0
Mesonrale Ope Seun

Je sais que c'est trop tard maintenant mais que quelqu'un peut arriver ici de Google . En fait, moi aussi j'avais besoin de quelque chose comme ça pour mon application, alors j'en ai créé un moi-même . Essayez Fade-In TextView , ça fait apparaître chaque personnage avec une animation alpha fluide. L'utilisation est également assez simple.

Dans la mise en page XML

    <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"/>

Dans l'activité/Fragment

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

Quelques informations supplémentaires

La bibliothèque Fade-In TextView hérite directement de ses propriétés de la classe TextView native, ce qui signifie que toutes les méthodes TextView natives sont prises en charge. Il n'y a pratiquement aucune limitation, y compris le support multiligne. La bibliothèque possède également certaines de ses propres méthodes et attributs qui offrent un contrôle total sur la vue.

0
cht

En théorie, ce serait

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

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

Vous ferez bien sûr l'itération dans votre méthode d'exécution.

0
RobotRock