P3 listes et elements graphiques avancés

33 %
67 %
Information about P3 listes et elements graphiques avancés

Published on September 4, 2015

Author: LiliaSfaxi

Source: slideshare.net

1. Éléments Graphiques Avancés Interface graphique de base, éléments de sélection… Formation Mobile 27 Aout au 1 Septembre 2015 Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 1

2. ADAPTATEURS Éléments Graphiques Avancés Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 2

3. Layout Dynamique •  Si le contenu du Layout est dynamique, ou non pré-déterminé, utiliser un layout qui hérite de la classe AdapterView •  Permet de remplir le layout avec des vues à l’exécution •  Utilisation d’un Adapter dans cette sous-classe pour relier les données au layout •  Permet d’extraire les données d’une source (tableau ou requête de base de données) •  Convertit chaque entrée en une vue •  Ajoute la vue au layout •  Il existe plusieurs types d’adaptateurs.. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 3 Adaptateurs

4. ArrayAdapter •  Utiliser quand la source de données retourne un tableau •  D’abord créer l’adaptateur: prend trois paramètres : •  Contexte: instance de l’activité où il évolue •  Layout avec un textView pour chaque chaîne du tableau: par ex: ressource prédéfinie: android.R.layout.simple_list_item_1 •  Tableau ou liste : éléments à insérer •  Associer ensuite l’adaptateur à la liste (élément graphique de type ListView) Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 4 Adaptateurs

5. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 5 Exemple de ArrayAdapter Layout. XML Code Java

6. ArrayAdapter •  Associer un comportement au clic sur un élément de la liste: •  Créer une classe anonyme dans laquelle définir le comportement au clic de l’élément de la liste •  Définir cette classe comme Item Click Listener de votre liste Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 6 Adaptateurs

7. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 7 Exemple de ArrayAdapter Code Java

8. Liste Déroulante •  Appelées aussi Spinner •  Offre la même fonctionnalité qu’une Liste, mais en prenant moins d’espace •  Remplacer l’élément prédéfini android.R.layout.simple_list_item_1 par android.R.layout.simple_spinner_item par exemple. •  Associer un layout à utiliser quand la liste de choix apparaît avec setDropDownViewResource •  Pour spécifier le comportement à la sélection d’un élément dans la liste déroulante, implémenter les méthodes onItemSelected et onNothingSelected de la classe OnItemSelectedListener Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 8 Adaptateurs

9. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 9 Exemple de Spinner

10. AutoCompleteTextView •  Utilise des données prédéfinies pour auto-compléter la chaîne entrée par l’utilisateur par des suggestions •  Les suggestions sont présentées dans une liste de sélections, comme pour le Spinner •  Sous classe de EditText: •  On peut la paramétrer de la même manière •  Contient un attribut supplémentaire : android:completionThreshold : indique le nombre minimum de caractères qu’un utilisateur doit entrer pour que les suggestions apparaissent Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 10 Adaptateurs

11. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 11 Exemple de AutoCompleteTextView

12. Grille •  GridView: élément graphique qui permet d’afficher les éléments dans une grille de défilement à deux dimensions •  Les éléments sont automatiquement insérés dans la grille grâce à un ListAdapter •  Déterminer les caractéristiques de la grille dans son élément XML : •  android:numColumns : Nombre de colonnes •  android:verticalSpacing : Espacement vertical •  android:horizontalSpacing : Espacement horizontal •  android:columnWidth : Nombre de pixels défini pour la largeur de la colonne •  android:stretch: indique, pour les grilles avec un nombre de colonnes défini à auto_fit, ce qui doit arriver pour l’espace disponible, non occupé par les colonnes ou les espaces. •  S’il est égal à columnWidth, les colonnes seront étirées pour combler l’espace vide. •  S’il est égal à spacingWidth, les espaces entre les colonnes seront étirés pour combler l’espace vide. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 12 Adaptateurs

13. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 13 Exemple de GridView

14. Listes Personnalisées •  Permettent de gérer les situations où les listes correspondent aux situations suivantes: •  Les lignes ne suivent pas la même disposition •  Contiennent des éléments graphiques qui varient d’une case à l’autre •  Il faut: •  Définir la ligne individuelle dans un layout XML à part •  Créer vos propres adaptateurs, en surchargeant la méthode getView du ArrayAdapter pour construire vos propres lignes •  getView retourne une ligne associée à la position fournie •  Utiliser un LayoutInflater •  Permet de convertir un layout en XML vers le vrai arbre de vues que cet XML représente. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 14 Adaptateurs

15. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 15 Exemple de Liste Personnalisée (layouts XML) activity_liste_perso.xml ma_ligne.xml

16. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 16 Exemple de Liste Personnalisée (Code Java et Rendu)

17. FRAGMENTS Éléments Graphiques Avancés Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 17

