[TUTO]Tutoriel Android: Listes des Logos

Dans ce tutoriel android, nous allons voir comment afficher une liste de logos suivis de leur description: C'est tout simplement l'utilisation des ListViews sous android.

Le résultat est décrit dans la figure ci-dessous:

Tout d'abord, nous aurons besoin d'avoir nos logos deja prets, bien dimensionnés à l'aide d'un logiciel de traitement d'images tel que photoshop, gimp,...

Voici pas par pas , les étapes à suivre:

1. Créer un nouveau projet qu'on appelera listelogos par exemple
2. Placer les logos dans le dossier res/drawable(ici on les nommera logoandroid,logoiphone et logowindowsphone)
3. Aller dans le fichier main.xml du layout, placez-y le contenu xml suivant:

<?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"
    >
<ListView
 android:id="@+id/element"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 >
</ListView>
</LinearLayout>

Nous venons de définir  une ListView dont le contenu sera défini dans le fichier element que nous allons créer dans ce qui suit.
4. Toujours dans le layout, créer un nouveau fichier xml qui sera nommé element et qui contiendra la description d'un item de notre liste.Ajoutez-y le contenu suivant:
<?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="wrap_content"
>
    <ImageView
  android:id="@+id/image"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
     android:layout_gravity="center_vertical"
     android:padding="10px"
  />

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_gravity="center_vertical"
     android:paddingLeft="10px"
     android:layout_weight="1"
     >

     <TextView android:id="@+id/nom"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:textSize="14px"
          android:textStyle="bold"
          />

     <TextView android:id="@+id/description"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          />

    </LinearLayout>
</LinearLayout>


5. Revenons maintenant dans notre activité principale pour y placer le code necessaire. les étapes sont simples:

• Definir et créer une ListView
• Definir et créer un tableau de type clé-valeur qui contiendra les elements de notre liste
• Remplir le tableau des éléments de la liste
• Definir un adapter et l'attribuer à la liste.

Ci-dessous le code java commenté.Si vous avez des questions, n'hesitez pas.
package com.lestrucsmobiles.listelogos;
import java.util.ArrayList;
import java.util.HashMap;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;
public class LisltelogosActivity extends Activity {
 private ListView listview;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        listview=(ListView) this.findViewById(R.id.element);
       
        ArrayList<HashMap<String,String>> listelogos = new ArrayList<HashMap<String,String>>();
        //on remplit l'item du premier logo
        HashMap<String,String> infologo=new HashMap<String, String>();
        infologo.put("nom","Android");
        infologo.put("description","Plateforme de google");
        infologo.put("image",String.valueOf(R.drawable.logoandroid));
        listelogos.add(infologo);
       
       
        //on remplit de la meme façon l'item du second logo
        infologo=new HashMap<String, String>();
        infologo.put("nom","iphone");
        infologo.put("description","Plateforme de Apple");
        infologo.put("image",String.valueOf(R.drawable.logoiphone));
        listelogos.add(infologo);
       
        //on remplit de la meme façon l'item du troisieme logo
        infologo=new HashMap<String, String>();
        infologo.put("nom","WindowsPhone");
        infologo.put("description","Plateforme de Microsoft");
        infologo.put("image",String.valueOf(R.drawable.logowindowsphone));
        listelogos.add(infologo);
       
        //Vous l'aurez compris, on pourra continue l'operation...
       
        //On créer enfin un adapter et l'attribuer a la listview
        SimpleAdapter adapter = new SimpleAdapter(this.getBaseContext(),listelogos,
          R.layout.element,new String[]{"image","nom","description"},new int[] {R.id.image, R.id.nom, R.id.description});
        listview.setAdapter(adapter);
    }
}