Controleurs

Tutoriels Android

Bards of the Earth

Nouvel album de métal symphonique en ligne ! A écouter ici !

Contrôleurs





Objectif de ce chapitre

L'objectif de ce chapitre va être de faire interragir les deux ImageButton avec la ListView du chapitre précédent (Interfaces), l'un pour la remplir, l'autre pour la vider.



Remplir une ListView

On va chercher tout d'abord le moyen de remplir la ListView avec des éléments. En l'occurence, imaginons que l'on veuille afficher des chaînes de caractères, et les numéroter. La ListView contiendra donc deux colonnes, une contenant les numéros des éléments, l'autre les éléments (chaînes de caractères dans ce cas de figure).

Il n'est malheureusement pas possible de remplir directement une ListView, qui est un élément graphique, il faut partir d'une ArrayList de type_de_l_élément_souhaité - ici String - et passer par un "adapter".

Nous sommes donc dans la classe de l'activité principale (pour moi testActivity), et nous allons tout d'abord créer notre ArrayList de String, et un tableau de string pour remplir cette ArrayList:

1
2
3
4
5
6
7
 
	// On crée une ArrayList de String
	List<String> listString = new ArrayList<String>();
	// On crée un tableau de Strings, de sorte à pouvoir remplir 
		// l'ArrayList de Strings
	private String[] tabdeStrings = new String[]{"elem 1","elem 2",
			"elem 3","elem 4","elem 5","elem 6","elem 7",
			"elem 8","elem 9","elem 10","elem 11","elem 12"};


On crée ensuite une fonction permettant de remplir l'ArrayList à partir du tableau: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 
// Fonction pour remplir l'ArrayList avec le tableau de Strings
    private void RemplirListe() {
		 
    	listString.clear();
		
    	for (int i=0; i<tabdeStrings.length; i++) {
    		listString.add(tabdeStrings[i]);
    	}
		 
    }


On va ensuite créer un fichier xml "ligne_de_la_listview.xml" représentant une ligne de la ListView, qui est l'élément graphique. Nous voulons qu'elle aie 2 colonnes contenant du texte.

Pour créer un fichier xml: clic droit sur le dossier "layout" du projet -> New -> Other... -> Android -> Android XML File. Donnez-lui pour nom "ligne_de_la_listview" et laissez le reste par défaut.

Le fichier xml contient un LinearLayout; il vous suffit d'ajouter deux TewtView qui vont correspondre aux deux zones de texte d'une ligne;

Je les ai paramétrés de telle sorte qu'un numéro d'un élément prenne 1/4 de la ligne, et l'élément les 3/4 restants: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<?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"
	android:weightSum="2" >
    
    
    <TextView android:id="@+id/numElement"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1.5"
        android:textColor="#fff"
        android:gravity="left"/> 
     <TextView android:id="@+id/element"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.5"
        android:textColor="#fff"
        android:gravity="left" />     
    

</LinearLayout>


Nous allons maintenant compléter le code de l'activité Java - le code parle de lui-même: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
	//Constructeur de l'activité
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //Création du lien avec le fichier main.xml
        setContentView(R.layout.main);
        
        //Création des liens avec le main.xml
        this.page_accueil = (RelativeLayout)findViewById(R.id.page_accueil);
        this.titre_page = (TextView)findViewById(R.id.titre_page);
        this.contenuDeLaPage = (ListView)findViewById(R.id.contenuDeLaPage);
        this.zoneDeBoutons = (LinearLayout)findViewById(R.id.zoneDeBoutons);
        this.remplir = (ImageButton)findViewById(R.id.remplir);
        this.effacer = (ImageButton)findViewById(R.id.effacer);
        
        // On remplit l'ArrayList
        RemplirListe(); 
        // On crée un StringAdapter adapter
        	/*
        	 * StringAdapter est une classe que l'on va créer 
 			 * dans la suite du tuto.
        	 * L'adapter permet de transformer une 
        	 * ArrayList<Tout_ce_qu'on_veux> en une ListView.
        	 */
        StringAdapter adapter = 
        	new StringAdapter(getApplicationContext(), listString);	
        // On dit à la ListView de se remplir via cet adapter
        contenuDeLaPage.setAdapter(adapter);
        /* 
         * Si vos données changent, penser à utiliser 
         * la fonction adapter.notifyDataSetChanged(); 
        * qui aura pour effet de notifier le changement de données 
        * et de recharger la liste automatiquement.
        */
        adapter.notifyDataSetChanged();	
        
    }


Comme vous l'avez deviné, il ne nous reste plus qu'à créer l'adapter!

Je vais pour cela créer un deuxième package appelé "test.adapters" qui rassemblera tous les adapters du projet:



J'ai appelé l'adapter StringAdapter, mais vous pouvez le nommer comme vous le souhaitez. D'autre part, il s'appliquera ici à une ArrayList de String, mais vous pourrez le modifier de telle manière qu'il prenne en compte un autre type de données, comprenant les structures de données que vous pourriez définir.

Voici la structure commentée de cet adapter: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
package test.adaptaters;

import java.util.List;

import test.activities.R;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;


public class StringAdapter extends BaseAdapter {


  List<String> epreuve;
  LayoutInflater inflater;
  
 /**
	 * Ici le constructeur de l'adapter
	 *
	 * @param le contexte et la liste de Strings
	 */
  public StringAdapter(Context context,List<String> epreuve) {
    inflater = LayoutInflater.from(context);
    this.epreuve = epreuve;
  }
  
  // Fonction générée de base lorsque vous créez un adapter
  // Retourne la taille de l'ArrayList
  public int getCount() {
    return epreuve.size();
  }

  // Fonction générée de base lorsque vous créez un adapter
  // Retourne la position (ligne en cours) 
  public Object getItem(int position) {
    return epreuve.get(position);
  }

  // Fonction générée de base lorsque vous créez un adapter
  // Retourne la position (ligne) d'un élément
  public long getItemId(int position) {
    return position;
  }
  
  
  /**
	 * Classe dans laquelle vous déclarez les éléments
	 * qui vont être présents sur une ligne;
	 * (ici, éléments du fichier ligne_de_la_listview.xml)
	 */
  private class ViewHolder {
    TextView numElement;
    TextView element;
  }

  // Fonction générée de base lorsque vous créez un adapter
  // Elle va lier la List<String> à la vue (ListView)
  public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder holder;
    
    if(convertView == null) {
      holder = new ViewHolder();
      // On lie les éléments au fichier ligne_de_la_listview.xml
      convertView = inflater.inflate(R.layout.ligne_de_la_listview, null);
      // On lie les deux TextView déclarés précédemment à ceux du xml
      holder.numElement = (TextView)convertView.findViewById(R.id.numElement);
      holder.element = (TextView)convertView.findViewById(R.id.element);
      convertView.setTag(holder);
    } else {
      holder = (ViewHolder) convertView.getTag();
    }
    // On défini ici le texte que doit contenir chacun des TextView
    // Le premier affichera le numéro de l'élément (numéro de ligne)
    holder.numElement.setText("" + position);
    // Le second affichera l'élément
    holder.element.setText(epreuve.get(position));
    return convertView;
  }

}


Voici le résultat que vous devriez obtenir en lançant l'application:



Nous allons implémenter maintenant les Listeners.

Cela a été utile?