La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à

Présentations similaires


Présentation au sujet: "ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à"— Transcription de la présentation:

1 ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à http://nova.polymtl.ca/~simark/PresAndroidUI.pptx

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

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

4 Concepts de base Patron de conception composite View: élément dinterface graphique de base (bouton, champ de texte, …) ViewGroup: élément dinterface graphique composite, contient dautres View

5 Concepts de base

6 Une interface par activité ( Activity ) Initialisation de linterface graphique lors de la création de lactivité (méthode onCreate ) Une vue racine (méthode setContentView )

7 Hello world Créer une classe dérivée de Activity Surcharger onCreate(Bundle) – Attention, laisser lappel à super.onCreate(Bundle) Créer une View, la donner à setContentView(View)

8 Hello world

9 Plan Concepts de base – 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: http://developer.android.com/reference/android/widget/TextView.html

12 EditText EditText: champ dentré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

13 CheckBox CheckBox: case à cocher Style peut être appliqué sur le label du checkbox Documentation: http://developer.android.com/reference/android/widget/CheckBox.html

14 ToggleButton ToggleButton: boutton poussoir Deux états – Attribut textuel pour chaque état Documentation: http://developer.android.com/reference/android/widget/ToggleButton.html

15 RadioGroup RadioGroup: ensemble doptions, 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

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

17 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

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

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

20 TimePicker TimePicker: choisir une heure Classes – DatePicker.OnTimeChangedListener – TimePickerDialog AM/PM ou 24 heures Documentation: http://developer.android.com/reference/android/widget/TImePicker.html

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

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

23 ProgressBar ProgressBar: rend compte de lavancement dune tâche qui dure un certain temps Documentation: http://developer.android.com/reference/android/widget/ProgressBar.html

24 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

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

26 RatingBar RatingBar: rendu visuel dune note Pour choisir si le widget est éditable android:isIndicator Nombre détoiles dynamique Documentation: http://developer.android.com/reference/android/widget/RatingBar.html

27 Les layouts disponibles ListView FrameLayout LinearLayout TableLayout RelativeLayout Documentation: http://developer.android.com/guide/topics/ui/layout-objects.hrml

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: http://developer.android.com/reference/android/widget/ListView.html http://www.androidpeople.com/wp-content/uploads/2010/01/listviewtextfilterexample.png

29 FrameLayout FrameLayout: empile les widgets les un sur les autres Documentation: http://developer.android.com/reference/android/widget/FrameLayout.html

30 LinearLayout LinearLayout: aligne les widgets dans une seule direction – Horizontal ou vertical Documentation: http://developer.android.com/reference/android/widget/LinearLayout.html

31 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

32 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

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

34 Méthode déclarative

35

36

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

38 Le fichier XML : – Éditeur de texte ordinaire; – Syntaxe relativement simple et sans rapport avec le JAVA; – La visibilité de larchitecture de lapplication; – 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 dAndroid décrit à la fois les classes Java et le XML; Avantages de la méthode déclararive

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

40 Exemple

41 Conclusion Voir linterface 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/ http://developer.android.com/guide/topics/ui/

42 Questions / Discussion


Télécharger ppt "ANDROID Les interfaces graphiques INF6405 - 19 octobre 2011 Hassan Makke, Simon Marchi et Mohamed Taboubi Présentation disponible à"

Présentations similaires


Annonces Google