SlideShare une entreprise Scribd logo
Institut National des Sciences Appliquées et de Technologie Tunisie
Développement Android
2015-2016
TP3- ÉLEMENTS GRAPHIQUES AVANCES
(P2) : FRAGMENTS & MENUS
Dr. Lilia SFAXI
Objectifs du TP : Continuer avec les éléments graphiques avancés, pour voir les fragments et
Dr. Lilia SFAXI
Objectifs du TP : Continuer avec les éléments graphiques avancés, pour voir les fragments et
les menus : contextuels, et d’options
TP3 : Éléments Graphiques Avancés : Fragments & Menus
Page 2
I. Fragments
I.1 Définition et Utilité
Un fragment représente un comportement ou une portion d’interface utilisateur dans une activité. Il
est possible de combiner plusieurs fragments dans une seule activité pour construire une interface
à plusieurs panneaux, et réutiliser un fragment dans plusieurs activités.
Un fragment a son propre cycle de vie, reçoit ses propres entrées et peut être ajouté, modifié ou
supprimé de manière dynamique. Il est toujours inclus dans une activité, et son cycle de vie est
directement affecté par celui de l’activité qui le contient. Tant que l’activité conteneur est en état
d’exécution, le fragment peut être manipulé de manière indépendante (ajouté, modifié ou supprimé).
Mais si l’activité est détruite, le fragment l’est aussi.
A la base, les fragments ont été créés pour supporter la conception d’interfaces graphiques
flexibles sur des écrans de tailles différentes, et permettre ainsi aux appareils dont la taille d’écran
est plus importante (comme les tablettes) de profiter de cet espace pour combiner et inter-changer
des composants graphiques.
TP3 : Éléments Graphiques Avancés : Fragments & Menus
Page 3
I.2 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. Parmi ces sous-classes on peut citer :
• 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, et fournit ainsi plusieurs méthodes
pour gérer une listView.
TP3 : Éléments Graphiques Avancés : Fragments & Menus
Page 4
• PreferenceFragment
Affiche une hiérarchie d’objets Preference comme liste. Permet de créer une activité settings
pour votre application.
Pour créer un fragment, il faut suivre les étapes suivantes :
1. Créer l’interface du fragment
• Commencer par 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
o Elle doit retourner un objet View représentant la racine du fragment
o Utiliser un LayoutInflater pour construire la hiérarchie d’objets graphiques à partir
des ressources XML
2. Ajouter le fragment à une activité
Le fragment peut être ajouté de manière statique ou dynamique à l’activité.
• Statique : Déclarer le fragment dans le fichier layout XML de l’activité, grâce à l’élément XML
<fragment>. Pour cela, indiquer comme attribut android :name la classe Java du fragment à
instancier dans le layout
• Dynamique : Insérer dans le code de l’activité le fragment créé dans un conteneur
(ViewGroup) existant dans l’interface. Pour cela, un FragmentManager est utilisé.
TP3 : Éléments Graphiques Avancés : Fragments & Menus
Page 5
Un FragmentManager permet de gérer les fragments d’une activité particulière. Pour l’utiliser, il
suffit d’appeler directement getFragmentManager à partir de n’importe quel emplacement de votre
activité.
Le FragmentManager permet de :
• Manipuler les fragments existants dans votre application grâce aux méthodes
findFragmentById() ou findFragmentByTag()
• Gérer la pile de retour (Back Stack), accessible via le bouton Back de l’appareil
o Dépiler un fragment de la pile, avec popBackStack()
o Associer un Listener aux changements de cette pile avec
addOnBackStackChangedListener()
La manipulation des fragments par le FragmentManager est possible grâce à un ensemble de
FragmentTransactions. Une transaction est une opération sur des fragments (ajout, suppression,
remplacement…) dans une activité, en réponse à une interaction utilisateur.
Une transaction peut être stockée dans la pile de retour de l’activité, pour permettre à l’utilisateur
de revenir en arrière, grâce à la méthode addToBackStack().
II. Exercice 1 : Fragments
II.1 Objectif
Durée estimée de l’exercice : au plus 1h 15
L’objectif de cet exercice est de montrer comment créer et inter-changer des fragments dans une
application Android. L’objectif est d’obtenir le résultat suivant :
TP3 : Éléments Graphiques Avancés : Fragments & Menus
Page 6
II.2 Création des fragments
Pour créer les fragments, commencer par :
• Créer une application avec une simple activité vide.
• Créer le layout pour le premier fragment. Pour cela, créer un fichier frag_digital.xml sous le
répertoire layout
• Y insérer un objet AnalogClock, et utiliser la couleur d’arrière plan de votre choix
• Faire de même pour créer un fragment frag_numeric avec une horloge de type TextClock
• Créer une classe FragmentClock qui étend la classe Fragment.
• La première chose à faire est d’implémenter la méthode onCreateView qui représente le
comportement du fragment dès son apparition. Dans cette méthode, nous allons indiquer
quel fragment charger. Pour charger le fragment frag_digital, par exemple, la méthode
onCreateView doit retourner :
Laisser l’implémentation de cette partie pour plus tard.
II.3 Création de l’activité principale
Pour créer l’activité principale :
• Commencer par créer son interface. Pour cela, commencer par insérer un switch et un
bouton côte à côte. Le bouton définit comme méthode onClick la fonction : setTime
• Créer une balise fragment qui va contenir le fragment en question.
• L’objectif étant de cliquer sur le bouton Set, puis d’afficher l’horloge digitale sur le switch est
activé, et l’horloge numérique s’il est désactivé. Il faut donc maintenant implémenter la
fonction setTime.
TP3 : Éléments Graphiques Avancés : Fragments & Menus
Page 7
L’objet Bundle permet d’envoyer une ensemble de paramètres, sous format clef/valeur, au fragment.
En l’occurrence, dans notre cas, nous allons lui envoyer l’état du switch (checked ou unchecked),
dans le paramètre booléen digitalOK.
Le fragment manager va se charger de placer le fragment à l’endroit qui lui est associé, soit dans la
balise fragment.
• Pour définir quel fragment charger, modifier le code de la classe FragmentClock comme suit :
Activité 1. Réaliser l’application comme indiqué dans les étapes précédentes. Lancer l’émulateur
pour tester votre code.
TP3 : Éléments Graphiques Avancés : Fragments & Menus
Page 8
III. Menus
III.1 Menu d’Option 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. Étant donné que plusieurs terminaux
récents ne possèdent plus ce bouton, il a été nécessaire de remplacer ce type de menus.
Désormais, les fonctionnalités du menu d’options sont définies dans le 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. Elle fournit un espace dédié pour donner à votre
application une identité et indiquer où se trouve l’utilisateur dans l’application, un ensemble
d’actions importantes est accessibles comme la recherche par exemple, une navigation consistante
et la possibilité de changer de vue dans une application grâce aux tabulations ou listes déroulantes.
Dans les applications que vous créez par défaut avec Android Studio, vous allez trouver une barre
d’action qui est ajoutée automatiquement. Le contenu de cette barre est décrit dans un fichier XML
que vous trouverez sous le répertoire menu. Chaque élément de la barre sera représenté comme un
nouvel item.
TP3 : Éléments Graphiques Avancés : Fragments & Menus
Page 9
L’attribut showAsAction permet de configurer l’apparition de l’élément dans la barre ou bien dans le
Action Overflow ( ). Plusieurs valeurs sont possibles, dont : never, always ou ifRoom.
Pour définir le comportement des éléments de la barre d’action, il faut implémenter les méthodes
(automatiquement générées):
• onCreateOptionsMenu : construit le menu en appelant le contenu du menu XML
• onOptionsItemSelected : définit le comportement de chacune des actions de la barre
IV. Exercice 2 : Action Bar
IV.1 Objectif
Durée estimée de l’exercice : au plus 0h 15
L’objectif est d’ajouter des éléments à la barre d’actions de l’exercice précédent. Le rendu final sera
comme suit :
IV.2 Implémentation
• Remplacer l’élément « Settings » par défaut dans le menu par un nouvel élément switch, et
associez-lui une icône, en précisant qu’il doit toujours être affiché dans la barre d’options :
• Implémenter la fonction onOptionsItemSelected, comme suit :
TP3 : Éléments Graphiques Avancés : Fragments & Menus
Page 10
Activité 2. Créer l’action Bar précédente dans votre application.
V. Menu Contextuel
Un menu contextuel est un menu flottant qui apparaît quand un utilisateur fait un clic long sur un
élément, par exemple. Il fournit des actions qui affectent le contenu cliqué et/ou son conteneur.
À partir de la version 3 d’Android, ce menu a été remplacé par un mode contextuel permettant de
réaliser des actions sur le contenu sélectionné. Il 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 au besoin.
TP3 : Éléments Graphiques Avancés : Fragments & Menus
Page 11
En général, on change vers le mode contextuel si l’utilisateur fait un clic long sur un élément, ou s’il
sélectionne une case à cocher (ou autre élément équivalent). La barre d’action contextuelle prend
alors momentanément la place de la barre d’action.
Il est possible d’activer ce mode pour un widget individuel, ou bien pour un groupe d’éléments
regroupés dans une liste ou une grille, par exemple.
VI. Exercice 3 : Menu Contextuel
VI.1 Objectif
Durée estimée de l’exercice : au plus 0h 30
L’objectif est d’activer le mode contextuel si l’utilisateur fait un appui long sur le bouton. Dans la
barre contextuelle, l’utilisateur pourra alors changer la couleur du bouton.
VI.2 Définir le Menu Contextuel
Pour définir le contenu de la barre contextuelle, il faut ajouter un autre fichier xml dans le répertoire
menu. On l’appellera context_mode_menu.xml
TP3 : Éléments Graphiques Avancés : Fragments & Menus
Page 12
VI.3 Définir le Callback
Créer l’objet mActionModeCallback permettant de définir le comportement suite à l’apparition du
mode contextuel dans l’activité. L’instanciation de cet objet requiert l’implémentation de plusieurs
méthodes, notamment :
• onCreateActionMode : comportement à la création du mode contextuel
• onActionItemClicked : comportement au clic sur un élément de la barre contextuelle
• onDestroyActionMode : comportement à la fermeture du mode contextuel
TP3 : Éléments Graphiques Avancés : Fragments & Menus
Page 13
VI.4 Associer le callback à un événement
Enfin, il faut associer ce callback à un événement, notamment l’appui long sur le bouton. Pour cela,
écrire le code suivant dans votre activité :
Activité 3. Vous savez ce que vous avez à faire...
TP3 : Éléments Graphiques Avancés : Fragments & Menus
Page 14
VII. Homework
L’un des principaux avantages des fragments est la facilité qu’ils offrent quand il s’agit de s’adapter
à des tailles d’écrans différentes.
1. Implémenter un exemple simple montrant comment est-ce qu’une application avec des
fragment réagit sur différentes tailles d’écran, en utilisant les multi-pane layouts.
2. Ajouter une petite fonctionnalité dans la barre d’options, permettant à l’application de
passer d’un thème à un autre (deux thèmes peuvent être définis statiquement).

