P3 listes et elements graphiques avancés

Éléments Graphiques Avancés Interface graphique de base, éléments de sélection…

Formation Mobile 27 Aout au 1 Septembre 2015

Dr. L i l i a SFAXI www. l i l i asfax i .wix .com /l i l i asfax i

S l ide 1

ADAPTATEURS Éléments Graphiques Avancés


S l ide 2

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..


S l ide 3

Adaptateurs

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)


S l ide 4

Adaptateurs


S l ide 5

Exemple de ArrayAdapter

Layout. XML

Code Java

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


S l ide 6

Adaptateurs


S l ide 7

Exemple de ArrayAdapter Code Java

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


S l ide 8

Adaptateurs


S l ide 9

Exemple de Spinner

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


S l ide 10

Adaptateurs


S l ide 11

Exemple de AutoCompleteTextView

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’i l est égal à columnWidth , les colonnes seront étirées pour combler l ’espace vide. •  S’i l est égal à spacingWidth , les espaces entre les colonnes seront étirés pour combler

l ’espace vide.


S l ide 12

Adaptateurs


S l ide 13

Exemple de GridView

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

•  I l faut: •  Définir la l igne 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 l igne 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.


S l ide 14

Adaptateurs


S l ide 15

Exemple de Liste Personnalisée (layouts XML)

activity_liste_perso.xml ma_ligne.xml


S l ide 16

Exemple de Liste Personnalisée (Code Java et Rendu)

FRAGMENTS Éléments Graphiques Avancés


S l ide 17

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


S l ide 18

Fragments

Fragments: Cycle de Vie


S l ide 19

Éléments de Base d’une Application Android Etat de l’Activité

Created

Started

Resumed



S l ide 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.



S l ide 21

Éléments de Base d’une Application Android Etat de l’Activité

Paused

Stopped

Destroyed



S l ide 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

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


S l ide 23

Fragments

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


S l ide 24


Conteneur de l’activité parente, dans lequel le fragment sera inséré

ID du Layout à parcourir

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


S l ide 25


2. Ajout d’un Fragment à une Activité


S l ide 26


•  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>)

Ajout d’un Fragment sans UI


S l ide 27


•  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

FragmentManager


S l ide 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()

Gérer les Transactions


S l ide 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


S l ide 30

Exemple Complet : FragmentOne

FragmentOne.java

fragment_one.xml


S l ide 31

Exemple Complet : FragmentTwo

FragmentTwo.java

fragment_two.xml


S l ide 32

Exemple Complet: Activité

activity_my_fragment.xml

MyFragmentActivity.java


S l ide 33

Exemple Complet: Résultat

MENUS Éléments Graphiques Avancés


S l ide 34

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


S l ide 35

Menus

1.  App Icon 2.  Action Items 3.  Action Overflow

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


S l ide 36

Menu

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


S l ide 37

Menus


S l ide 38

Exemple de Action Bar

menu_my_action_bar.xml


S l ide 39

Exemple de Action Bar MyActionBarActivity.java


S l ide 40

Exemple de Action Bar

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


S l ide 41

Menus

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.


S l ide 42

Menus

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.)


S l ide 43

Menus


S l ide 44

Mode Contextuel: Implémenter ActionMode.Callback


S l ide 45

Mode Contextuel: Appeler startActionMode


S l ide 46

Mode Contextuel

��

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


S l ide 47

Menus


S l ide 48

Mode Contextuel pour une Liste d’Éléments


S l ide 49

Mode Contextuel pour une Liste d’Éléments

1

2

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()


S l ide 50

Menus


S l ide 51

Popup

PopupActivity.java

activity_popup.xml

action.xml


S l ide 52

Popup

P3 listes et elements graphiques avancés

Technology

Transcript of P3 listes et elements graphiques avancés