Utiliser l’autocomplétion

L’autocomplétion consiste à afficher une liste de mot susceptible d’être celui que vous souhaitez écrire dans un EditText. Cet EditText un peu spécial ne nomme AutoCompleteTextView. Il peut s’avérer très utile dans vos applications pour accélérer le temps d’édition d’un EditText, ce n’est d’ailleurs pas pour rien que l’on retrouve ce principe dans la barre de recherche Google.


Avant de commencer, je souhaite remercier Lucianot54 un néo-fidèle du site qui a souhaité donner à son tour une contribution à cette communauté qui se construit. Il m’a donc fournit les sources de ce tutorial.


Regardons tout de suite le résultat attendu :

Créons donc un projet (toujours sous Android 1.6 pour moi) et direction une fois n’est pas coutume le fichier string.xml.
String.xml
Dans ce fichier nous allons simplement créer un tableau de String. C’est dans ce tableau que notre AutoCompleteTextView cherchera les mots à afficher dans la liste. Voici à quoi doit ressembler votre fichier string.xml. Aucune difficulté majeur, même si c’est la première fois que l’on crée un tableau de String via le fichier string.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="app_name">Autocomplétion | http://www.tutomobile.fr</string>
 <string-array name="tableau">
  <item>android</item>
  <item>iPhone</item>
  <item>tutoriel</item>
  <item>iPod</item>
  <item>iPad</item>
  <item>blackberry</item>
  <item>tutoriaux</item>  
  <item>Tuto Mobile</item>
  <item>tutorial</item>
  <item>bada</item>
  <item>tuto</item>
 </string-array>
</resources>

Code XML

Une fois notre tableau de String initialisé, nous allons passer à l’interface graphique. Elle est très simple et nous avons déjà réaliser ce type d’interface dans le tutorial pour réaliser un navigateur web. Je vous remet tout de même le code, mais le mieux serait de réussir à la faire sans se servir ni même s’inspirer du code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
 
    <AutoCompleteTextView 
     android:id="@+id/autocompletion" 
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"    
     android:layout_weight="1"
     android:layout_marginRight="5dip"
     android:layout_marginTop="10dip"
     android:layout_marginLeft="5dip"  />
 
    <Button android:id="@+id/ButtonEnvoyer" 
     android:layout_height="wrap_content"  
     android:layout_width="wrap_content"
     android:layout_marginTop="8dip"
     android:layout_marginRight="5dip"
     android:text="Recherche"/>
 
</LinearLayout>

Code JAVA

Enfin pour finir voici le code Java commenté pour mieux comprendre.

package com.tutomobile.android.autocompletion;
 
import com.tutomobile.android.autocompletion.R;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.Button;
import android.widget.Toast;
 
public class Tutoriel13_Android extends Activity {
 
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
 
  //On récupère le tableau de String créé dans le fichier string.xml
  String[] tutoVideo = getResources().getStringArray(R.array.tableau);
 
  //On récupère l'AutoCompleteTextView que l'on a créé dans le fichier main.xml
  final AutoCompleteTextView autoComplete = (AutoCompleteTextView) findViewById(R.id.autocompletion);
 
  //On récupère le bouton que l'on a créé dans le fichier main.xml
  Button boutonRecherche = (Button) findViewById(R.id.ButtonEnvoyer);
 
  //On crée la liste d'autocompletion à partir de notre tableau de string appelé tutoVideo
  //android.R.layout.simple_dropdown_item_1line permet de définir le style d'affichage de la liste
  ArrayAdapter adapter = new ArrayAdapter(this,
    android.R.layout.simple_dropdown_item_1line, tutoVideo);
 
  //On affecte cette liste d'autocompletion à notre objet d'autocompletion
  autoComplete.setAdapter(adapter);
 
  //Enfin on rajoute un petit écouteur d'évènement sur le bouton pour afficher
  //dans un Toast ce que l'on a rentré dans notre AutoCompleteTextView
  boutonRecherche.setOnClickListener(new OnClickListener() {
 
   public void onClick(View v) {
    Toast.makeText(Tutoriel13_Android.this, autoComplete.getText(), 2).show();
   }
  });
 
 }
}

Et voilà, si vous lancer votre application, vous n’avez plus qu’à taper quelque chose qui commence par les mêmes lettres que certaines chaînes de caractères contenu dans le tableau de String et les propositions devraient apparaître dans une liste comme sur le screen du début du tuto. Bien entendu, durant tout le tuto nous avons utiliser un tableau de String, mais cela fonctionne tout aussi bien avec une ArrayList !