TextWatcher sous Android

Image non disponible

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 et à mesure du remplissage de cet EditText.

2 commentaires Donner une note à l'article (4)

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

1. Création du projet

Nous allons créer un projet que nous nommerons 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.

2. Création de la vue

Nous allons créer notre vue XML qui sera composée 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, il n'y a rien de bien compliqué.

Voici le code de notre main.xml :

 
Sélectionnez
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
&#160;&#160;&#160;&#160;android:orientation="vertical"
&#160;&#160;&#160;&#160;android:layout_width="fill_parent"
&#160;&#160;&#160;&#160;android:layout_height="fill_parent"
&#160;&#160;&#160;&#160;>

<EditText
&#160;&#160;&#160;&#160;android:id="@+id/status"
&#160;&#160;&#160;&#160;android:layout_width="fill_parent"
&#160;&#160;&#160;&#160;android:layout_height="wrap_content"
&#160;&#160;&#160;&#160;android:hint="@string/status"
&#160;&#160;&#160;&#160;/>

<TextView
&#160;&#160;&#160;&#160;android:id="@+id/indicator"
&#160;&#160;&#160;&#160;android:layout_width="fill_parent"
&#160;&#160;&#160;&#160;android:layout_height="wrap_content"
&#160;&#160;&#160;&#160;android:hint="@string/nbChar"
&#160;&#160;&#160;&#160;android:textSize="30px"
&#160;&#160;&#160;&#160;/>
</LinearLayout>

...ainsi que le code de notre fichier strings.xml :

 
Sélectionnez
<?xmlversion="1.0"encoding="utf-8"?>
<resources>
&#160;&#160;&#160;&#160;<string name="status">Mettre votre status ici</string>
&#160;&#160;&#160;&#160;&#160;<string name="nbChar">20 caracteres restants</string>
&#160;&#160;&#160;&#160;<string name="app_name">Text Watcher</string>
</resources>

3. Le code JAVA

Pour utiliser le TextWatcher, il suffit :

  • que votre classe implémente TextWatcher ;
  • de le setter sur la zone qu'on veut surveiller ;
  • d'implémenter les méthodes suivantes :
    • afterTextChanged : appeler après que le texte de la zone ciblée a été changé,
    • beforeTextChanged : appeler avant que le texte de la zone ciblée a été changé,
    • onTextChanged : appeler quand le texte de la zone ciblée est en cours de changement.

Ceci donnera :

 
Sélectionnez
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{
&#160;&#160;&#160;&#160;private EditText status;
&#160;&#160;&#160;&#160;private TextView nbCharTxt;

&#160;&#160;&#160;&#160;@Override
&#160;&#160;&#160;&#160;public void onCreate(Bundle savedInstanceState) {
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;super.onCreate(savedInstanceState);
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;setContentView(R.layout.main);
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;status = (EditText) findViewById(R.id.status);
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;status.addTextChangedListener(this);
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;nbCharTxt = (TextView) findViewById(R.id.indicator);
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;nbCharTxt.setTextColor(Color.GREEN);
&#160;&#160;&#160;&#160;}

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

&#160;&#160;&#160;&#160;}

&#160;&#160;&#160;&#160;@Override
&#160;&#160;&#160;&#160;public void beforeTextChanged(CharSequence charSeq, intarg1, intarg2,
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;intarg3) {

&#160;&#160;&#160;&#160;}

&#160;&#160;&#160;&#160;@Override
&#160;&#160;&#160;&#160;public void onTextChanged(CharSequence charSeq, intarg1, intarg2, intarg3) {

&#160;&#160;&#160;&#160;}
}

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

  • Écran d'accueil
Image non disponible
  • 14 caractères restants
Image non disponible
  • 7 caractères restants
Image non disponible
  • 33 caractères en trop
Image non disponible

4. Conclusion

Merci d'avoir lu ce tutoriel, en espérant qu'il vous aura fait découvrir cette nouvelle fonctionnalité d'Android, encore méconnue.

5. Remerciements

Je tiens à remercier tout particulièrement djibril qui a mis ce tutoriel au format Developpez.com.
Merci également à Kaera, jacques_jean et ced d'avoir pris le temps de le relire et de le corriger.

6. Liens

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2011 . Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.