ANDROID

Les interfaces graphiques

INF6405 - 19 octobre 2011Hassan Makke, Simon Marchi et Mohamed Taboubi

Présentation disponible à http://nova.polymtl.ca/~simark/PresAndroidUI.pptx

Plan

• Concepts de base– View, ViewGroup, Layouts

• Layouts et View disponibles

• Méthode déclarative (XML)

Plan

• Concepts de base– View, ViewGroup, Layouts

• Layouts et View disponibles

• Méthode déclarative (XML)

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

Concepts de base

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)

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)

Hello world

Plan

• Concepts de base– View, ViewGroup, Layouts

• Layouts et View disponibles

• Méthode déclarative (XML)

Les View disponibles

• TextView• EditText• CheckBox• ToggleButton• RadioGroup• Button• Spinner• AutoCompleteTextView

• DatePicker• TimePicker• ImageView• ImageButton• ProgressBar• AnalogClock• DigitalClock• RatingBar

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

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

CheckBox

• CheckBox: case à cocher

• Style peut être appliqué sur le label du checkbox

Documentation: http://developer.android.com/reference/android/widget/CheckBox.html

ToggleButton

• ToggleButton: boutton poussoir

• Deux états– Attribut textuel pour chaque état

Documentation: http://developer.android.com/reference/android/widget/ToggleButton.html

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

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

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

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

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

TimePicker

• TimePicker: choisir une heure

• Classes– DatePicker.OnTimeChangedListener– TimePickerDialog

• AM/PM ou 24 heures

Documentation: http://developer.android.com/reference/android/widget/TImePicker.html

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

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

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

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

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

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

Les layouts disponibles

• ListView• FrameLayout• LinearLayout• TableLayout• RelativeLayout

Documentation: http://developer.android.com/guide/topics/ui/layout-objects.hrml

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

FrameLayout

• FrameLayout: empile les widgets les un sur les autres

Documentation: http://developer.android.com/reference/android/widget/FrameLayout.html

LinearLayout

• LinearLayout: aligne les widgets dans une seule direction– Horizontal ou vertical

Documentation: http://developer.android.com/reference/android/widget/LinearLayout.html

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

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

Plan

• Concepts de base– View, ViewGroup, Layouts

• Layouts et View disponibles

• Méthode déclarative (XML)

Méthode déclarative

Méthode déclarative

Méthode déclarative

• 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

• 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

Quoi utiliser ?–Déclarative : déclarer tout élément

statique dans l’interface user.–Programmatique : gérer les

intéractions.

Programmatique ou déclarative ?

Exemple

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/

Questions / Discussion