Les interfaces graphiques

Présentation au sujet: "Les interfaces graphiques"— Transcription de la présentation:

1 Les interfaces graphiques
ANDROID Les interfaces graphiques Interface graphique = seule interaction avec l’utilisateur. Pas de souris, de clavier physique, de console. Doit être intuitive, pas trop chargée car peu de place Si possible, une chose à la fois Android fournit un API très riche pour construire des interfaces graphiques, auquel nous allons vous introduire INF octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à

2 Plan Concepts de base Layouts et View disponibles
View, ViewGroup, Layouts Layouts et View disponibles Méthode déclarative (XML) Moi: concepts de base, comment créer l’interface la plus simple Hassan: présentation des view et layout disponibles dans la librairie d’Android Mohamed: linearlayout, le plus simple et le plus utilisé surtout quand on commence et méthode déclarative pour construire une interface.

3 Plan Concepts de base Layouts et View disponibles
View, ViewGroup, Layouts Layouts et View disponibles Méthode déclarative (XML)

4 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 Patron de conception composite. C’est très similaire aux autres lib d’interface graphique, comme GTK ou QT. Structure de widgets en arbre. Hiérarchie d’éléments graphiques, certains widgets servent à regrouper d’autres widgets, ce sont les composites. Classe d’éléments de base View: objet qui peut être dessiné à l’écran. Chaque implémentation de View spécifie comment il se fait dessiner Classe ViewGroup hérite de View, mais a la particularité de contenir d’autres View. Les ViewGroup portent généralement le suffixe Layout

5 Concepts de base Mon bouton implémente la fonction draw en traçant un dessin de bouton. Les ViewGroup, comme le LinearLayout, ont une méthode permettant d’ajouter des View. Sa fonction draw est implémentée simplement en appelant les draw de ses enfantsé

6 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) Dans Android, on a le concept d’activité. Une activité possède une seule interface. Un menu = une activité, la page suivante de mon application sera une autre activité. Chaque activité possède donc une View racine qui est initialisée lors de la création de l’activité. Pour dessiner l’interface, elle appelle la méthode draw de cette View. Généralement une View composite, parce qu’on veut plus qu’un widget.

7 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) Pour créer une activité avec une interface de base 1- Créer une classe dérivée d’Activity 2- Surcharger onCreate dans laquelle on crée la vue. On assigne la vue racine de l’activité avec setContentView

8 Hello world 1- Créer un nouveau projet Android
2- Lui donner un nom, package, spécifier la version d’Android qu’on utilise 3- Par défaut, Eclipse nous crée une activité de base On voit qu’elle hérite de Activity qu’elle surcharge onCreate qu’il y a l’appel à onCreate de la classe mère L’exemple utilise la méthode déclarative que Mohamed va décrire un peu plus tard, je donne un exemple de façon programmatique pour comprendre le fonctionnement On crée d’abord un LinearLayout, qui dispose simplement les objets de façon linéaire. On spécifie qu’on veut que les objets soient alignés de façon verticale. On crée deux View enfant simples, un TextView qui est un champ de texte statique et un EditText qui est un champ de texte éditable par l’utilisateur. On ajoute ces deux View au Layout. On spécifie que le Layout est le View racine de notre activité. L’activité va demander à layout de se dessiner, layout va demander à ses deux enfants de se dessiner. On voit le résultat, une étiquette Nom et un champ de texte.

9 Plan Concepts de base Layouts et View disponibles
View, ViewGroup, Layouts Layouts et View disponibles Méthode déclarative (XML)

10 Les View disponibles TextView EditText CheckBox ToggleButton
RadioGroup Button Spinner AutoCompleteTextView DatePicker TimePicker ImageView ImageButton ProgressBar AnalogClock DigitalClock RatingBar

11 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: 

12 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: 

13 CheckBox CheckBox: case à cocher
Style peut être appliqué sur le label du checkbox Documentation: 

14 ToggleButton ToggleButton: boutton poussoir Deux états
Attribut textuel pour chaque état Documentation: 

15 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: 

16 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: 

17 Spinner Spinner: liste déroulante Liste de valeurs Une seule à choisir
Une fois choisie, seule cette valeur reste et les autres disparaissent Documentation: 

18 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: 

19 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: 

20 TimePicker TimePicker: choisir une heure Classes AM/PM ou 24 heures
DatePicker.OnTimeChangedListener TimePickerDialog AM/PM ou 24 heures Documentation: 

21 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: 

22 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: 

23 ProgressBar ProgressBar: rend compte de l’avancement d’une tâche qui dure un certain temps Documentation: 

24 AnalogClock AnalogClock: Horloge analogique Affiche l'heure courante
Pas possible de régler l'horloge sur une autre heure Documentation: 

25 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: 

26 RatingBar RatingBar: rendu visuel d’une note
Pour choisir si le widget est éditable android:isIndicator Nombre d’étoiles dynamique Documentation: 

27 Les layouts disponibles
ListView FrameLayout LinearLayout TableLayout RelativeLayout Documentation: 

28 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: 

29 FrameLayout FrameLayout: empile les widgets les un sur les autres
Documentation: 

30 LinearLayout LinearLayout: aligne les widgets dans une seule direction
Horizontal ou vertical Documentation: 

31 TableLayout TableLayout: agence les widgets sur un quadrillage
Documentation: 

32 RelativeLayout RelativeLayout: place les widgets par rapports aux autres widgets Documentation: 

33 Plan Concepts de base Layouts et View disponibles
View, ViewGroup, Layouts Layouts et View disponibles Méthode déclarative (XML) Moi: concepts de base, comment créer l’interface la plus simple Hassan: présentation des view et layout disponibles dans la librairie d’Android Mohamed: linearlayout, le plus simple et le plus utilisé surtout quand on commence et méthode déclarative pour construire une interface.

34 Méthode déclarative

35 Méthode déclarative

36 Méthode déclarative

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

38 Avantages de la méthode déclararive
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;

39 Programmatique ou déclarative ?
Quoi utiliser ? Déclarative : déclarer tout élément statique dans l’interface user. Programmatique : gérer les intéractions.

40 Exemple

41 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:

42 Questions / Discussion