Contenu connexe

Tendances

Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
Antoine Rey
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
Houda TOUKABRI
 
P2 éléments graphiques android
P2 éléments graphiques androidP2 éléments graphiques android
P2 éléments graphiques android
Lilia Sfaxi
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
Ines Ouaz
 
Android-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateursAndroid-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateurs
Lilia Sfaxi
 
Support du cours : Programmation Web 2
Support du cours : Programmation Web 2Support du cours : Programmation Web 2
Support du cours : Programmation Web 2
Faycel Chaoua
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
ENSET, Université Hassan II Casablanca
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
Abdoulaye Dieng
 
Traitement distribue en BIg Data - KAFKA Broker and Kafka Streams
Traitement distribue en BIg Data - KAFKA Broker and Kafka StreamsTraitement distribue en BIg Data - KAFKA Broker and Kafka Streams
Traitement distribue en BIg Data - KAFKA Broker and Kafka Streams
ENSET, Université Hassan II Casablanca
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
ENSET, Université Hassan II Casablanca
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
MOHAMMED MOURADI
 
BigData_TP4 : Cassandra
BigData_TP4 : CassandraBigData_TP4 : Cassandra
BigData_TP4 : Cassandra
Lilia Sfaxi
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
ENSET, Université Hassan II Casablanca
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correction
Ines Ouaz
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
ENSET, Université Hassan II Casablanca
 
Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategy
ENSET, Université Hassan II Casablanca
 
