Coin de Dreeckan

Pour ce premier article technique, j’ai choisi de me concentrer sur l’un des éléments qui m’a le plus perturbé dans le développement Android à ce jour : les ListView.

Qu’est-ce qu’une ListView ?

Une ListView, comme son nom l’indique, est un Widget Android vous permettant d’afficher vos éléments dans une liste avec défilement. Cet objet est très simple à utiliser et possède de nombreuses utilisations bien pratiques. Voici un exemple (très basique), de vue utilisant une ListView :

Comment créer une ListView ?

Voici le code de la vue :

<?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"
    >
	<TextView 
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    android:id="@+id/title_cat_name"
	    android:padding="10dp"
	    android:textSize="18dp"
	    android:textStyle="bold"
	    android:gravity="center_horizontal|center_vertical"/>
	<TextView 
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    android:id="@id/android:empty"
	    android:text="@string/empty_cat"
	    android:padding="10dp"
	    android:visibility="gone"/>
	<ListView 
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
		android:id="@android:id/list"
		>
	</ListView>
</LinearLayout>

Maintenant, quelques explications :

Comme dans toutes les vues Android, il faut déclarer un conteneur pour la vue. Le plus classique étant le LinearLayout (permettant d’afficher les éléments les uns en dessous des autres, ou les uns à côté des autres, selon l’orientation définie dans l’attribut android:orientation ).

Ayant voulu un titre au dessus de ma liste, j’ai défini une TextView pour le contenir. Jusqu’ici, tout est très simple. La TextView juste en dessous me permet de définir un texte à afficher si la liste est vide (noter l’astuce de son attribut android:id, qui permettra à la liste de l’afficher automatiquement).

Enfin, vient l’élément le plus important, la ListView. Là, deux choix principaux s’offrent à vous : soit vous créer une activité de type ListActivity, soit un activité Activity classique pour l’affichage. J’ai personnellement choisi la ListActivity pour cette vue, car elle offre beaucoup de simplifications non négligeables que je détaillerai plus tard.

En utilisant une Activity, il aurait fallut définir un id de manière classique (avec une valeur @+id/votre_id_de_liste) pour la liste et gérer nous-même l’apparition du message indiquant la liste vide (c’est à dire lui attribuer un id et modifier au minimum sa visibilité dans notre activité).

Voici le code source utilisé pour afficher la liste (seule la méthode onCreate() de notre objet nous intéresse, mais notez qu’il doit étendre ListActivity) :

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
		
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		
        setContentView(R.layout.tag_list);
        
        Intent intent = this.getIntent();
        if(intent.getExtras() == null || intent.getExtras().get("id_cat") == null) {
        	setResult(RESULT_CANCELED);
        	finish();
        }

        db 					= new DBAdapter(this);
        db.open();
        
        idCat 				= (new Integer(intent.getExtras().get("id_cat").toString())).longValue();
        
        Cursor curTagList 	= TableTag.getList(db, idCat);
        startManagingCursor(curTagList);
        TableCategorie cat	= TableCategorie.createFromDB(db, idCat);
        
        nameCat				= cat.getName();
        
        tvName 	= (TextView)findViewById(R.id.title_cat_name);
        tvName.setText(nameCat);

		SimpleCursorAdapter adapter = new SimpleCursorAdapter(
				this,
				R.layout.item,
				curTagList,
				new String[] {TableCategorie.COL_NAME},
				new int[] {R.id.item}
		);
		setListAdapter(adapter);
    }

Comme vous pouvez le constater, l’étape la plus compliqué consiste à récupérer les éléments à afficher dans la base de données (ici, j’ai créé divers objets pour la manipuler plus facilement). Une petite explication des différentes étapes :

•  setContentView : cette méthode de la classe Activity permet de lier l’activité avec la vue que l’on souhaite. Bien entendu, il faut que la vue soit déjà créée dans votre dossier res/ .
• Récupération des données dans la base : utilisant un système personnel pour les récupérer, je ne vais pas m’appesantir sur le sujet. Sachez simplement que j’utilise un objet étendant SQLiteOpenHelper pour gérer ma base de données.
• L’objet SimpleCursorAdapter permet de créer directement la liste à partir des données contenues dans le Cursor. Il suffit de lui indiquer un Contexte (ici, notre activité), un fichier de layout qui va être utilisé pour chaque élément de la liste (ici une vue contenant simplement une TextView dans un LinearLayout), le Cursor à utiliser, le nom des colonnes contenant ce que l’on veut afficher (ici, le nom de notre tag), puis
• on relie ces colonnes avec le champs où il va être affiché.
• Il ne reste ensuite plus qu’à signaler à notre ListActivity l’adapter qu’elle doit utiliser.
• Et voilà le travail !

De nombreuses autres manières existent pour créer une ListView, y compris sans avoir besoin d’une base de données. Je vous renvois sur les différents adapter existants

 Quels pièges à éviter ?

Le plus gros piège, du moins à mon sens, est de se tromper sur l’utilisation des ListView. Oui, elles sont très pratiques. Oui, c’est très simple à utiliser et implémenter. Mais non, on ne peut pas s’en servir tout le temps.

Voici un exemple dans lequel il faut éviter d’utiliser une ListView :

Ici, on remarque que j’ai une longue liste de cases à cocher, venant directement de ma base de données. En utilisant une ListView, plusieurs problèmes se poseraient :

• un élément ListView possède son propre défilement. Or, dans mon cas, je veux un défilement sur l’ensemble de mon formulaire. Non seulement il est impossible (ou dans tous les cas, je vous conseille fortement de l’oublier) de créer deux défilements verticaux dans une même vue, mais si cela était faisable, ce serait une grave erreur pour l’expérience utilisateur.
• On pourrait forcer la hauteur de la ListView, afin de conserver le défilement et pouvoir atteindre facilement les boutons sous la liste, ce qui fonctionneraient, mais demanderait des calculs supplémentaires, dont on peut largement se passer.

Alors, comment faire ?

Pour ma part, j’ai simplement remplacé mon objet ListView par une simple LinearView (avec une orientation verticale). Pour ajouter des éléments, j’ai simplement utilisé la même vue que pour un élément de liste, mais en l’appelant pour chaque élément à afficher à l’aide de l’objet LayoutInflater (grâce à la méthode LayoutInflater.from(Context context), puis la méthode inflate(id_de_votre_vue, null)).

Conclusion

Je ne prétends pas tout connaître de cet élément ListView, mais, à force d’erreurs et de recherches, j’ai fini par comprendre quand l’utiliser et quand il n’est pas recommandé.

Ainsi, à mon sens, une ListView est surtout utile si l’on doit seulement afficher une liste d’objets simples, avec lesquels l’utilisateur pourra interagir, mais sa taille variable doit toujours être prise en compte (on ne met rien après une ListView dont on ne connait pas la taille exacte).

Autrement, n’oubliez pas qu’Android fourni énormément d’alternatives viables et généralement simples pour afficher vos éléments .