La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Android_ListView_Introduction 1 Android ListView, ListActivity une introduction Notes de cours jean-michel Douin, douin au cnam point fr version : 28 Mars.

Présentations similaires


Présentation au sujet: "Android_ListView_Introduction 1 Android ListView, ListActivity une introduction Notes de cours jean-michel Douin, douin au cnam point fr version : 28 Mars."— Transcription de la présentation:

1 Android_ListView_Introduction 1 Android ListView, ListActivity une introduction Notes de cours jean-michel Douin, douin au cnam point fr version : 28 Mars 2013

2 Android_ListView_Introduction 2 Sommaire Vue –ListView Présentation –Adapter la Vue dune liste ditems aux souhaits du programmeur Le patron Stratégie –Utiliser des stratégies daffichage standard –Installer sa propre stratégie Accès aux ressources décrites en XML –Optimiser ces accès (cache), recyclage –Filtrage, tri Contrôleur –View / Activity OnItemClickListener, onItemClick –ListView / ListActivity onListItemClick onItemLongClick Technique … –Chargement dune liste et AsyncTask

3 Android_ListView_Introduction 3 Bibliographie utilisée Le cours de Victor Matos Plusieurs livres Android A Programmers Guide - McGraw Hill Professional Android Application Development – Wrox Le livre de Mark Murphy - Pearson Une vidéo youtube Google IO the world of ListView par Romain Guy

4 Android_ListView_Introduction 4 Présentation dune liste ditems Un composant graphique commun –À un grand nombre dapplications

5 Android_ListView_Introduction 5 Item de la liste Un texte par Item soit LinearLayout +TextView (standard, prédéfini) Chaque item de la liste est une View Une Image, Un titre, un nombre LinearLayout + TableRow + ImageView + TextView Défini par lapplication

6 Android_ListView_Introduction 6 ListView Vue Une liste de vues présentant des items Chaque item saffiche selon un format, –Format défini en XML, –Un adaptateur se charge de laffichage, Un style de présentation, une stratégie daffichage, est choisie Il existe des stratégies standard –Une liste ditems constituée de noms séparés dun trait, ArrayAdapter –Une liste ditems constituée dune grille, SimpleAdapter, –Une liste ditems, reflet dune interrogation dans une base de données CursorAdapter –Des adaptateurs créés par le programmeur BaseAdapter est la classe toute prête qu il suffira de dériver

7 Android_ListView_Introduction 7 Vue, Contrôleur et Modèle Vue La vue de la liste et sa stratégie daffichage –Les items saffichent selon une stratégie Standard, prédéfinie Style de présentation, stratégie daffichage définie par lutilisateur –setAdapter Contrôleur Les interactions avec lutilisateur –A chaque clic sur lun des items une action est déclenchée Une action est déclenchée, un menu apparaît… –onItemClickListener et ListView, Activity –onListItemClick au sein dune ListActivity Modèle La liste des objets Java représente le modèle –List, Item[], toute collection (une classe Java,…) –Tout changement détat du modèle sera notifié à la vue Adéquation Vue/Modèle prise en charge par Android –getAdapter(). notifyDataSetChanged();

8 Android_ListView_Introduction 8 Vue, style daffichage Vue La vue de la liste et sa stratégie daffichage –Les items saffichent selon une stratégie –setAdapter Standard, prédéfinie Style de présentation, stratégie daffichage définie par lutilisateur Patron Strategy –Usage classique : Layout en Swing –http://best-practice-software-engineering.ifs.tuwien.ac.at/patterns/strategy.htmlhttp://best-practice-software-engineering.ifs.tuwien.ac.at/patterns/strategy.html –Un rappel en quatre diapositives

9 Android_ListView_Introduction 9 Le patron stratégie, loriginal Strategy –Une interface commune ConcreteStrategy –Quelle stratégie effective ? Context –Utilisation dune stratégie choisie par le client, à la configuration

