Applications Android - cours 10 : Vues à adaptateur

Université Constantine 2
Dr. CHAOUCHE A.-C.
Faculté des nouvelles technologies
ahmed.chaouche@univ-constantine2.dz
– Cours 10 –
Chapitre 7 : Vues à adaptateurs et boites de dialogue (1/2)
Vues à adaptateur
Développement d’applications mobiles
2018/2019. Semestre 1

Université Constantine 2
Etudiants concernés
Faculté/Institut Département Niveau Spécialité
2018/2019. Semestre 1
Dr. CHAOUCHE A.-C.
Faculté des nouvelles technologies
ahmed.chaouche@univ-constantine2.dz
Développement d’applications mobiles
Licence 3 Technologies de l’information (TI)Nouvelles technologies IFA
Licence 3 Science de l’informatique (SCI)Nouvelles technologies IFA
– Cours 10 –
Chapitre 7 : Vues à adaptateurs et boites de dialogue (1/2)
Vues à adaptateur

Université Constantine 2 3
Prérequis
Gestion des vues et des layouts
Gestion des évènements
Objectifs du cours
Créer et manipuler des vues à adaptateur (ListView, GridView, ...)
Créer des vues à adaptateur personnalisé
Résumé
© Dr. Chaouche A.-C.

Vues à adaptateur

Une vue à adaptateur (AdapterView) est une sous-classe de ViewGroup
où ses vues filles sont déterminées par un Adapter qui relie l'objet
AdapterView aux données.
Pour afficher des collections (List, Set, Map, ...)
Héritent de AdapterView :
ListView
Spinner
GridView
AutoCompleteTextView
Gallery
...
Ces vues gèrent leurs données via des adaptateurs
Vues à adaptateurs

Design pattern : Adapter (1/2)

Design pattern : Adapter (2/2)
Collection
Mercury
Venus
Earth
Mars
Jupiter
Saturn
Uranus
Neptune

Spinner et ArrayAdapter
/java/MainActivity.java
Spinner spinner = (Spinner) findViewById(R.id.spinner);
...
String[] items = {"Mercury", "Venus", "Earth", ... };
ArrayAdapter<String> adapter =
new ArrayAdapter<>(this,
android.R.layout.simple_list_item_1,
items);
spinner.setAdapter(adapter);
...
/res/layout/activity_main.xml
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/spinner"/>
TV

Modification de l'activité ModulesActivity
Un GridView pour afficher la liste des modules
Un FloatingActionButton pour mettre à jour la
liste des modules
En cliquant sur chaque élément de la liste
→ Afficher le nom du module dans un Toast
TP3a : Création d’une vue des modules

TP3a : Création d’une vue des modules
Modification de l'activité ModulesActivity
Un GridView pour afficher la liste des modules
Un FloatingActionButton pour mettre à jour la
liste des modules
En cliquant sur chaque élément de la liste
→ Afficher le nom du module dans un Toast

Interagir avec un AdapterView à travers des Listeners
OnItemClickListener
▪ onItemClick(AdapterView<?> parent, View view, int position, long id)
OnItemLongClickListener
▪ onLongClick(AdapterView<?> parent, View view, int position, long id)
OnItemSelectedListener
▪ onItemSelected(AdapterView<?> parent, View view, int position, long id)
▪ onNothingSelected(AdapterView<?> parent)
Listeners d’un AdapterView

Hiérarchie des adaptateurs

Méthodes de mise à jour des adaptateurs
android.widget.Adapter
void add(T item) // ajouter un élément en fin de l’AdapterView
void insert(T item, int index) // insérer un élément à une position donnée
void addAll(T... items) // insérer plusieurs éléments
T getItem(int index) // récupérer l’élément d’une position donnée
int getPosition(Object o) // récupérer la position d’un élément donné
void remove(T item) // supprimer un élément donnée
void clear() // supprimer tous les éléments
void notifyDataSetChanged() // notifie l’AdapterView des nouveaux
changements pour se rafraîchir

Vues à adaptateur personnalisé (1/3)
Collection
Mercury
Venus
Earth
Mars
Jupiter
Saturn
Uranus
Neptune
Collection
<Country>
country1
country2
country3
country4
country5
...

List<Country>
new Country(flagId,"Sweden")
new Country(flagId,"Switz…")
new Country(flagId,"Taiwan")
new Country(flagId,"United…")
...
position
position
TVIV

List<Country>
...
position
position
TVIV
@Override
getView(position, ...){
...
}

Vues à adaptateur personnalisé
1. Créer l’entité Country
/java/Country.java
public class Country {
int flagResourceId;
String name;
...
public Country(int flagResourceId, String name){
this.flagResourceId = flagResourceId;
this.name = name;
}
}

