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 INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à http://nova.polymtl.ca/~simark/PresAndroidUI.pptx

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.

Plan Concepts de base Layouts et View disponibles 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 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

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é

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.

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

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.

Plan Concepts de base Layouts et View disponibles 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 AM/PM ou 24 heures 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 http://www.androidpeople.com/wp-content/uploads/2010/01/listviewtextfilterexample.png Documentation: http://developer.android.com/reference/android/widget/ListView.html

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

Méthode déclarative

Méthode déclarative

Méthode déclarative

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. http://developer.android.com/reference/android/widget/LinearLayout.html

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;

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

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