Tp2 - WS avec JAXRS
Tp2 - WS avec JAXRSTp2 - WS avec JAXRS
Tp2 - WS avec JAXRS
Lilia Sfaxi
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
ENSET, Université Hassan II Casablanca
 
Cours design pattern m youssfi partie 3 decorateur
Cours design pattern m youssfi partie 3 decorateurCours design pattern m youssfi partie 3 decorateur
Cours design pattern m youssfi partie 3 decorateur
ENSET, Université Hassan II Casablanca
 
Android-Tp4: stockage
Android-Tp4: stockageAndroid-Tp4: stockage
Android-Tp4: stockage
Lilia Sfaxi
 

Tendances (20)

Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
P2 éléments graphiques android
P2 éléments graphiques androidP2 éléments graphiques android
P2 éléments graphiques android
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
 
Android-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateursAndroid-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateurs
 
Support du cours : Programmation Web 2
Support du cours : Programmation Web 2Support du cours : Programmation Web 2
Support du cours : Programmation Web 2
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Traitement distribue en BIg Data - KAFKA Broker and Kafka Streams
Traitement distribue en BIg Data - KAFKA Broker and Kafka StreamsTraitement distribue en BIg Data - KAFKA Broker and Kafka Streams
Traitement distribue en BIg Data - KAFKA Broker and Kafka Streams
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
 
BigData_TP4 : Cassandra
BigData_TP4 : CassandraBigData_TP4 : Cassandra
BigData_TP4 : Cassandra
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correction
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
 
Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategy
 