18. Présentation •  Un Fragment représente un comportement ou une portion d’interface utilisateur dans une activité •  Plusieurs fragments peuvent être combinés dans une seule activité pour construire une interface à plusieurs volets (multi-pane) •  Un fragment peut être réutilisé dans plusieurs activités •  Un fragment : •  a son propre cycle de vie, mais est directement affecté par celui de son hôte •  reçoit ses propres entrées •  peut être ajouté ou enlevé dynamiquement pendant que l’activité s’exécute •  Vit à l’intérieur d’un ViewGroup dans la hiérarchie de son Activity •  Peut être ajouté à l’activité: •  Dans le fichier Layout XML, comme <fragment> •  Dans le code de l’application en l’ajoutant à un conteneur (ViewGroup) existant Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 18 Fragments

19. Fragments: Cycle de Vie Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 19 Éléments de Base d’une Application Android Etat de l’Activité Created Started Resumed

20. Fragments: Cycle de Vie Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 20 Éléments de Base d’une Application Android Invoquée quand le fragment est associé à une activity Invoquée pour créer sa propre interface utilisateur pour la première fois Invoquée quand la méthode onCreate() de l'activity se termine.

21. Fragments: Cycle de Vie Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 21 Éléments de Base d’une Application Android Etat de l’Activité Paused Stopped Destroyed

22. Fragments: Cycle de Vie Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 22 Éléments de Base d’une Application Android Invoquée quand la hiérarchie de View associée avec le fragment est enlevée. Invoquée quand le fragment est dissocié de l’ Activity

23. Création d’un Fragment •  Pour créer un fragment, il faut créer une classe qui hérite de android.app.Fragment (ou une de ses sous-classes) •  Sous-classes utiles de Fragment: •  DialogFragment •  Affiche une boîte de dialogue flottante, au lieu d’utiliser des méthodes dans votre activité, car il peut être rajouté à la pile des fragments de l’activité •  ListFragment •  Affiche une liste d’éléments gérés par un adaptateur •  Fournit plusieurs méthodes pour gérer une ListView •  PreferenceFragment •  Affiche une hiérarchie d’objets Preference comme liste •  Permet de créer une activité « settings » pour votre application Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 23 Fragments

24. 1. Création de l’Interface du Fragment •  Définir une interface pour le fragment dans un fichier Layout séparé •  Implémenter la méthode de transition onCreateView pour construire l’interface du fragment •  Doit retourner un objet View représentant la racine du fragment •  Utiliser un LayoutInflater pour construire l’interface à partir des ressources XML Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 24 Création d’un Fragment Conteneur de l’activité parente, dans lequel le fragment sera inséré ID du Layout à parcourir

25. 2. Ajout d’un Fragment à une Activité •  Soit déclarer le fragment dans le fichier layout XML de l’activité grâce à l’élément XML <fragment> •  android:name à classe du fragment à instancier dans le layout Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 25 Création d’un Fragment

26. 2. Ajout d’un Fragment à une Activité Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 26 Création d’un Fragment •  Soit ajouter le fragment à un élément ViewGroup dans le code •  Créer une transaction de fragment (ajout, suppression…) grâce au FragmentManager •  Ajouter un fragment en utilisant la méthode add(<conteneur>, <fragment>)

27. Ajout d’un Fragment sans UI Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 27 Création d’un Fragment •  Un fragment peut être utilisé pour fournir un comportement en arrière plan pour l’activité sans présenter d’interface supplémentaire •  Pour cela, ajouter le fragment à l’activité en utilisant add(Fragment, <tag_unique_du_frag>) •  Il est inutile d’implémenter onCreateView

28. FragmentManager Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 28 Fragments •  Le FragmentManager permet de gérer les fragments de votre activité •  Appeler getFragmentManager() à partir de votre activité •  Il permet de: •  Manipuler des fragments existants dans votre application grâce à findFragmentById() ou findFragmentByTag() •  Gérer la pile accessible via le bouton Back de votre appareil: •  Dépiler un fragment de la pile des fragments, avec popBackStack() •  Associer un Listener aux changement dans la pile avec addOnBackStackChangedListener()

29. Gérer les Transactions Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 29 Fragments •  Possibilité d’ajouter, supprimer, remplacer… des fragments dans une activité, en réponse à une interaction utilisateur •  Chacun de ces changements est appelé Transaction •  Utilisation de FragmentTransaction •  Il est possible de sauvegarder chaque transaction dans la pile de retour (Back Stack) de l’activité, pour permettre à l’utilisateur de revenir en arrière

30. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 30 Exemple Complet : FragmentOne FragmentOne.java fragment_one.xml

31. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 31 Exemple Complet : FragmentTwo FragmentTwo.java fragment_two.xml

32. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 32 Exemple Complet: Activité activity_my_fragment.xml MyFragmentActivity.java

33. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 33 Exemple Complet: Résultat

34. MENUS Éléments Graphiques Avancés Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 34

35. Menu d’Options et Action Bar •  Les APIs Menu étaient à la base destinées à définir le comportement (entre autres) du bouton Menu du téléphone, qui, depuis la version 3.0, est devenu obsolète •  Plusieurs terminaux récents sous Android ne possèdent plus ce bouton Ø  Les fonctionnalités du menu d’options sont désormais définies dans le Action Bar Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 35 Menus 1.  App Icon 2.  Action Items 3.  Action Overflow

36. Action Bar •  La barre d’action (Action Bar) est une caractéristique qui identifie l’emplacement de l’utilisateur et lui fournit des actions et des modes de navigation •  Fournit: •  Un espace dédié pour donner à votre application une identité et indiquer où se trouve l’utilisateur dans l’application •  Des actions importantes et accessibles (recherche, par ex) •  Navigation consistante et la possibilité de changer de vue dans une application (grâce aux tabulations ou liste déroulantes) •  Remarque: •  Pour exécuter ce qui suit, ajouter : compile "com.android.support:appcompat-v7:21.0.+ » à la section dependencies du fichier build.gradle de votre application Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 36 Menu

37. Action Bar •  Les actions de la barre sont définies dans un fichier XML se trouvant dans le répertoire res/menu •  Chaque action est représentée par un item, avec de préférence trois attributs: ID, Icône et Titre •  Dans le fichier Manifest, associer un thème à votre application supportant cette barre: android:theme="@style/Theme.AppCompat.Light" •  Faire hériter votre activité de la classe ActionBarActivity •  Implémenter les méthodes (générées automatiquement): •  onCreateOptionsMenu: construit le menu en appelant le menu XML •  onOptionsItemSelected: définit le comportement de chacune des actions de la barre Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 37 Menus

38. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 38 Exemple de Action Bar menu_my_action_bar.xml

39. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 39 Exemple de Action Bar MyActionBarActivity.java

40. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 40 Exemple de Action Bar

41. Menu Contextuel •  Un menu contextuel est un menu flottant qui apparaît quand l’utilisateur fait un clic-long sur un élément •  Fournit des actions qui affectent le contenu cliqué et/ou son conteneur •  A partir de la version 3 d’Android, utiliser plutôt le contextual action mode pour réaliser des actions sur le contenu sélectionné •  Affiche les actions qui affectent le contenu sélectionné dans une barre en haut de l’écran, et permet à l’utilisateur de sélectionner plusieurs éléments Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 41 Menus

42. Mode Contextuel •  Changer vers le mode contextuel si: •  L’utilisateur fait un clic long sur un élément •  L’utilisateur sélectionne une case à cocher (ou élément équivalent) de la page •  La barre d’action contextuelle prend momentanément la place de la barre d’action •  Il est possible d’activer ce mode dans deux cas: •  Pour des widgets individuels •  Pour un groupe d’éléments regroupé dans une liste ou une grille, par ex. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 42 Menus

43. Mode Contextuel : Pour un Élément Individuel 1.  Implémenter l’interface ActionMode.Callback •  Spécifier les actions de la barre contextuelle •  Répondre au clic sur les actions de la barre •  Gérer les autres évènements du cycle de vue du mode d’action 2.  Appeler la méthode startActionMode dans l’écouteur de l’évènement qui déclenche le mode d’action (le long clic par ex.) Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 43 Menus

44. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 44 Mode Contextuel: Implémenter ActionMode.Callback

45. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 45 Mode Contextuel: Appeler startActionMode

46. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 46 Mode Contextuel  

47. Mode Contextuel : Pour une Liste d’Éléments 1.  Implémenter l’interface AbsListView.MultiChoiceModeListener 2.  L’associer à la liste avec setMultiChoiceModeListener() 3.  Appeler setChoiceMode() avec l’argument CHOICE_MODE_MULTIPLE_MODAL Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 47 Menus

48. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 48 Mode Contextuel pour une Liste d’Éléments

49. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 49 Mode Contextuel pour une Liste d’Éléments 1 2

50. Mode Popup •  Affiche une liste d’éléments dans une liste verticale rattachée à la vue qui a invoqué le menu •  Utile pour fournir des actions associées au contenu spécifique •  Les action d’un menu Popup ne devraient pas affecter directement le contenu correspondant (c’est le menu contextuel qui s’en charge) •  Pour le définir: •  Instancier un objet PopupMenu prenant le contexte courant et la vue associée au menu •  Utiliser le MenuInflater pour construire les éléments du menu dans l’objet retourné par PopupMenu.inflate() •  Appeler PopupMenu.show() Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 50 Menus

51. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 51 Popup PopupActivity.java activity_popup.xml action.xml

52. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 52 Popup

Add a comment