10 Android_ListView_Introduction 10 Le patron stratégie, loriginal Strategy –Une interface commune pour tous les affichages Android : ListAdapter ConcreteStrategy –Quelle stratégie pour quel rendu ? Android : ArrayAdapter, SimpleAdapter, CursorAdapter, BaseAdapter, MonAdaptateur, MaStratégieDAffichage … Context –Utilisation dune stratégie choisie par le client Android : ListView

11 Android_ListView_Introduction 11 Un exemple : Usage du patron Strategy Le patron Strategy / API Android Classe Strategy / android.widget.Adapterandroid.widget.Adapter Classe ConcreteStrategy / android.widget.ArrayAdapterandroid.widget.ArrayAdapter –Son usage (ici simplifié) avec le nom des classes des API Android

12 Android_ListView_Introduction 12 Adapter, ListAdapter android.widget.ArrayAdapter est une stratégie concrète toute prête Dans laquelle ces 3 méthodes sont implémentées, pour chaque item getCount, le nombre ditems getItem, litem à cette position getView, la vue de cet item

13 Android_ListView_Introduction 13 Adapter, ListAdapter + ListView ListView liste = (ListView)findViewById(R.id.liste); liste.setAdapter(new ArrayAdapter ( ….

14 Android_ListView_Introduction 14 Un premier exemple et son affichage La ListView est décrite en XML –Le fichier res/layout/liste.xml –Avec une stratégie prédéfinie setAdapter( new ArrayAdapter (contexte, Ressource_XML_Prédéfinie, String[] modèle Une Activity –Un affichage setContentView Un modèle –Un diplôme Cnam constitué de plusieurs unités denseignement NFP121, NSY102, RSX116, SMB116, SMB117, UARS01 –String[] ou List

15 Android_ListView_Introduction 15 Le fichier res/layout/liste.xml –La liste est un composant graphique, son identifiant R.id.listeId La ListView est décrite en XML

16 Android_ListView_Introduction 16 Une activity, onCreate, affectation de la Vue Redéfinition de la méthode onCreate –Cumul du comportement –Affectation de la Vue (res/layout/liste.xml) setContentView –lv référence le composant graphique findViewById

17 Android_ListView_Introduction 17 Une activity, le modèle Le modèle itemsCC : – items dun certificat de compétences constitué de 6 unités NFP121, RSX116, NSY102, SMB116, SMB117, UARS01 –Unités enseignées au Cnam (présentiel et à distance) –Certificat de compétences intégrateur applications mobilesCertificat de compétences intégrateur applications mobiles –String[] itemsCC = …

18 Android_ListView_Introduction 18 Une activity, choix de la stratégie daffichage Stratégie : lv.setAdapter( new ArrayAdapter ( – Choix de la stratégie standard daffichage this, le contexte android.R.layout.simple_list_item_1, un texte par ligne, prédéfini itemsCC, le modèle

19 Android_ListView_Introduction 19 Exécution, le rendu Le rendu ici un item constitué dun texte par ligne

20 Android_ListView_Introduction 20 Une activity, choix de la stratégie daffichage Le rendu : un item par liste –android.R.layout.simple_list_1 est prédéfini Serait-ce un TextView ?

21 Android_ListView_Introduction 21 android.R.simple_list_item_1 Un item de la liste est décrit ainsi –Standard … – /platforms/ /data/res/layout/simple_list_item_1.xml

22 Android_ListView_Introduction 22 Dautres prédéfinis existent

23 Android_ListView_Introduction 23 Sommaire-suite Vue –ListView Présentation –Adapter la Vue dune liste ditems aux souhaits du programmeur Le patron Stratégie –Utiliser des stratégies daffichage standard –Installer sa propre stratégie Accès aux ressources décrites en XML –Optimiser ces accès (cache), recyclage –Filtrage, tri Contrôleur –View/Activity onItemClick, OnItemClickListener –ListView/ListActivity onListItemClick onItemLongClick Technique … –Chargement dune liste et AsyncTask

24 Android_ListView_Introduction 24 Un deuxième exemple Lexemple précédent sest enrichi Ajoutons pour chaque item –Une image pour la période denseignement 1er ou 2ème semestre –Le lieu denseignement en présentiel Prévoir que ce lieu puisse changer…

25 Android_ListView_Introduction 25 Description xml, dun item Chaque item de la liste contient : –Lintitulé de lunité –Une image suivie du lieu denseignement Le fichier res/layout/uecnam.xml –Décrit complètement cet item

26 Android_ListView_Introduction 26 Description xml, dune ligne Chaque ligne contient : Lintitulé de lunité –TextView Une image suivie du lieu denseignement

27 Android_ListView_Introduction 27 Description xml, dune ligne Chaque ligne contient : Lintitulé de lunité Une image suivie du lieu denseignement –ImageView suivie TextView

28 Android_ListView_Introduction 28 Le rendu attendu Stratégie à créer, il faut donc écrire notre propre Adapter –Notons que seules 5 unités, items, sont affichés ici Android a déclenché les 5 affichages correspondants 5 appels de getView, getItem,… de la stratégie choisie

29 Android_ListView_Introduction 29 Proposons maintenant notre propre Adapter Selon le patron Strategy, –Une classe implémentant linterface ListAdapter Aidons nous de lexistant … Il existe une sous classe quil suffit de dériver –BaseAdapter Il suffira de définir getCount, getItem, getItemId et getView Nous lappellerons UECnamAdapter –Notre modèle a évolué Ce nest plus une simple table dintitulés –NFP121, RSX116, NSY102, SMB116, SMB117, UARS01

30 Android_ListView_Introduction 30 Notre modèle a évolué Diplôme, UE deviennent des objets métiers –Un diplôme est constitué dunités denseignement (UE) Chaque diplôme –possède un intitulé et –délivre une liste de ses UE qui le compose List getListe() –Une UE est constituée dun intitulé, –String getNom() du lieu denseignement et –String getLieu() de la période –String getPeriode() DiplômeUE

31 Android_ListView_Introduction 31 Lactivité ne change guère, tjs quelques lignes Proposons une stratégie concrète UECnamAdapter –Il ne nous reste plus quà définir les méthodes getCount, getItem, getItemId et getView

32 Android_ListView_Introduction 32 La classe UECnamAdapter Une stratégie concrète daffichage des items UECnamAdapter hérite de BaseAdapter Tout diplôme propose la liste des unités qui le compose –getCount, getItem, getItemId sont immédiats

33 Android_ListView_Introduction 33 La classe UECnamAdapter, méthode getView Cette méthode est appelée par Android –À chaque affichage de la liste et seulement sur les lignes présentées Notre exemple présente 5 unités sur 6 –5 appels de getView –getView la méthode

34 Android_ListView_Introduction 34 La classe UECnamAdapter, méthode getView Pour chaque Item, nous avons getView algorithme : –Allons chercher le fichier XML défini pour lUE (uecnam.xml) –Réalisons ladéquation ListView / Modèle –Ligne de la liste / UE du diplôme Affectons les items de chaque View avec certains attributs de lUE

35 Android_ListView_Introduction 35 Identifiants et affectation des champs Les identifiants issus du fichier XML –nomId –ImageId –lieuId

36 Android_ListView_Introduction 36 La méthode getView Allons chercher le fichier XML défini pour lUE (res/layout/uecnam.xml) –LayoutInflater lecture du fichier XML Création de larbre Java –Inflate( le fichier XML, la racine, booléen (complétion dun arbre existant)

37 Android_ListView_Introduction 37 La méthode getView Réalisons ladéquation –ListView / Modèle Item de la liste / UE du diplôme –Affectons les items de chaque View avec certains attributs de lUE

38 Android_ListView_Introduction 38 Prohibitif en temps dexécution ! Inflate transforme à la volée le fichier XML en arbre Java –En version naïve cette transformation se produit à chaque appel A chaque manipulation de lutilisateur A chaque affichage dans la partie visible de la liste … –Performance en temps dexécution? Idée : Le système pourrait avoir déjà créé la vue, devenue invisible … et pourrait tenter un recyclage

39 Android_ListView_Introduction 39 Recyclage, performances Source

40 Android_ListView_Introduction 40 Recyclage de la vue dun item Optimisation 1.Le système a déjà créé la vue, dont il a conservé une référence 2.il tente un recyclage en transmettant cette référence La référence est transmise à la méthode getView –Un contrat est en place Si le paramètre convertView == null, la vue doit être créée –Alors les liens sur les vues de la ligne sont conservées dans un cache »Cache géré par le programmeur Sinon une référence de la vue est transmise et peut donc être utilisée –Nous utiliserons alors les éléments du cache

41 Android_ListView_Introduction 41 Gestion du cache dun item, déclaration Une classe interne et statique au sein de UECnamAdapter Ce cache dun item constitué dune instance de CacheView Cette instance est conservée dans un champ (tag) de la Vue de litem itemView.setTag (new CacheView(…) Interne et statique sera préférée, attention aux classes internes et membres qui conservent une référence de linstance englobante, référence engendrant parfois des fuites mémoires

42 Android_ListView_Introduction 42 Gestion du cache, le contrat getView alors la vue doit être créée les références sur les vues de litem sont installées dans un cache sinon les références sont extraites du cache

43 Android_ListView_Introduction 43 Initialisation du cache (convertView == null) Le champ tag dune vue permet de mémoriser une référence

44 Android_ListView_Introduction 44 Cest du recyclage, convertView != null Le champ tag dune vue permet de mémoriser une référence (Ici le cache entre deux affichages) Le cache est utilisé

45 Android_ListView_Introduction 45 Tri, filtrage La classe Adapter sen charge Ou bien le modèle propose ce type de méthodes Ordre alphabétique des UE Ordre en fonction de la période (1er ou 2ème semestre) Etc..

46 Android_ListView_Introduction 46 En exemple de tri, ici selon le nom et la période Il suffit de proposer, selon les critères retenus –Une implémentation de linterface Comparator entre deux UE Java tradition, cf. java.util.Collections

47 Android_ListView_Introduction 47 Sommaire Vue –ListView Présentation –Adapter la Vue dune liste ditems aux souhaits du programmeur Le patron Stratégie –Utiliser des stratégies daffichage standard –Installer sa propre stratégie Accès aux ressources décrites en XML –Optimiser ces accès (cache), recyclage –Filtrage, tri Contrôleur –Le modèle a changé –View / Activity onItemClick, OnItemClickListener –ListView / ListActivity onListItemClick onItemLongClick Technique … –Chargement dune liste et AsyncTask

48 Android_ListView_Introduction 48 Le lieu denseignement change … Ce qui peut arriver, le modèle change –La vue est prévenue …. –Changement du modèle RSX116 est maintenant programmé en studio denregistrement en Appel du mutateur, changement de lieu –Appel de la méthode de ladapter ((BaseAdapter)lv.getAdapter()). notifyDataSetChanged(); –Adéquation par Android du modèle et de la vue Réactualisation, appel(s) automatique(s) de getView

49 Android_ListView_Introduction 49 Activity versus ListActivity Activity –Déclaration dune ListView dans un fichier, recherche par lidentifiant ListView lv = (ListView) findViewById(R.id.liste) –Affectation de la stratégie daffichage lv.setAdapter(new UeCnamAdapter( … –Affectation des écouteurs, aux items de la liste par le programme En général des instances de classes internes et membres –Pour chaque item de la liste, une instance dune classe »implements OnItemClickListener ListActivity –La déclaration est implicite Il doit exister une liste dont lId –Affectation de la stratégie daffichage, par une méthode setListAdapter(new UECnamAdapter( … –Affectation des écouteurs implicite Il suffit de redéfinir la méthode onListItemClick, redéfinie de la classe ListActivity Alors ListActivity nous préférerons

50 Android_ListView_Introduction 50 Une classe dédiée ListActivity usage des ListView par une sous classe dActivity : ListActivity res/layout/liste.xml contient une ListView avec cet ListeActivity liste.xml La liste doit avoir cet identifiant

51 Android_ListView_Introduction 51 Contrôleur, ListActivity Au clic, contextuel –A chaque clic un toast est présenté, lURL de lUE est affiché À terme le site de lunité pourrait être présenté … –Méthode onListItemClick, redéfinie de la classe ListActivity

52 Android_ListView_Introduction 52 A chaque clic, un Toast est affiché Ici un clic sur RSX116 affiche lURL de lunité Une deuxième activité pourrait être exécutée –Par exemple une WebView …

53 Android_ListView_Introduction 53 Contrôleur, Activity et OnItemClickListener Une implémentation de OnItemClickListener

54 Android_ListView_Introduction 54 Sommaire Vue –ListView Présentation –Adapter la Vue dune liste ditems aux souhaits du programmeur Le patron Stratégie –Utiliser des stratégies daffichage standard –Installer sa propre stratégie Accès aux ressources décrites en XML –Optimiser ces accès (cache), recyclage –Filtrage, tri Contrôleur –View/Activity onItemClick, OnItemClickListener –ListView/ListActivity onListItemClick onItemLongClick Technique … –Chargement dune liste et AsyncTask –Chaque chargement ditem est en tâche de fond et utilise AsyncTask

55 Android_ListView_Introduction 55 Rappel : schéma de programme, syntaxe, AsyncTask public void onStart(){ … WorkAsyncTask wt = new WorkAsyncTask(); wt.execute(string1, string2, string3); … } private class WorkAsyncTask extends AsyncTask { void onPreExecute() { // faire patienter lutilisateur, affichage dun sablier… Boolean doInBackGround(String... t){ // effectuer la tâche coûteuse en temps // t[0]/string1, t[1]/string2,… void onProgressUpdate(Long... v) { // informer lutilisateur que le traitement est en cours void onPostExecute(Boolean b) { // le sablier disparaît, une éventuelle erreur est affichée }

56 Android_ListView_Introduction 56 Chargement des items dune liste et AsyncTask Si le chargement des items dune liste devient coûteux en temps dexécution Alors ce chargement pourrait être effectué en tache de fond Construction de la liste item par item en tâche de fond –Usage de AsyncTask –Reprenons le premier exemple …

57 Android_ListView_Introduction 57 Une exemple dusage dAsyncTask ConstructionListe extends AsyncTask –ArrayAdapter contient une liste vide, Celle-ci sera affectée en tache de fond

58 Android_ListView_Introduction 58 ConstructionListe extends AsyncTask Construction de la liste en tache de fond …

59 Android_ListView_Introduction 59 Le chargement de la liste nécessite une requête sur le web : encore AsyncTask private class ChargeurDeLaListe extends AsyncTask { ProgressDialog dialog void onPreExecute() { dialog = ProgressDialog( // … Boolean doInBackGround(URL... t){ UneListe = Résultat dune Requete en URL[0]… void onPostExecute(Boolean b) { Affecter UneListe selon la stratégie ou bien prévenir si échec dialog.dissmiss(); }

60 Android_ListView_Introduction 60 Chargement dun item dune liste et AsyncTask Si le chargement dun item dune liste devient coûteux en temps dexécution –Usage de AsyncTask Source

61 Android_ListView_Introduction 61 Source

62 Android_ListView_Introduction 62 CursorAdapter et les contacts Autre support …

63 Android_ListView_Introduction 63 Sauvegarde / restitution du modèle Par exemple entre deux rotations de lécran… Une solution –Classe interne et statique + Variable de classe –Soit : Une zone mémoire de la DVM, indépendante du cycle de vie de lactivité –Nous préférerons un service très inspiré de

64 Android_ListView_Introduction 64 A la création public class ListeActivity extends ListActivity { private static Modèle modèle; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // restitution éventuelle modèle = (Modèle) getLastNonConfigurationInstance(); }

65 Android_ListView_Introduction 65 Démarrage et Sauvegarde au cas public Object onRetainNonConfigurationInstance() { return modèle; } À lire : configuration-change-by-overriding-onre/


Télécharger ppt "Android_ListView_Introduction 1 Android ListView, ListActivity une introduction Notes de cours jean-michel Douin, douin au cnam point fr version : 28 Mars."

Présentations similaires


Annonces Google