Tp2 - WS avec JAXRS
Tp2 - WS avec JAXRSTp2 - WS avec JAXRS
Tp2 - WS avec JAXRS
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
 
Cours design pattern m youssfi partie 3 decorateur
Cours design pattern m youssfi partie 3 decorateurCours design pattern m youssfi partie 3 decorateur
Cours design pattern m youssfi partie 3 decorateur
 
Android-Tp4: stockage
Android-Tp4: stockageAndroid-Tp4: stockage
Android-Tp4: stockage
 

En vedette

P4 intents
P4 intentsP4 intents
P4 intents
Lilia Sfaxi
 
P1 introduction à android
P1 introduction à androidP1 introduction à android
P1 introduction à android
Lilia Sfaxi
 
P6 composants avancés
P6 composants avancésP6 composants avancés
P6 composants avancés
Lilia Sfaxi
 
P3 listes et elements graphiques avancés
P3 listes et elements graphiques avancésP3 listes et elements graphiques avancés
P3 listes et elements graphiques avancés
Lilia Sfaxi
 
P5 stockage
P5 stockageP5 stockage
P5 stockage
Lilia Sfaxi
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web services
Lilia Sfaxi
 

En vedette (6)

P4 intents
P4 intentsP4 intents
P4 intents
 
P1 introduction à android
P1 introduction à androidP1 introduction à android
P1 introduction à android
 
P6 composants avancés
P6 composants avancésP6 composants avancés
P6 composants avancés
 
P3 listes et elements graphiques avancés
P3 listes et elements graphiques avancésP3 listes et elements graphiques avancés
P3 listes et elements graphiques avancés
 
P5 stockage
P5 stockageP5 stockage
P5 stockage
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web services
 

Similaire à Android-Tp3: fragments et menus

Formation iPhone ENSI by (Orange Tunisie)
Formation iPhone ENSI by (Orange Tunisie)Formation iPhone ENSI by (Orange Tunisie)
Formation iPhone ENSI by (Orange Tunisie)Farouk Mezghich
 
Les Activités.pdf
Les Activités.pdfLes Activités.pdf
Les Activités.pdf
RihabBENLAMINE
 
5.ateliers avancés
5.ateliers avancés5.ateliers avancés
5.ateliers avancés
Chaikhani Ibtissam
 
Mise en place de l'ActionBarCompat dans vos projets Android.
Mise en place de l'ActionBarCompat dans vos projets Android.Mise en place de l'ActionBarCompat dans vos projets Android.
Mise en place de l'ActionBarCompat dans vos projets Android.
Mathias Seguy
 
TP_1.pdf
TP_1.pdfTP_1.pdf
TP_1.pdf
FethiBenYahia1
 
Les Fragments
Les FragmentsLes Fragments
06 visual basic .net - exercice sur les collections
06 visual basic .net - exercice sur les collections06 visual basic .net - exercice sur les collections
06 visual basic .net - exercice sur les collections
Hamza SAID
 
My droid
My droidMy droid
Android - Tp4 - graphiques avancés
Android - Tp4 - graphiques avancésAndroid - Tp4 - graphiques avancés
Android - Tp4 - graphiques avancés
Lilia Sfaxi
 
Cycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'AndroidCycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'Android
Houssem Lahiani
 
Cycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'AndroidCycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'Android
Houssem Lahiani
 
Swing
SwingSwing
Tutoriel Netvibes
Tutoriel NetvibesTutoriel Netvibes
Tutoriel Netvibes
Cell'IE
 
Programmation Evenementielle 1 object.ppt
Programmation Evenementielle 1 object.pptProgrammation Evenementielle 1 object.ppt
Programmation Evenementielle 1 object.ppt
bouchakyahya0
 
Les Widgets
Les WidgetsLes Widgets
Les Widgets
Wiki Info Systeme
 
programmation orienté objet c++
programmation orienté objet c++programmation orienté objet c++
programmation orienté objet c++
coursuniv
 

Similaire à Android-Tp3: fragments et menus (20)

Formation iPhone ENSI by (Orange Tunisie)
Formation iPhone ENSI by (Orange Tunisie)Formation iPhone ENSI by (Orange Tunisie)
Formation iPhone ENSI by (Orange Tunisie)
 
Les Activités.pdf
Les Activités.pdfLes Activités.pdf
Les Activités.pdf
 
5.ateliers avancés
5.ateliers avancés5.ateliers avancés
5.ateliers avancés
 
Mise en place de l'ActionBarCompat dans vos projets Android.
Mise en place de l'ActionBarCompat dans vos projets Android.Mise en place de l'ActionBarCompat dans vos projets Android.
Mise en place de l'ActionBarCompat dans vos projets Android.
 
