Affichage d’une liste par ListView

ZEMALI Elamine
ListView

1. Une liste des éléments peut être affichée dans Android à l'aide de
ListView.
2. Les utilisateurs peuvent ensuite sélectionner n'importe quel
élément de la liste en cliquant dessus.
3. ListView est défilant par défaut, nous n'avons donc pas besoin
d'utiliser ScrollView.
ListView

1. ListView est largement utilisé dans les applications Android.

a. Un exemple très courant de ListView est votre répertoire téléphonique, où vous
avez une liste de vos contacts.
Etapes

pour créer une liste :

1. Ajouter la balise <ListView> dans layout de l’activity ou on
souhaite afficher la liste.
2. Créer un objet adaptateur (Adapter).
3. Lier les données avec interface graphique via l’adapter.
Etape 1:

1. Ajouter la balise <ListView> :

<ListView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/simpleListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="com.listexample.MainActivity">

</ListView>
Etape 1

1. Les attributes de ListView

a. id: utilisé pour identifier un ListView.
b.divider: une couleur à dessiner entre différents éléments de la liste.
c. dividerHeight: spécifie la hauteur du séparateur entre les éléments.
d. listSelector: la propriété listSelector est utilisée pour définir le sélecteur de
listView. C'est généralement de couleur orange ou bleu ciel, mais vous pouvez
également définir votre couleur personnalisée ou une image comme sélecteur de
liste selon votre conception.
Etape 2

• Un adaptateur est un pont entre le composant d'interface

utilisateur et la source de données.
• Il spécifie comment remplir les informations dans un élément
d’une listView
Etape 2

1. Créer un simple fichier XML dans layout

a. Ce fichier correspond à un élément à afficher plusieurs fois dans la liste.

2. Créer un adaptateur
a. Il existe plusieurs types d’adaptateur, les plus simples :
i. ArrayAdapter: permet d'afficher les informations simples ;
ii. SimpleAdapter: utile dès qu'il s'agit d'écrire plusieurs informations pour
chaque élément;
iii. Il existe d’autre tel que : CursorAdapter, BaseAdapter…..
ArrayAdapter

1. La classe ArrayAdapter se trouve dans le package

android.widget.ArrayAdapter.
2. Permet d’afficher une simple liste, une seule information !
3. Permet d’afficher les données d’une ArrayList.
ArrayAdapter

public ArrayAdapter (Context contexte,

int item_layout_id,
int textview_id,
List<T> données).
a. Context: l’activity qui lance l’adapter
b. item_layout_id: identifiant du layout des items qui déterminera la
mise en page de l'élément. android.R.layout.simple_list_item_1 )
(c’est ici qu’on trouve la balise ListView)
c. textview_id: identifiant du TextView dans de layout,
d. Données: c’est la liste contenant les données à afficher (ArrayList)
SimpleAdpater

1. SimpleAdapter est un adaptateur simple pour mapper des données

statiques sur des vues définies dans un fichier XML (Layout).

2. Chaque fois que nous devons créer une liste personnalisée, nous
devons implémenter un adaptateur personnalisé.
SimpleAdpater

SimpleAdapter(Context context,
List<? extends Map<String, ?>> data,
int resource,
String[] from,
int[] to)
1. contexte: la référence de la classe actuelle.
2. data: List de type Map, chaque entrée dans la liste correpond a
une ligne dans la ListView
SimpleAdpater
3. Ressource: l'ID de ressource utilisé pour définir Layout des éléments
dans lesquels vous avez une vue texte, image ou autre.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="wrap_content">
<ImageView
android:id="@+id/imageView" android:layout_width="50dp"
android:layout_height="50dp" android:padding="5dp"
android:layout_alignParentRight="true" android:layout_marginRight="10dp"
android:src="@drawable/ic_launcher" />
<TextView android:id="@+id/textView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:padding="@dimen/activity_horizontal_margin" android:text="Demo"
android:textColor="#000" />
</RelativeLayout>
SimpleAdpater

1. 4. From: Est un tableau de nom de colonnes qui seront ajouter a

l’objet Map(deuxieme parametre).

a. Par exemple :

String fromArray[]={"userName","userImage"};
SimpleAdapter (this, hashmapData, R.layout.custom_list_items, fromArray, int[] to)
SimpleAdpater

5. to: c’est un tableau d’entiers, ou chaque entier représente

l’indentificateur de ressource qui affiche l’information.
• L’ordre de déclaration des entiers doit correpondre a celui utilisé
dans ‘From’
• Par exemple :

int to[]={R.id.textView,R.id.imageView};
SimpleAdapter (this, hashmapData, R.layout.custom_list_items, fromArray,to)
Etape 3

1. Cette étape inclut :

a. Récupération de listView par la fonction findViewById.
b. Préparer les donnée à afficher (ArrayList,HashMap….)
c. Créer une instance de l’adaptateur.
d. Lier l’adaptateur à ListView.
Etape 3

1. Cas d’arrayAdapter (Exemple).

//dans la méthode onCreate

//1
listView = findViewById(R.id.mlistView);
//2
List<String> malist = new ArrayList<String>();
malist.add("ISIL");
malist.add("SI");
malist.add("Math");
malist.add("Math appliqué");
//3
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
R.layout.item_list, R.id.spetextView, malist);
//4
listView.setAdapter(adapter);
Etape3

• Contenu de fichier XML R.layout.item_list :

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/spetextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="25sp" />
</LinearLayout>
Etape 3

