Éléments Graphiques
Interface graphique de base, éléments de sélection…
Formation Mobile
27 Aout au 1 Septembre 2015
Dr. L...
ÉLÉMENTS GRAPHIQUES DE BASE
Éléments Graphiques Android
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 2
Les Composants View et ViewGroup
•  View:
•  Classe de base pour la création d’une interface graphique en
Android
•  Class...
Layout XML
•  Ensemble de fichiers XML de spécification des différents composants
graphiques d’une application (widgets) e...
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 5
XML Layout: Design
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 6
XML Layout: XML Code
Layouts
•  ViewGroup qui regroupe un ensemble de widgets ou d’autres layouts
•  Plusieurs types de layouts (on citera les ...
Exemple de Layouts
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 8
Éléments Graphiques de Base
UTILISATION DES COMPOSANTS GRAPHIQUES
Éléments Graphiques Android
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide ...
Identifiant et Fichier R.java
•  Pour pouvoir utiliser un composant graphique, il faut lui
associer un id
•  Représenté da...
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 11
R.java
Code des Activités
•  Les fichiers sources représentant le comportement de
l’application sont définis dans le répertoire s...
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 13
HelloworldActivity.java
Comportement d’un Élément Graphique
•  Considérons l’objet de type Button défini précédemment
•  Objectif:
•  Afficher: He...
Comportement d’un Élément Graphique
•  Il existe trois manières pour définir le comportement du bouton button
Façon 1:
1. ...
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 16
Façon 1
Comportement d’un Élément Graphique
Façon 2:
1.  Définir un objet Java de type android.widget.Button
2.  Initialiser cet o...
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 18
Façon 2
Comportement d’un Élément Graphique
Façon 3:
1.  Dans le fichier layout XML, associer au bouton le nom d‘une méthode
qui d...
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 20
Façon 3
HelloworldActivity.java
activity_helloworld.xml
Atelier
Ma première application, Cycle de vie, Comportement
Dr. Lilia SFAXI
www.liliasfaxi.wix.com/liliasfaxi
Slide 21
Ma Première Application
Nous allons utiliser l’environnement de développement Android Studio, et
la version 5.0.1 d’Androi...
Cycle de Vie
Nous désirons spécifier un comportement pour chacun des évènements dans le cycle de vie de
notre activité pri...
Greeting Personnalisé
Nous nous proposons de créer une application intitulée Greeting afin de
correspondre à l’interface e...
Prochain SlideShare
Chargement dans…5
×

P2 éléments graphiques android

1 533 vues

Publié le

Visitez http://liliasfaxi.wix.com/liliasfaxi !

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 533
Sur SlideShare
0
Issues des intégrations
0
Intégrations
580
Actions
Partages
0
Téléchargements
101
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

P2 éléments graphiques android

  1. 1. Éléments Graphiques 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. 2. ÉLÉMENTS GRAPHIQUES DE BASE Éléments Graphiques Android Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 2
  3. 3. Les Composants View et ViewGroup •  View: •  Classe de base pour la création d’une interface graphique en Android •  Classe mère de tous les widgets (éléments graphiques) •  Une vue peut être ajoutée à une application : •  Soit statiquement, dans le fichier de description de l’interface (Layout XML) •  Soit dynamiquement, dans le code Java de l’application •  ViewGroup: •  Classe de base de tous les layouts (dispositions) •  Layouts: Conteneurs invisibles rassemblant plusieurs View ou ViewGroup •  Permet de définir l’emplacement de ses fils dans l’écran Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 3 Éléments Graphiques de Base
  4. 4. Layout XML •  Ensemble de fichiers XML de spécification des différents composants graphiques d’une application (widgets) et de leurs relations entre eux et avec leurs conteneurs (layouts) •  Placés dans le répertoire res/layout de l’arborescence du projet •  Possibilité de visualiser le contenu du fichier: •  Sous forme de code XML (onglet Text) •  Sous forme graphique (onglet Design) : mise à disposition d’une palette de composants graphiques à glisser-déplacer vers l’emplacement désiré •  Chaque composant graphique est représenté par un élément XML, dont les attributs décrivent l’aspect ou le comportement. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 4 Éléments Graphiques de Base
  5. 5. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 5 XML Layout: Design
  6. 6. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 6 XML Layout: XML Code
  7. 7. Layouts •  ViewGroup qui regroupe un ensemble de widgets ou d’autres layouts •  Plusieurs types de layouts (on citera les plus utilisés) Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 7 Éléments Graphiques de Base Linear Layout Relative Layout Web View Organise ses enfants dans une ligne unique verticale ou horizontale. Spécifie les emplacements des objets fils relativement les uns aux autres. Affiche des pages web. <html> <!–– web page ––> </html>
  8. 8. Exemple de Layouts Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 8 Éléments Graphiques de Base
  9. 9. UTILISATION DES COMPOSANTS GRAPHIQUES Éléments Graphiques Android Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 9 1.  Environnement de Développement Android 2.  Architecture Android 3.  Conduite d’un Projet d’App. Android 4.  Structure d’une Application Android 5.  Cycle de Vie d’une Application Android 6.  Éléments de Base d’une Application Android 7.  Services Android
  10. 10. Identifiant et Fichier R.java •  Pour pouvoir utiliser un composant graphique, il faut lui associer un id •  Représenté dans le layout XML par l’attribut android:id •  En général sous la forme: @+id/nom_id •  @ : variable particulière, doit être parsée par le parseur XML •  + : un identifiant avec la valeur nom_id sera généré, et ajouté automatiquement à la classe R •  Fichier R.java •  Contient un ensemble de classes générées automatiquement à partir du répertoire res. •  Chaque classe représente un ensemble de propriétés utilisables dans le code Java •  Fichier généré, ne doit donc pas être modifié à la main! Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 10 Utilisation des Composants Graphiques
  11. 11. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 11 R.java
  12. 12. Code des Activités •  Les fichiers sources représentant le comportement de l’application sont définis dans le répertoire src, dans une arborescence de packages •  Chaque activité doit : •  Être définie dans un fichiers .java à part •  Hériter (directement ou indirectement) de la classe android.app.Activity •  Implémenter la méthode onCreate() pour définir le comportement de l’activité à sa création •  Appeler la méthode setContentView() dans le code de onCreate pour définir le layout de cette activité (fichier Layout XML associé) •  L’implémentation des autres méthodes de transition (onPause, onDestroy…) est optionnelle Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 12 Utilisation des Composants Graphiques
  13. 13. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 13 HelloworldActivity.java
  14. 14. Comportement d’un Élément Graphique •  Considérons l’objet de type Button défini précédemment •  Objectif: •  Afficher: Hello <nom> en cliquant sur le bouton (<nom> étant la chaîne saisie dans le EditText) Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 14 Utilisation des Composants Graphiques
  15. 15. Comportement d’un Élément Graphique •  Il existe trois manières pour définir le comportement du bouton button Façon 1: 1.  Définir un objet Java de type android.widget.Button 2.  Initialiser cet objet en l‘associant à son équivalent dans le fichier XML 3.  Définir le comportement de ce bouton Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 15 Utilisation des Composants Graphiques
  16. 16. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 16 Façon 1
  17. 17. Comportement d’un Élément Graphique Façon 2: 1.  Définir un objet Java de type android.widget.Button 2.  Initialiser cet objet en l‘associant à son équivalent dans le fichier XML 3.  Implémenter l‘interface android.view.View.OnClickListener 4.  Surcharger la méthode onClick Attention, cette méthode sera commune à tous les éléments cliquables, il faut donc distinguer le comportement selon l‘identifiant de l‘élément cliqué 5.  Définir la classe en cours comme étant le Listener du bouton myBytton Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 17 Utilisation des Composants Graphiques
  18. 18. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 18 Façon 2
  19. 19. Comportement d’un Élément Graphique Façon 3: 1.  Dans le fichier layout XML, associer au bouton le nom d‘une méthode qui définira son comportement au clic 2.  Dans la classe Java de l‘activité, créer et implémenter cette méthode en respectant les contraintes suivantes: 1.  Elle doit retourner void 2.  Elle doit porter le nom défini dans le fichier layout XML 3.  Elle doit définir un paramètre de type android.view.View Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 19 Utilisation des Composants Graphiques
  20. 20. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 20 Façon 3 HelloworldActivity.java activity_helloworld.xml
  21. 21. Atelier Ma première application, Cycle de vie, Comportement Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 21
  22. 22. Ma Première Application Nous allons utiliser l’environnement de développement Android Studio, et la version 5.0.1 d’Android (API 21) •  Créer votre première application Android appelée HelloworldApplication avec une activité de type Blank Activity •  Explorer le code de votre activité ainsi que le layout XML •  Configurer votre émulateur avec ces paramètres : Nexus One, 3.7" 480*800 hdpi •  Lancer l’émulateur. •  Il est conseillé de le démarrer une seule fois, et de le laisser actif, puis configurer votre application pour se lancer automatiquement sur lui. Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 22 Atelier 1
  23. 23. Cycle de Vie Nous désirons spécifier un comportement pour chacun des évènements dans le cycle de vie de notre activité principale HelloworldActivity. Pour cela, nous devons redéfinir les méthodes correspondantes à chaque événement. Dans le fichier HelloworldActivity.java, nous remarquons que la méthode onCreate est déjà générée : c’est la seule méthode obligatoire. Pour générer les autres méthodes de transition, commencer à taper le nom de la méthode dans le fichier de code, puis cliquer sur Ctrl-Espace. 1.  Générer les méthodes correspondant à chacun des évènements listés dans le cycle de vie. 2.  Nous désirons voir le comportement de l’activité pour chacun de ces évènements. Pour cela, chaque méthode va afficher son nom dans un Toast. 3.  Exécuter votre application. Que constatez-vous ? A quels moments sont appelés les différentes méthodes que vous avez ré-implémenté ? Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 23 Atelier 2
  24. 24. Greeting Personnalisé Nous nous proposons de créer une application intitulée Greeting afin de correspondre à l’interface et comportement suivants: Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 24 Atelier 3

×