![Page 1: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/1.jpg)
ANDROID
Les interfaces graphiques
INF6405 - 19 octobre 2011Hassan Makke, Simon Marchi et Mohamed Taboubi
Présentation disponible à http://nova.polymtl.ca/~simark/PresAndroidUI.pptx
![Page 2: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/2.jpg)
Plan
• Concepts de base– View, ViewGroup, Layouts
• Layouts et View disponibles
• Méthode déclarative (XML)
![Page 3: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/3.jpg)
Plan
• Concepts de base– View, ViewGroup, Layouts
• Layouts et View disponibles
• Méthode déclarative (XML)
![Page 4: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/4.jpg)
Concepts de base
• Patron de conception composite
• View: élément d’interface graphique de base (bouton, champ de texte, …)
• ViewGroup: élément d’interface graphique composite, contient d’autres View
![Page 5: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/5.jpg)
Concepts de base
![Page 6: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/6.jpg)
Concepts de base
• Une interface par activité (Activity)
• Initialisation de l’interface graphique lors de la création de l’activité (méthode onCreate)
• Une vue racine (méthode setContentView)
![Page 7: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/7.jpg)
Hello world
• Créer une classe dérivée de Activity
• Surcharger onCreate(Bundle)– Attention, laisser l’appel à super.onCreate(Bundle)
• Créer une View, la donner à setContentView(View)
![Page 8: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/8.jpg)
Hello world
![Page 9: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/9.jpg)
Plan
• Concepts de base– View, ViewGroup, Layouts
• Layouts et View disponibles
• Méthode déclarative (XML)
![Page 10: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/10.jpg)
Les View disponibles
• TextView• EditText• CheckBox• ToggleButton• RadioGroup• Button• Spinner• AutoCompleteTextView
• DatePicker• TimePicker• ImageView• ImageButton• ProgressBar• AnalogClock• DigitalClock• RatingBar
![Page 11: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/11.jpg)
TextView
• TextView: simple zone de texte
• Représentation:– Couleur– Police de caractères– Dimensions
• Convertit automatiquement les adresses courriel, numéros de téléphones, URL en éléments cliquables.
Documentation: http://developer.android.com/reference/android/widget/TextView.html
![Page 12: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/12.jpg)
EditText
• EditText: champ d’entrée de texte• Masques de saisie
– android:phoneNumber="true“– android:capitalize– android:digits (caractère autorisés seulement)– android:password="true"
Documentation: http://developer.android.com/reference/android/widget/EditText.html
![Page 13: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/13.jpg)
CheckBox
• CheckBox: case à cocher
• Style peut être appliqué sur le label du checkbox
Documentation: http://developer.android.com/reference/android/widget/CheckBox.html
![Page 14: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/14.jpg)
ToggleButton
• ToggleButton: boutton poussoir
• Deux états– Attribut textuel pour chaque état
Documentation: http://developer.android.com/reference/android/widget/ToggleButton.html
![Page 15: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/15.jpg)
RadioGroup
• RadioGroup: ensemble d’options, une seule peut être choisie à la fois
• Une fois une nouvelle option choisie, l'ancienne valeur est désélectionnée
Documentation: http://developer.android.com/reference/android/widget/RadioGroup.html
![Page 16: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/16.jpg)
Button
• Button: bouton pour déclencher une action• Hérite de TextView
button.setOnClickListener ( new Button.OnClickListener() { public void onClick(View v) { //Action } });
android:onClick="maFonction"
Documentation: http://developer.android.com/reference/android/widget/Button.html
![Page 17: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/17.jpg)
Spinner
• Spinner: liste déroulante
• Liste de valeurs• Une seule à choisir• Une fois choisie, seule cette valeur
reste et les autres disparaissent
Documentation: http://developer.android.com/reference/android/widget/Spinner.html
![Page 18: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/18.jpg)
AutoCompleteTextView
• AutoCompleteTextView: liste déroulante éditable
• Choisir de la liste ou ajouter une valeur• La liste de choix apparait après avoir
entré n lettres
Documentation: http://developer.android.com/reference/android/widget/AutoCompleteTextView.html
![Page 19: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/19.jpg)
DatePicker
• DatePicker: choisir une date
• Enregistrer un callback pour capter les changements des valeurs avec DatePicker.OnDateChangedListener
• Afficher une boîte de dialogue DatePicker avec DatePickerDialog
Documentation: http://developer.android.com/reference/android/widget/DatePicker.html
![Page 20: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/20.jpg)
TimePicker
• TimePicker: choisir une heure
• Classes– DatePicker.OnTimeChangedListener– TimePickerDialog
• AM/PM ou 24 heures
Documentation: http://developer.android.com/reference/android/widget/TImePicker.html
![Page 21: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/21.jpg)
ImageView
• ImageView: espace dont la représentation est une image
• Source d'image:– Répertoire– URI
• Fonctionnalités de transformation:– Taille de l'image
Documentation: http://developer.android.com/reference/android/widget/ImageView.html
![Page 22: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/22.jpg)
ImageButton
• ImageButton: bouton dont la représentation est une image
• Hérite d'ImageView• Action avec setOnClickListener• Lors d'un clic, l'image sera entourée d'un cadre orange
Documentation: http://developer.android.com/reference/android/widget/ImageButton.html
![Page 23: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/23.jpg)
ProgressBar
• ProgressBar: rend compte de l’avancement d’une tâche qui dure un certain temps
Documentation: http://developer.android.com/reference/android/widget/ProgressBar.html
![Page 24: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/24.jpg)
AnalogClock
• AnalogClock: Horloge analogique
• Affiche l'heure courante• Pas possible de régler l'horloge sur une autre heure
Documentation: http://developer.android.com/reference/android/widget/AnalogClock.html
![Page 25: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/25.jpg)
DigitalClock
• DigitalClock: Horloge numérique
• Affiche l'heure courante• AM/PM ou 24 heures• Pas possible de régler l'horloge sur une autre heure
Documentation: http://developer.android.com/reference/android/widget/DigitalClock.html
![Page 26: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/26.jpg)
RatingBar
• RatingBar: rendu visuel d’une note
• Pour choisir si le widget est éditable android:isIndicator• Nombre d’étoiles dynamique
Documentation: http://developer.android.com/reference/android/widget/RatingBar.html
![Page 27: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/27.jpg)
Les layouts disponibles
• ListView• FrameLayout• LinearLayout• TableLayout• RelativeLayout
Documentation: http://developer.android.com/guide/topics/ui/layout-objects.hrml
![Page 28: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/28.jpg)
ListView
• ListView: place les widgets verticalement
• Visuellement séparés par une ligne• Si (hauteurCumulée > taille de l'écran)
– La liste devient défilante
• Utilisée pour créer un menu
Documentation: http://developer.android.com/reference/android/widget/ListView.html
http://www.androidpeople.com/wp-content/uploads/2010/01/listviewtextfilterexample.png
![Page 29: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/29.jpg)
FrameLayout
• FrameLayout: empile les widgets les un sur les autres
Documentation: http://developer.android.com/reference/android/widget/FrameLayout.html
![Page 30: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/30.jpg)
LinearLayout
• LinearLayout: aligne les widgets dans une seule direction– Horizontal ou vertical
Documentation: http://developer.android.com/reference/android/widget/LinearLayout.html
![Page 31: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/31.jpg)
TableLayout
• TableLayout: agence les widgets sur un quadrillage
http://developer.android.com/images/table_layout.png
Documentation: http://developer.android.com/reference/android/widget/TableLayout.html
![Page 32: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/32.jpg)
RelativeLayout
• RelativeLayout: place les widgets par rapports aux autres widgets
http://developer.android.com/images/designing_ui_layout_example.png
Documentation: http://developer.android.com/reference/android/widget/RelativeLayout.html
![Page 33: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/33.jpg)
Plan
• Concepts de base– View, ViewGroup, Layouts
• Layouts et View disponibles
• Méthode déclarative (XML)
![Page 34: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/34.jpg)
Méthode déclarative
![Page 35: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/35.jpg)
Méthode déclarative
![Page 36: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/36.jpg)
Méthode déclarative
![Page 37: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/37.jpg)
• Layouts :– 2 Constructeurs : layout_width et layout_height
• WRAP_CONTENT• FILL_PARENT ou MATCH_PARENT
– Des attributs :• android:orientation• android:background• android:clickable• android:id • Etc.
• http://developer.android.com/reference/android/widget/LinearLayout.html
LinearLayout
![Page 38: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/38.jpg)
• Le fichier XML :– Éditeur de texte ordinaire;– Syntaxe relativement simple et sans rapport avec le JAVA;– La visibilité de l’architecture de l’application;– Un fichier ressource : On peut changer le fichier XML
sans avoir besoin de recompiler le projet;• Tout élément de java a son équivalent en XML
portant aussi le même nom;• API d’Android décrit à la fois les classes Java et le
XML;
Avantages de la méthode déclararive
![Page 39: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/39.jpg)
Quoi utiliser ?–Déclarative : déclarer tout élément
statique dans l’interface user.–Programmatique : gérer les
intéractions.
Programmatique ou déclarative ?
![Page 40: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/40.jpg)
Exemple
![Page 41: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/41.jpg)
Conclusion
• Voir l’interface comme une arborescence
• Utiliser la méthode déclarative (XML) !
• Aller voir les exemples sur le guide du développeur Android:– http://developer.android.com/guide/topics/ui/
![Page 42: ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à simark/PresAndroidUI.pptx](https://reader035.vdocuments.us/reader035/viewer/2022062404/551d9da3497959293b8d440a/html5/thumbnails/42.jpg)
Questions / Discussion