6 - Affichage - Liste - Items

UNIVERSITE DE CARTHAGE DEPARTEMENT
FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE

Classe : GLSI3 AU : 2021/2022
Matière : Android Studio Semestre : 1
Enseignante : Cherifa Nakkach
Chapitre 6 : Affichage d’une liste d’items sous

Android (RecyclerView)
1- Introduction :
Durant ce chapitre, nous allons nous intéresser aux applications de gestions
d’une liste d’items.
➢ Stockage d’une liste

➢ Affichage d’une liste, Adaptateur
➢ Consultation et édition d’un item
- Interface 1 - - Interface 2 -
2- L’idée de l’application :
Il s’agit d’une petite application qui permet le calcul de l’indice de masse
corporelle « IMC» et d’y afficher l’historique de tous les calculs réalisées.
Cette application est constituée d’une seule activité dans laquelle il y’a deux
fragments :
• Le premier Fragment « IMC» : représente l’interface de calcul

• Le deuxième Fragment « Historique» : Permet d’afficher l’historique des
calculs réalisés (Liste d’items).
➢ Nous allons nous intéresser dans ce chapitre par la réalisation de

ce 2éme fragment.
3- Wiki :
Veuillez consulter ces liens qui vous seront utiles dans la suite.
✓ Android Material design:

https://www.androidhive.info/2015/04/android-getting-started-with-
material-design/
✓ Android Tab Layout :
https://www.androidhive.info/2015/09/android-material-design-
working-with-tabs/
✓ Recycler View (Pour l'affichage d'une liste) :
https://www.androidhive.info/2016/01/android-working-with-recycler-
view/
✓ Couleur :
https://material.io/design/color/the-color-system.html#tools-for-
picking-colors
4- Réalisation (Affichage d’une liste):
• L’écran est occupé par un RecyclerView. C’est une vue spécialisée dans
l’affichage de listes quelconques.
Ajouter cette dépendance dans le fichier build.gradle pour pouvoir
l’utiliser.
implementation "androidx.recyclerview:recyclerview:1.2.1"
• Les informations relatives à chaque calcul d’indice de masse corporelle

sont contenus dans un objet de type ImcDetails (date, time, imcValue,
imcStatus).
• L’ensemble des calculs faits sont stockés dans une liste d’objets
List<ImcDetails> monIMCListe = new ArrayList<>() ;
Pour commencer, il faut représenter les données :
public class ImcDetails {
private String date;

private String time;
private String imcValue;
private String imcStatus;
public ImcDetails(String date, String time, String imcValue, String

imcStatus) {
this.date = date;
this.time = time;
this.imcValue = imcValue;
this.imcStatus = imcStatus;
}
}
Lui rajouter tous les accesseurs (getters) et modificateurs (setters) pour en faire
un JavaBean : objet Java simple (POJO) composé de variables membres privées
initialisées par le constructeur, et d’accesseurs.
1. 1- Rappel sur le container List<type> :

2.
C’est un type de données générique, c’est à dire paramétré par le type des
éléments mis entre <. . .> ; ce type doit être un objet.
List<TYPE> liste = new ArrayList<>();
NB: le type entre <> à droite est facultatif.
La variable est du type List (superclasse abstraite) et affectée avec un ArrayList.
La raison est qu’il faut de préférence toujours employer le type le plus général
qui possède les méthodes voulues.
Mais quand c’est une classe abstraite (une interface), on l’instancie avec une
sous-classe non-abstraite. Par exemple un List peut être instanciée avec un
ArrayList ou un LinkedList. On choisit en fonction des performances voulues :
un ArrayList est très rapide en accès direct, mais très lent en insertion. C’est
l’inverse pour un LinkedList.
Quelques méthodes utiles de la classe abstraite List, héritées par ArrayList :

✓ liste.size() : retourne le nombre d’éléments présents,
✓ liste.clear() : supprime tous les éléments,
✓ liste.add(elem) : ajoute cet élément à la liste,
✓ liste.remove(elem ou indice) : retire cet élément
✓ liste.get(indice) : retourne l’élément présent à cet indice,
✓ liste.contains(elem) : true si elle contient cet élément,

✓ liste.indexOf(elem) : indice de l’élément, s’il y est.
✓ 2- Affichage d’une liste :
✓
L’affichage de la liste est fait par un RecyclerView. C’est une vue qui intègre un
défilement automatique et qui veille à économiser la mémoire pour l’affichage.
Voici le plus simple layout qui remplit tout l’écran.
<androidx.recyclerview.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent" />
✓ 3- Adaptateur et ViewHolders :
Un RecyclerView affiche les items à l’aide d’un adaptateur :
Données Adaptateur Vue
La vue ne sert qu’à afficher les éléments de la liste. En réalité, seuls

quelques éléments seront visibles en même temps. Cela dépend de
la hauteur de la liste et la hauteur des éléments. Le principe du RecyclerView
est de ne gérer que les éléments visibles. Ceux qui ne sont pas visibles ne sont
pas mémorisés. Mais lorsqu’on fait défiler la liste ainsi qu’au début, de
nouveaux éléments doivent être rendus visibles. Le RecyclerView demande
alors à l’adaptateur de lui instancier (inflate) les vues pour afficher les
éléments. Le nom « RecyclerView » vient de l’astuce : les vues qui deviennent
invisibles à cause du défilement vertical sont recyclées et renvoyées de l’autre
côté mais en changeant seulement le contenu à afficher.
Pour permettre ce recyclage, il faut que les vues associées à chaque élément
puissent être soit recréées, soit réaffectées. On les appelle des ViewHolders,
parce que ce sont des mini-containers qui regroupent des vues de base (nom
de la planète, etc.).
public class IMCAdapter extends