Résultat :
Etape 3
1. Cas de SimpleAdapter (Exemple).
//1
listView = findViewById(R.id.mlistView);
//2
String[] playerFName = {"andria", "Cristiano", "Alexendre", "Luigie", "leonardo"};
String[] playerLName = {"Pirlo", "Ronaldo", "Del peiro", "Buffon", "Bunoci"};
ArrayList<HashMap<String, String>> arrayList = new ArrayList<>();
for (int i = 0; i < playerFName.length; i++) {
HashMap<String, String> hashMap = new HashMap<String, String>();
hashMap.put("nom", playerFName[i]);
hashMap.put("prenom", playerLName[i]);
arrayList.add(hashMap);}
String[] from={"nom","prenom"};
int[] to={R.id.Nom,R.id.Preom};
//3
SimpleAdapter adapter = new SimpleAdapter(this,arrayList,R.layout.item_list_simple,from,to);
//4
listView.setAdapter(adapter);
Etape 3

1. Résultat :
RecyclerView

1. RecyclerView est un conteneur déroulant pour afficher une

grande quantité de données.

1. Efficace
a. Utilise et réutilise un nombre limité d'éléments View
b. Mise à jour rapide de données a afficher.
Composants de RecyclerView

1. Les données
2. RecyclerView : Liste déroulante pour les éléments de la liste
3. Layout pour un élément de données - fichier XML
4. LayoutManager: gère l'organisation des composants de l'interface
utilisateur dans une vue
5. L'adaptateur connecte les données à RecyclerView
6. ViewHolder contient les informations de la vue afin d’afficher un
élément
Layout manager

1. Chaque ViewGroup a un LayoutManager

2. Utiliser pour positionner les éléments de vue dans un
RecyclerView
3. Réutilise les éléments qui ne sont plus visibles par l'utilisateur
4. Gestionnaires de disposition intégrés
a. LinearLayoutManager
b. GridLayoutManager
c. StaggeredGridLayoutManager

5. Pour l’implement il faut créer une classe qui hérite de

RecyclerView.LayoutManager
Adapter

1. Aide les interfaces incompatibles à fonctionner ensemble

a. Exemple: prend les données du curseur de base de données et prépare les
chaînes à placer dans une vue

2. Intermédiaire entre les données et View

3. Gère la création, la mise à jour, l'ajout et la suppression
d'éléments de vue quand les données changent
4. Afin de l’utiliser, créer une classe qui hérite de
RecyclerView.Adapter
ViewHolder

1. Utilisé par l'adaptateur pour préparer une vue avec des données
pour un élément de liste
2. Présentation spécifiée dans un fichier de ressources XML
3. Peut avoir des éléments cliquables
4. Placé par LayoutManager
5. Elle hérite de la classe RecyclerView.ViewHolder
Etapes d’Implémentation

1. Ajoutez la dépendance RecyclerView à build.gradle si nécessaire

2. Ajouter RecyclerView Dans layout de l’activity
3. Créer une fichier XML pour l'élément
4. Créer une classe qui hérite de RecyclerView.Adapter
5. Créer une classe qui hérite de RecyclerView.ViewHolder
6. Dans Activity onCreate (), créez RecyclerView avec l'adaptateur
et LayoutManager
Etape 1

1. Ajoutez la dépendance RecyclerView à build.gradle si nécessaire:

dependencies {
...
Implementation 'com.android.support:recyclerview-v7:26.1.0'
...
}
Etape 2

2. Ajouter RecyclerView à layout de l’activity

<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
Etape 3

3. Créer Layout pour 1 élément de liste

<LinearLayout …>
<TextView
android:id="@+id/word"
style="@style/word_title" />
</LinearLayout>
Etape 4

• Implémenter l’adapter:

public class WordListAdapter extends

RecyclerView.Adapter<WordListAdapter.WordViewHolder> {

public WordListAdapter(Context context,

LinkedList<String> wordList) {
mInflater = LayoutInflater.from(context);
this.mWordList = wordList;
}
}
Etape 4

• On doit implémenter trois méthodes dans l’adapter :

● onCreateViewHolder()
● OnBindViewHolder()
● getItemCount()
Etape 4-1

• onCreateViewHolder()
@Override
public WordViewHolder onCreateViewHolder(
ViewGroup parent, int viewType) {
// Creer une Vue (view) à partir de layout
View mItemView = mInflater.inflate(
R.layout.wordlist_item, parent, false);
return new WordViewHolder(mItemView, this);
}
Etape 4-2

• onBindViewHolder()

@Override
public void onBindViewHolder(
WordViewHolder holder, int position) {
// Trouver les données de cette position
String mCurrent = mWordList.get(position);
// Ajouter les données à la vue
holder.wordItemView.setText(mCurrent);
}
Etape 4-3

• getItemCount()

@Override
public int getItemCount() {
// retourner le nombre d’elements dans la liste
If(mWordList == null) {return 0}
return mWordList.size();
}
Etape 5

• Créer une classe ViewHolder dans la classe d'adaptateur

class WordViewHolder extends RecyclerView.ViewHolder { //.. }

Si on souhaite ajouter un événement de clique:

class WordViewHolder extends RecyclerView.ViewHolder

implementsView.OnClickListener { //.. }
Etape 5

• Le constructeur de View holder :

public WordViewHolder(View itemView, WordListAdapter adapter) {

super(itemView);
// Récupérer layout
wordItemView = itemView.findViewById(R.id.word);
// L’associer avec adapter
this.mAdapter = adapter;
// Ajouter un listener
itemView.setOnClickListener(this);
}
Etape 6

• Déclarer RecyclerView dans onCreate() de l’Activity

mRecyclerView = findViewById(R.id.recyclerview);
mAdapter = new WordListAdapter(this, mWordList);
mRecyclerView.setAdapter(mAdapter);
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));