TP_1.pdf
TP_1.pdfTP_1.pdf
TP_1.pdf
 
Opencourrier
OpencourrierOpencourrier
Opencourrier
 
Les Fragments
Les FragmentsLes Fragments
Les Fragments
 
06 visual basic .net - exercice sur les collections
06 visual basic .net - exercice sur les collections06 visual basic .net - exercice sur les collections
06 visual basic .net - exercice sur les collections
 
Tutoriel netvibes
Tutoriel netvibesTutoriel netvibes
Tutoriel netvibes
 
My droid
My droidMy droid
My droid
 
Android - Tp4 - graphiques avancés
Android - Tp4 - graphiques avancésAndroid - Tp4 - graphiques avancés
Android - Tp4 - graphiques avancés
 
Cycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'AndroidCycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'Android
 
Cycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'AndroidCycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'Android
 
Swing
SwingSwing
Swing
 
Tutoriel Netvibes
Tutoriel NetvibesTutoriel Netvibes
Tutoriel Netvibes
 
Programmation Evenementielle 1 object.ppt
Programmation Evenementielle 1 object.pptProgrammation Evenementielle 1 object.ppt
Programmation Evenementielle 1 object.ppt
 
Poo
PooPoo
Poo
 
Pe
PePe
Pe
 
Les Widgets
Les WidgetsLes Widgets
Les Widgets
 
programmation orienté objet c++
programmation orienté objet c++programmation orienté objet c++
programmation orienté objet c++
 

Plus de Lilia Sfaxi

chp1-Intro à l'urbanisation des SI.pdf
chp1-Intro à l'urbanisation des SI.pdfchp1-Intro à l'urbanisation des SI.pdf
chp1-Intro à l'urbanisation des SI.pdf
Lilia Sfaxi
 
Plan d'études_INSAT_2022_2023.pdf
Plan d'études_INSAT_2022_2023.pdfPlan d'études_INSAT_2022_2023.pdf
Plan d'études_INSAT_2022_2023.pdf
Lilia Sfaxi
 
Lab3-DB_Neo4j
Lab3-DB_Neo4jLab3-DB_Neo4j
Lab3-DB_Neo4j
Lilia Sfaxi
 
Lab2-DB-Mongodb
Lab2-DB-MongodbLab2-DB-Mongodb
Lab2-DB-Mongodb
Lilia Sfaxi
 
Lab1-DB-Cassandra
Lab1-DB-CassandraLab1-DB-Cassandra
Lab1-DB-Cassandra
Lilia Sfaxi
 
TP2-UML-Correction
TP2-UML-CorrectionTP2-UML-Correction
TP2-UML-Correction
Lilia Sfaxi
 
TP1-UML-Correction
TP1-UML-CorrectionTP1-UML-Correction
TP1-UML-Correction
Lilia Sfaxi
 
TP0-UML-Correction
TP0-UML-CorrectionTP0-UML-Correction
TP0-UML-Correction
Lilia Sfaxi
 
TD4-UML
TD4-UMLTD4-UML
TD4-UML
Lilia Sfaxi
 
TD4-UML-Correction
TD4-UML-CorrectionTD4-UML-Correction
TD4-UML-Correction
Lilia Sfaxi
 
TD3-UML-Séquences
TD3-UML-SéquencesTD3-UML-Séquences
TD3-UML-Séquences
Lilia Sfaxi
 
TD3-UML-Correction
TD3-UML-CorrectionTD3-UML-Correction
TD3-UML-Correction
Lilia Sfaxi
 
TD2 - UML - Correction
TD2 - UML - CorrectionTD2 - UML - Correction
TD2 - UML - Correction
Lilia Sfaxi
 
TD1 - UML - DCU
TD1 - UML - DCUTD1 - UML - DCU
TD1 - UML - DCU
Lilia Sfaxi
 
TD1-UML-correction
TD1-UML-correctionTD1-UML-correction
TD1-UML-correction
Lilia Sfaxi
 
Android - Tp1 - installation et démarrage
Android - Tp1 -   installation et démarrageAndroid - Tp1 -   installation et démarrage
Android - Tp1 - installation et démarrage
Lilia Sfaxi
 
Android - Tp2 - Elements graphiques
Android - Tp2 - Elements graphiques Android - Tp2 - Elements graphiques
Android - Tp2 - Elements graphiques
Lilia Sfaxi
 
Android - Tp3 - intents
Android - Tp3 -  intentsAndroid - Tp3 -  intents
Android - Tp3 - intents
Lilia Sfaxi
 
Android - TPBonus - web services
Android - TPBonus - web servicesAndroid - TPBonus - web services
Android - TPBonus - web services
Lilia Sfaxi
 
