Ce tutoriel a pour but d’introduire un événement peut connu des développeurs Android, il s’agit du TextWatcher. Cet événement sert à surveiller les changements dans la saisie d’un texte dans un EditText par exemple.

Nous allons prendre l’exemple d’une zone texte qui servirait à publier un message possédant une contrainte :

  • Le message ne doit pas dépasser 20 caractères

Nous allons mettre à jour un indicateur au fur à mesure du remplissage de cet EditText.

Création du projet

Nous allons créer un projet qu’on nommera TextWatcherProjet, avec les données suivantes

  • SDK Version : 2.3.1
  • Nom de l’application : TextWatcher
  • Nom du package : com.tuto.android.textwatcher
  • Création d’activité : TextWatcherActivity

Création de la vue

Nous allons créer notre vue XML qui sera composé d’un EditText et d’un TextView. Pour d’une part saisir le texte et d’autre part afficher le nombre de caractéres restants, rien de bien compliqué.

Voici le code de notre main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    
<EditText  
	android:id="@+id/status"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:hint="@string/status"
    />
    
<TextView  
	android:id="@+id/indicator"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:hint="@string/nbChar"
    android:textSize="30px"
    />
</LinearLayout>

ainsi que le code de notre fichier strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="status">Mettre votre status ici</string>
     <string name="nbChar">20 caracteres restants</string>
    <string name="app_name">Text Watcher</string>
</resources>

Le code JAVA

Pour utiliser le TextWatcher, il suffit :

  • Que votre classe implemente TextWatcher
  • De le setter sur la zone qu’on veut surveiller.
  • D’implementer les méthodes suivantes :
    • afterTextChanged : Appeler aprés que le texte de la zone ciblé soit changé
    • beforeTextChanged : Appeler avant que le texte de la zone ciblé soit changé
    • onTextChanged : Appeler quand le texte de la zone ciblé est en cours de changement

Ce qui donnera :

package com.tuto.android.textwatcher;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.EditText;
import android.widget.TextView;

public class TextWatcherActivity extends Activity implements TextWatcher{
    private EditText status;
    private TextView nbCharTxt;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        status = (EditText) findViewById(R.id.status);
        status.addTextChangedListener(this);
        nbCharTxt = (TextView) findViewById(R.id.indicator);
        nbCharTxt.setTextColor(Color.GREEN);
    }

    @Override
    public void afterTextChanged(Editable editable) {
	int nbChar = status.getText().toString().length();
	int leftChar = 20 - nbChar;
	nbCharTxt.setText(Integer.toString(leftChar) + " caracteres restant");
	nbCharTxt.setTextColor(Color.GREEN);
	if (leftChar < 10 && leftChar >= 0)
	    nbCharTxt.setTextColor(Color.YELLOW);
	else if (leftChar <= 0)
	{
	    nbCharTxt.setTextColor(Color.RED);
	    nbCharTxt.setText(Integer.toString(Math.abs(leftChar)) + " caracteres en trop");
	}
	
    }

    @Override
    public void beforeTextChanged(CharSequence charSeq, int arg1, int arg2,
	    int arg3) {
	
    }

    @Override
    public void onTextChanged(CharSequence charSeq, int arg1, int arg2, int arg3) {
	
    }
}

Donc pour finir voici une petite démo du résultat obtenu :

  • Ecran d’acceuil
  • 14 caractères restants
  • 7 caractères restants
  • 33 caractères en trop
  • Conclusion

    En espérant que cet article vous ferra decouvrir cette nouvelle fonctionnalité méconnu d’Android.

Categories: Tutoriels

5 Responses so far.


  1. Ons dit :

    éclipse m’indique un problème au niveau de l’instruction (public class TextWatcherActivity extends Activity implements TextWatcher)
    TextWacherActivity a été souligner
    portant j’ai copier toout le code que vous avez mis sur se tuto

    Merci de m’aider
    :)

  2. Setsuna dit :

    Sympa, merci,
    Avant ce tuto, j’utilisais un test sur la zone de saisie qui à chaque fois que l’utilisateur touchais l’ecran dans la zone du clavier, testais la longeur du String que me retournais mon EditText ;) . C’est quand meme mieux avec ton tuto ><.
    Sinon, je voudrais savoir si il est possible, dans le cas d'un EditText d'avoir du text préremplie à l'interieur, je veut faire saisir une Url à l'utilisateur, et aimerais que "http://&quot; soit deja mis et non modifiable. J'ai penser justements tester le nombres de caractères pour voir si http est supprimé, mais je cherche une meilleur idée ….
    Merci d'avance de votre aide et de vos idées :)

  3. fab35 dit :

    Désolé, manque les balises

  4. fab35 dit :

    Très bien merci!
    J’ai aussi vu qu’il était possible d’utiliser dans

    Avec dans l’exemple “5″ le nombre de caractères maxi.

    A+

Leave a Reply


Notifiez-moi des commentaires à venir via email. Vous pouvez aussi vous abonner sans commenter.