2. Créer une vue pour l'item
/res/layout/item_country.xml
<LinearLayout
xmlns:android="http://schemas.android.com/..."
android:orientation="horizontal">
<ImageView
android:id="@+id/flagIV"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/nameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
TVIV

3.a. Créer un adaptateur personnalisé
List<Country>
(flagId,"Sweden")
(flagId,"Switzerland")
(flagId,"Taiwan")
...
CountryAdapter

3.a. Créer un adaptateur personnalisé
/java/CountryAdapter.java
public class CountryAdapter extends ArrayAdapter<Country> {
Activity activity;
int itemResourceId;
List<Country> items;
...
public CountryAdapter(Activity activity,
int itemResourceId,
List<Country> items) { ... }
@Override
public View getView(int position,
View convertView,
ViewGroup parent) { ... }
}
b
c
a

3.b. Implémenter le Constructeur
...
Activity activity;
int itemResourceId;
public CountryAdapter(Activity activity, int itemResourceId, List<Country> items){
super(activity, itemResourceId, items);
this.activity = activity;
this.itemResourceId = itemResourceId;
this.items = items;
}
...

List<Country>
...
3.c. Redéfinir la méthode getView()
position
position
TVIV
@Override
getView(position, ...){
...
}

Activity activity;
int itemResourceId;
@Override
public View getView(int position, View convertView, ViewGroup parent){
}

Activity activity;
int itemResourceId;
@Override
View layout = convertView;
if (convertView == null){
LayoutInflater inflater = activity.getLayoutInflater();
layout = inflater.inflate(itemResourceId, parent, false);
}
}
Obtenir
le layout
TVIV
layout

Activity activity;
int itemResourceId;
@Override
}
TextView nameTV = (TextView) layout.findViewById(R.id.nameTV);
ImageView flagIV = (ImageView) layout.findViewById(R.id.flagIV);
}
Obtenir
le layout
Récupérer
les vues
TVIV
nameTVflagIV

Activity activity;
int itemResourceId;
@Override
}
TextView nameTV = (TextView) layout.findViewById(R.id.nameTV);
ImageView flagIV = (ImageView) layout.findViewById(R.id.flagIV);
nameTV.setText(items.get(position).name);
flagIV.setImageResource(items.get(position).flagResourceId);
return layout;
}
Obtenir
le layout
Récupérer
les vues
Remplir
les vues

4. Associer l'adaptateur au Spinner
/java/MainActivity.java
Spinner spinner = (Spinner) findViewById(R.id.spinner);
...
List<Country> items = new ArrayList<>();
items.add(new Country(R.drawable.flag_sweden, "Sweden")); ...
CountryAdapter adapter =
new CountryAdapter(MainActivity.this,
R.layout.item_country,
items);
spinner.setAdapter(adapter);
...
/res/layout/activity_main.xml
<Spinner
android:id="@+id/spinner"/>

Personnalisation de l'activité ModulesActivity
Améliorer le design de la vue
Création de l’entité Module qui contient les
informations d’un module
Création de la vue de chaque élément item_module
Création de ModuleAdapter dérivant de
ArrayAdapter<Module>
TP3b : Création d’une vue des modules (1/2)

TP3b : Création d’une vue des modules (2/2)
/java/Module.java
public class Module {
int id;
String accronym;
String name;
String description;
int credit;
...
public Module(int id, ...){
this.id = id;
...
}
}
/res/layout/item_module.xml
/java/ModuleAdapter.java
...

AdapterView :
https://developer.android.com/reference/android/widget/AdapterView.html
ListView à adaptateurs personnalisés :
http://www.journaldev.com/10416/android-listview-with-custom-adapter-example-
tutorial
Quelques liens utiles

Android Developer, «Grid View,». Lien : https://developer.android.com/
guide/topics/ui/layout/gridview.html.
Android Developer, «Spinners,». Lien : https://developer.android.com/
guide/topics/ui/controls/spinner.html.
Source making, «Adapter Design Pattern,». Lien :
https://sourcemaking.com/design_patterns/adapter.
Android Developer, «References - Android Plateform API 26 : AdapterView,». Lien :
https://developer.android.com/reference/android/ widget/AdapterView.html.
Android Developer, «References - Android Plateform API 26 : Adapter,». Lien :
developer.android.com/reference/android/widget/Adapter.html.
Android Developer, «References - Android Plateform API 26 : ArrayAdapter,». Lien
: https://developer.android.com/reference/android/ widget/ArrayAdapter.html.
Références

Applications Android - cours 10 : Vues à adaptateur

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Applications Android - cours 10 : Vues à adaptateur

Similaire à Applications Android - cours 10 : Vues à adaptateur (19)

Dernier

Dernier (15)

Applications Android - cours 10 : Vues à adaptateur