Android - Tp 5 - stockage de données
Android - Tp 5 -  stockage de donnéesAndroid - Tp 5 -  stockage de données
Android - Tp 5 - stockage de données
Lilia Sfaxi
 

Plus de Lilia Sfaxi (20)

chp1-Intro à l'urbanisation des SI.pdf
chp1-Intro à l'urbanisation des SI.pdfchp1-Intro à l'urbanisation des SI.pdf
chp1-Intro à l'urbanisation des SI.pdf
 
Plan d'études_INSAT_2022_2023.pdf
Plan d'études_INSAT_2022_2023.pdfPlan d'études_INSAT_2022_2023.pdf
Plan d'études_INSAT_2022_2023.pdf
 
Lab3-DB_Neo4j
Lab3-DB_Neo4jLab3-DB_Neo4j
Lab3-DB_Neo4j
 
Lab2-DB-Mongodb
Lab2-DB-MongodbLab2-DB-Mongodb
Lab2-DB-Mongodb
 
Lab1-DB-Cassandra
Lab1-DB-CassandraLab1-DB-Cassandra
Lab1-DB-Cassandra
 
TP2-UML-Correction
TP2-UML-CorrectionTP2-UML-Correction
TP2-UML-Correction
 
TP1-UML-Correction
TP1-UML-CorrectionTP1-UML-Correction
TP1-UML-Correction
 
TP0-UML-Correction
TP0-UML-CorrectionTP0-UML-Correction
TP0-UML-Correction
 
TD4-UML
TD4-UMLTD4-UML
TD4-UML
 
TD4-UML-Correction
TD4-UML-CorrectionTD4-UML-Correction
TD4-UML-Correction
 
TD3-UML-Séquences
TD3-UML-SéquencesTD3-UML-Séquences
TD3-UML-Séquences
 
TD3-UML-Correction
TD3-UML-CorrectionTD3-UML-Correction
TD3-UML-Correction
 
TD2 - UML - Correction
TD2 - UML - CorrectionTD2 - UML - Correction
TD2 - UML - Correction
 
TD1 - UML - DCU
TD1 - UML - DCUTD1 - UML - DCU
TD1 - UML - DCU
 
TD1-UML-correction
TD1-UML-correctionTD1-UML-correction
TD1-UML-correction
 
Android - Tp1 - installation et démarrage
Android - Tp1 -   installation et démarrageAndroid - Tp1 -   installation et démarrage
Android - Tp1 - installation et démarrage
 
Android - Tp2 - Elements graphiques
Android - Tp2 - Elements graphiques Android - Tp2 - Elements graphiques
Android - Tp2 - Elements graphiques
 
Android - Tp3 - intents
Android - Tp3 -  intentsAndroid - Tp3 -  intents
Android - Tp3 - intents
 
Android - TPBonus - web services
Android - TPBonus - web servicesAndroid - TPBonus - web services
Android - TPBonus - web services
 
Android - Tp 5 - stockage de données
Android - Tp 5 -  stockage de donnéesAndroid - Tp 5 -  stockage de données
Android - Tp 5 - stockage de données
 