RecyclerView.Adapter<IMCAdapter.MyViewHolder> {
private List<ImcDetails> imcList;

private Context mContext;
// ViewHolder
public class MyViewHolder extends RecyclerView.ViewHolder {
private TextView dateTV, timeTV, imcTV,imcStatus;
private ImageView smileIV;
public MyViewHolder(View view) {

super(view);
dateTV = view.findViewById(R.id.dateTV);
timeTV = view.findViewById(R.id.timeTV);
imcTV = view.findViewById(R.id.imcTV);
imcStatus = view.findViewById(R.id.imcStatusTV);
smileIV = view.findViewById(R.id.smileIV);
}
}
public IMCAdapter(Context context, List<ImcDetails> imcList) {

// Constructeur
this.imcList = imcList;
this.mContext = context;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
{
View itemView = LayoutInflater.from(parent.getContext())
.inflate(R.layout.imc_item_view, parent, false);
return new MyViewHolder(itemView);

}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
// Populate data into the given viewHolder
// get the specific data from liste by the given position

ImcDetails imc = imcList.get(position);
holder.dateTV.setText(imc.getDate());
holder.timeTV.setText(imc.getTime());
holder.imcTV.setText(imc.getImcValue());
holder.imcStatus.setText(imc.getImcStatus());
holder.smileIV.setVisibility(View.VISIBLE);
if (Double.parseDouble(imc.getImcValue()) < 18.5) {
holder.smileIV.setImageDrawable(mContext.getResources().getDrawable(R.drawa
ble.worst_smile_value));
} else if (Double.parseDouble(imc.getImcValue()) < 25) {
ble.best_value_smile));
ble.emoji));
holder.
smileIV.setImageDrawable(mContext.getResources().getDrawable(R.drawable.mid
dle_smile_value));
} else {
}
// Return the total count of items in the liste

@Override
public int getItemCount() {
return imcList.size();
}
}
Chaque adaptateur dispose de trois méthodes principales :
✓ onCreateViewHolder : pour gonfler la disposition de l'article et créer le

support.
✓ onBindViewHolder : pour définir les attributs de vue en fonction des
données.
✓ getItemCount : pour déterminer le nombre d'articles.
Nous devons implémenter les trois pour terminer l'adaptateur (regarder

le code ci-dessus).
Documentation officielle :
https://developer.android.com/guide/topics/ui/layout/recyclerview
✓ 4- Item click listener :

✓
✓ Afin de visualiser (consulter/modifier) un item choisit par l’utilisateur
(click/longClick) event, on peut définir des TouchListener sur notre
RecyclerView.
Regarder le code ci_dessous.
public void initRecyclerViewData() {
ArrayList<ImcDetails> imcList =
getIMCList(PreferenceManager.IMC_LIST);
mAdapter = new IMCAdapter(getContext(), imcList);
RecyclerView.LayoutManager mLayoutManager = new

LinearLayoutManager(getContext());
historiqueRV.setLayoutManager(mLayoutManager);
historiqueRV.setItemAnimator(new DefaultItemAnimator());
historiqueRV.setAdapter(mAdapter);
// row click listener

historiqueRV.addOnItemTouchListener(new
RecyclerViewTouchListener(getContext(), historiqueRV, new
RecyclerViewTouchListener.ClickListener() {
@Override
public void onClick(View view, int position) {
Toast.makeText(getContext(), "item " + position + " is
selected!", Toast.LENGTH_SHORT).show();
}
@Override
public void onLongClick(View view, int position) {
}
}));
}

6 - Affichage - Liste - Items

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

6 - Affichage - Liste - Items

Transféré par

Droits d'auteur :

Formats disponibles

UNIVERSITE DE CARTHAGE DEPARTEMENT

FACULTE DES SCIENCES DE BIZERTE INFORMATIQUE

Chapitre 6 : Affichage d’une liste d’items sous

➢ Stockage d’une liste

• Le premier Fragment « IMC» : représente l’interface de calcul

➢ Nous allons nous intéresser dans ce chapitre par la réalisation de

✓ Android Material design:

4- Réalisation (Affichage d’une liste):

• Les informations relatives à chaque calcul d’indice de masse corporelle

Pour commencer, il faut représenter les données :

public class ImcDetails {

private String date;

public ImcDetails(String date, String time, String imcValue, String

1. 1- Rappel sur le container List<type> :

Quelques méthodes utiles de la classe abstraite List, héritées par ArrayList :

✓ liste.contains(elem) : true si elle contient cet élément,

Un RecyclerView affiche les items à l’aide d’un adaptateur :

Données Adaptateur Vue

La vue ne sert qu’à afficher les éléments de la liste. En réalité, seuls

public class IMCAdapter extends

private List<ImcDetails> imcList;

public MyViewHolder(View view) {

public IMCAdapter(Context context, List<ImcDetails> imcList) {

return new MyViewHolder(itemView);

// get the specific data from liste by the given position

// Return the total count of items in the liste

Chaque adaptateur dispose de trois méthodes principales :

✓ onCreateViewHolder : pour gonfler la disposition de l'article et créer le

Nous devons implémenter les trois pour terminer l'adaptateur (regarder

✓ 4- Item click listener :

public void initRecyclerViewData() {

mAdapter = new IMCAdapter(getContext(), imcList);

RecyclerView.LayoutManager mLayoutManager = new

// row click listener

Vous aimerez peut-être aussi