Android-Tp3: fragments et menus

  • 1. Institut National des Sciences Appliquées et de Technologie Tunisie Développement Android 2015-2016 TP3- ÉLEMENTS GRAPHIQUES AVANCES (P2) : FRAGMENTS & MENUS Dr. Lilia SFAXI Objectifs du TP : Continuer avec les éléments graphiques avancés, pour voir les fragments et Dr. Lilia SFAXI Objectifs du TP : Continuer avec les éléments graphiques avancés, pour voir les fragments et les menus : contextuels, et d’options
  • 2. TP3 : Éléments Graphiques Avancés : Fragments & Menus Page 2 I. Fragments I.1 Définition et Utilité Un fragment représente un comportement ou une portion d’interface utilisateur dans une activité. Il est possible de combiner plusieurs fragments dans une seule activité pour construire une interface à plusieurs panneaux, et réutiliser un fragment dans plusieurs activités. Un fragment a son propre cycle de vie, reçoit ses propres entrées et peut être ajouté, modifié ou supprimé de manière dynamique. Il est toujours inclus dans une activité, et son cycle de vie est directement affecté par celui de l’activité qui le contient. Tant que l’activité conteneur est en état d’exécution, le fragment peut être manipulé de manière indépendante (ajouté, modifié ou supprimé). Mais si l’activité est détruite, le fragment l’est aussi. A la base, les fragments ont été créés pour supporter la conception d’interfaces graphiques flexibles sur des écrans de tailles différentes, et permettre ainsi aux appareils dont la taille d’écran est plus importante (comme les tablettes) de profiter de cet espace pour combiner et inter-changer des composants graphiques.
  • 3. TP3 : Éléments Graphiques Avancés : Fragments & Menus Page 3 I.2 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. Parmi ces sous-classes on peut citer : • 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, et fournit ainsi plusieurs méthodes pour gérer une listView.
  • 4. TP3 : Éléments Graphiques Avancés : Fragments & Menus Page 4 • PreferenceFragment Affiche une hiérarchie d’objets Preference comme liste. Permet de créer une activité settings pour votre application. Pour créer un fragment, il faut suivre les étapes suivantes : 1. Créer l’interface du fragment • Commencer par 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 o Elle doit retourner un objet View représentant la racine du fragment o Utiliser un LayoutInflater pour construire la hiérarchie d’objets graphiques à partir des ressources XML 2. Ajouter le fragment à une activité Le fragment peut être ajouté de manière statique ou dynamique à l’activité. • Statique : Déclarer le fragment dans le fichier layout XML de l’activité, grâce à l’élément XML <fragment>. Pour cela, indiquer comme attribut android :name la classe Java du fragment à instancier dans le layout • Dynamique : Insérer dans le code de l’activité le fragment créé dans un conteneur (ViewGroup) existant dans l’interface. Pour cela, un FragmentManager est utilisé.
  • 5. TP3 : Éléments Graphiques Avancés : Fragments & Menus Page 5 Un FragmentManager permet de gérer les fragments d’une activité particulière. Pour l’utiliser, il suffit d’appeler directement getFragmentManager à partir de n’importe quel emplacement de votre activité. Le FragmentManager permet de : • Manipuler les fragments existants dans votre application grâce aux méthodes findFragmentById() ou findFragmentByTag() • Gérer la pile de retour (Back Stack), accessible via le bouton Back de l’appareil o Dépiler un fragment de la pile, avec popBackStack() o Associer un Listener aux changements de cette pile avec addOnBackStackChangedListener() La manipulation des fragments par le FragmentManager est possible grâce à un ensemble de FragmentTransactions. Une transaction est une opération sur des fragments (ajout, suppression, remplacement…) dans une activité, en réponse à une interaction utilisateur. Une transaction peut être stockée dans la pile de retour de l’activité, pour permettre à l’utilisateur de revenir en arrière, grâce à la méthode addToBackStack(). II. Exercice 1 : Fragments II.1 Objectif Durée estimée de l’exercice : au plus 1h 15 L’objectif de cet exercice est de montrer comment créer et inter-changer des fragments dans une application Android. L’objectif est d’obtenir le résultat suivant :
  • 6. TP3 : Éléments Graphiques Avancés : Fragments & Menus Page 6 II.2 Création des fragments Pour créer les fragments, commencer par : • Créer une application avec une simple activité vide. • Créer le layout pour le premier fragment. Pour cela, créer un fichier frag_digital.xml sous le répertoire layout • Y insérer un objet AnalogClock, et utiliser la couleur d’arrière plan de votre choix • Faire de même pour créer un fragment frag_numeric avec une horloge de type TextClock • Créer une classe FragmentClock qui étend la classe Fragment. • La première chose à faire est d’implémenter la méthode onCreateView qui représente le comportement du fragment dès son apparition. Dans cette méthode, nous allons indiquer quel fragment charger. Pour charger le fragment frag_digital, par exemple, la méthode onCreateView doit retourner : Laisser l’implémentation de cette partie pour plus tard. II.3 Création de l’activité principale Pour créer l’activité principale : • Commencer par créer son interface. Pour cela, commencer par insérer un switch et un bouton côte à côte. Le bouton définit comme méthode onClick la fonction : setTime • Créer une balise fragment qui va contenir le fragment en question. • L’objectif étant de cliquer sur le bouton Set, puis d’afficher l’horloge digitale sur le switch est activé, et l’horloge numérique s’il est désactivé. Il faut donc maintenant implémenter la fonction setTime.
  • 7. TP3 : Éléments Graphiques Avancés : Fragments & Menus Page 7 L’objet Bundle permet d’envoyer une ensemble de paramètres, sous format clef/valeur, au fragment. En l’occurrence, dans notre cas, nous allons lui envoyer l’état du switch (checked ou unchecked), dans le paramètre booléen digitalOK. Le fragment manager va se charger de placer le fragment à l’endroit qui lui est associé, soit dans la balise fragment. • Pour définir quel fragment charger, modifier le code de la classe FragmentClock comme suit : Activité 1. Réaliser l’application comme indiqué dans les étapes précédentes. Lancer l’émulateur pour tester votre code.
  • 8. TP3 : Éléments Graphiques Avancés : Fragments & Menus Page 8 III. Menus III.1 Menu d’Option 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. Étant donné que plusieurs terminaux récents ne possèdent plus ce bouton, il a été nécessaire de remplacer ce type de menus. Désormais, les fonctionnalités du menu d’options sont définies dans le 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. Elle fournit un espace dédié pour donner à votre application une identité et indiquer où se trouve l’utilisateur dans l’application, un ensemble d’actions importantes est accessibles comme la recherche par exemple, une navigation consistante et la possibilité de changer de vue dans une application grâce aux tabulations ou listes déroulantes. Dans les applications que vous créez par défaut avec Android Studio, vous allez trouver une barre d’action qui est ajoutée automatiquement. Le contenu de cette barre est décrit dans un fichier XML que vous trouverez sous le répertoire menu. Chaque élément de la barre sera représenté comme un nouvel item.
  • 9. TP3 : Éléments Graphiques Avancés : Fragments & Menus Page 9 L’attribut showAsAction permet de configurer l’apparition de l’élément dans la barre ou bien dans le Action Overflow ( ). Plusieurs valeurs sont possibles, dont : never, always ou ifRoom. Pour définir le comportement des éléments de la barre d’action, il faut implémenter les méthodes (automatiquement générées): • onCreateOptionsMenu : construit le menu en appelant le contenu du menu XML • onOptionsItemSelected : définit le comportement de chacune des actions de la barre IV. Exercice 2 : Action Bar IV.1 Objectif Durée estimée de l’exercice : au plus 0h 15 L’objectif est d’ajouter des éléments à la barre d’actions de l’exercice précédent. Le rendu final sera comme suit : IV.2 Implémentation • Remplacer l’élément « Settings » par défaut dans le menu par un nouvel élément switch, et associez-lui une icône, en précisant qu’il doit toujours être affiché dans la barre d’options : • Implémenter la fonction onOptionsItemSelected, comme suit :
  • 10. TP3 : Éléments Graphiques Avancés : Fragments & Menus Page 10 Activité 2. Créer l’action Bar précédente dans votre application. V. Menu Contextuel Un menu contextuel est un menu flottant qui apparaît quand un utilisateur fait un clic long sur un élément, par exemple. Il fournit des actions qui affectent le contenu cliqué et/ou son conteneur. À partir de la version 3 d’Android, ce menu a été remplacé par un mode contextuel permettant de réaliser des actions sur le contenu sélectionné. Il 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 au besoin.
  • 11. TP3 : Éléments Graphiques Avancés : Fragments & Menus Page 11 En général, on change vers le mode contextuel si l’utilisateur fait un clic long sur un élément, ou s’il sélectionne une case à cocher (ou autre élément équivalent). La barre d’action contextuelle prend alors momentanément la place de la barre d’action. Il est possible d’activer ce mode pour un widget individuel, ou bien pour un groupe d’éléments regroupés dans une liste ou une grille, par exemple. VI. Exercice 3 : Menu Contextuel VI.1 Objectif Durée estimée de l’exercice : au plus 0h 30 L’objectif est d’activer le mode contextuel si l’utilisateur fait un appui long sur le bouton. Dans la barre contextuelle, l’utilisateur pourra alors changer la couleur du bouton. VI.2 Définir le Menu Contextuel Pour définir le contenu de la barre contextuelle, il faut ajouter un autre fichier xml dans le répertoire menu. On l’appellera context_mode_menu.xml
  • 12. TP3 : Éléments Graphiques Avancés : Fragments & Menus Page 12 VI.3 Définir le Callback Créer l’objet mActionModeCallback permettant de définir le comportement suite à l’apparition du mode contextuel dans l’activité. L’instanciation de cet objet requiert l’implémentation de plusieurs méthodes, notamment : • onCreateActionMode : comportement à la création du mode contextuel • onActionItemClicked : comportement au clic sur un élément de la barre contextuelle • onDestroyActionMode : comportement à la fermeture du mode contextuel
  • 13. TP3 : Éléments Graphiques Avancés : Fragments & Menus Page 13 VI.4 Associer le callback à un événement Enfin, il faut associer ce callback à un événement, notamment l’appui long sur le bouton. Pour cela, écrire le code suivant dans votre activité : Activité 3. Vous savez ce que vous avez à faire...
  • 14. TP3 : Éléments Graphiques Avancés : Fragments & Menus Page 14 VII. Homework L’un des principaux avantages des fragments est la facilité qu’ils offrent quand il s’agit de s’adapter à des tailles d’écrans différentes. 1. Implémenter un exemple simple montrant comment est-ce qu’une application avec des fragment réagit sur différentes tailles d’écran, en utilisant les multi-pane layouts. 2. Ajouter une petite fonctionnalité dans la barre d’options, permettant à l’application de passer d’un thème à un autre (deux thèmes peuvent être définis statiquement).