Cours android user_interface_2016
- 1. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées La plateforme Android : User Interface AU:2016/2017 Saber LAJILI Enseignant Technologue - ISET de Nabeul Saber LAJILI La plateforme Android 1 / 54
- 2. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Outline 1 Activity 2 User interface 3 Listeners 4 Interaction des Composants : Intents 5 Appeler une application 6 Interfaces avancées Saber LAJILI La plateforme Android 2 / 54
- 3. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Dénition Cycle de vie des activités Scénario Outline 1 Activity Dénition Cycle de vie des activités Scénario 2 User interface 3 Listeners 4 Interaction des Composants : Intents 5 Appeler une application 6 Interfaces avancées Saber LAJILI La plateforme Android 3 / 54
- 4. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Dénition Cycle de vie des activités Scénario Outline 1 Activity Dénition Cycle de vie des activités Scénario 2 User interface Vues de base Layouts 3 Listeners 4 Interaction des Composants : Intents 5 Appeler une application 6 Interfaces avancées Saber LAJILI La plateforme Android 4 / 54
- 5. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Dénition Cycle de vie des activités Scénario Dénition Dénition Le composant Activity contrôle la gestion des interfaces, L'interface user est composée d'un ensemble d'ojets graphiques (Vues), Tous les objets graphiques héritent de la classe mère View, Implémentation Dénir une classe qui hérite de la classe prédinie Activity, Dénir un ensemble de ressources : les vues ou autres, Saber LAJILI La plateforme Android 5 / 54
- 6. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Dénition Cycle de vie des activités Scénario La classe Activity Saber LAJILI La plateforme Android 6 / 54
- 7. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Dénition Cycle de vie des activités Scénario Outline 1 Activity Dénition Cycle de vie des activités Scénario 2 User interface Vues de base Layouts 3 Listeners 4 Interaction des Composants : Intents 5 Appeler une application 6 Interfaces avancées Saber LAJILI La plateforme Android 7 / 54
- 8. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Dénition Cycle de vie des activités Scénario Cycle de vie Les callBacks Il est obligatoire d'implémenter la méthode onCreate() Il n'est pas nécessaire d'implémenter toutes les callbacks ;Saber LAJILI La plateforme Android 8 / 54
- 9. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Dénition Cycle de vie des activités Scénario Etats d'une activité Etats durables Resumed : L'activité est au premier plan et l'utilisateur peut interagir avec elle, Paused : L'activité est partiellement recouverte par une autre activité qui se trouve au premier plan. L'activité en pause ne peut pas recevoir d'action de l'utilisateur, Stopped : L'activité est totalement cachée et ne peut plus exécutée de code. En revanche, toutes ses informations sont conservées, Etats transitoires Created : L'activité vient d'être créée, Started : L'activité vient de devenir visible, Saber LAJILI La plateforme Android 9 / 54
- 10. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Dénition Cycle de vie des activités Scénario Sauvegarde et restauration d'état Quand? Saber LAJILI La plateforme Android 10 / 54
- 11. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Dénition Cycle de vie des activités Scénario Sauvegarde d'état En cas d'arrêt d'exécution d'activité (destroyed), le système fait appel à la méthode onSaveInstanceState() Par défaut cette méthode sauvegarde des informations de certains objets graphiques comme EditText View ou la position du scroll position de ListView. Pour sauvegarder des infromations suplémentaires d'état de l'activity, on doit implémenter onSaveInstanceState() Saber LAJILI La plateforme Android 11 / 54
- 12. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Dénition Cycle de vie des activités Scénario Restauration d'état En cas de recréation de l'activité, il est possible de récupérer son état, Les deux méthodes onCreate() et onRestoreInstanceState() reçoivent l'objet de type Bundel contenant l'état de l'activité Exemple Saber LAJILI La plateforme Android 12 / 54
- 13. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Dénition Cycle de vie des activités Scénario Outline 1 Activity Dénition Cycle de vie des activités Scénario 2 User interface Vues de base Layouts 3 Listeners 4 Interaction des Composants : Intents 5 Appeler une application 6 Interfaces avancées Saber LAJILI La plateforme Android 13 / 54
- 14. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Dénition Cycle de vie des activités Scénario Scénario Donner les callsBacks exécutés pour les évènnements suivants: Evènements 1 Lancement de l'activité 2 Réception d'un appel téléphonique 3 Terminaison de l'appel téléphonique 4 Une alerte dialogue s'ache 5 Passer à l'interface suivante 6 Terminaison de l'activité et de l'application Saber LAJILI La plateforme Android 14 / 54
- 15. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Dénition Cycle de vie des activités Scénario Exécution Lancement de l'activité Terminaison de l'activité Réception/Terminiaison d'appel téléphonique Saber LAJILI La plateforme Android 15 / 54
- 16. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Outline 1 Activity 2 User interface Les vues Création des vues Propriétés des vues Les ressources 3 Listeners 4 Interaction des Composants : Intents 5 Appeler une application 6 Interfaces avancées Saber LAJILI La plateforme Android 16 / 54
- 17. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Outline 1 Activity 2 User interface Les vues Création des vues Propriétés des vues Vues de base Layouts Les ressources 3 Listeners 4 Interaction des Composants : Intents 5 Appeler une application 6 Interfaces avancées Saber LAJILI La plateforme Android 17 / 54
- 18. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Hiérarchie des Vues Une vue est un objet graphique Une vue peut être simple ou bien composite Toutes les vues héritent de la classe mère View Saber LAJILI La plateforme Android 18 / 54
- 19. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Outline 1 Activity 2 User interface Les vues Création des vues Propriétés des vues Vues de base Layouts Les ressources 3 Listeners 4 Interaction des Composants : Intents 5 Appeler une application 6 Interfaces avancées Saber LAJILI La plateforme Android 19 / 54
- 20. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Création des vues La création d'interface se fait : Statique : Fichier XML Dynamique : en code Java TextView Saber LAJILI La plateforme Android 20 / 54
- 21. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Outline 1 Activity 2 User interface Les vues Création des vues Propriétés des vues Vues de base Layouts Les ressources 3 Listeners 4 Interaction des Composants : Intents 5 Appeler une application 6 Interfaces avancées Saber LAJILI La plateforme Android 21 / 54
- 22. Propriétés des vues Identiant L'attributidentiant (id) identie d'une manière unique l'objet graphique dans l'ensemble des ressources (Classe R) Il est nécessaire pour manipuler les vues en code java L'attribut android:id=@+id/identiant l'accès à l'objet en java : R.id.identiant et depuis le chier XML: @id/identiant Taille La taille est spéciée par les attributs : android:layout_height et android:layout_width Valeus possibles: match_parent (ll_parent): taille = la taille du parent (conteneur) wrap_content : taille=la taille de son contenu valeur personnalisée : unité (dp: density-independent pixels, px, ...)
- 23. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Vues de base EditText Saisir un text du clavier et acher le clavier en fonction de type de la zone de saisie (android:inputType) l'attribut Android:inputType peut prendre une des valeurs suivantes: text : clavier standard textCapCharacters : clavier tout en majuscule textMultiLine : text sur plusieurs lignes textEmailAdress : adresse mail textpassword : saisie du mot de passe invisible ...Saber LAJILI La plateforme Android 23 / 54
- 24. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Vues de base Button ImageView Saber LAJILI La plateforme Android 24 / 54
- 25. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Layouts Layouts sont des vues composites (dits conteneurs) servent à regrouper et disposer des vues On distingue 4 types de Layouts : FrameLayout, LinearLayout, TableLayout, RelativeLayout et GridLayout LinearLayout Il permet d'aligner les objets graphiques (de haut en bas, direction(Horizontale, verticale) Possibilité de spécier: la garvité des élements (android:layout_gravity) la gravité du contenu de l'élement (android:gravity) le poids des éléments (android:weight) : indique l'espace qu'il peut occuper Saber LAJILI La plateforme Android 25 / 54
- 26. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Layouts: Linear_Layout (Démo) Saber LAJILI La plateforme Android 26 / 54
- 27. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Layouts: Relative_Layaout Placer les objets les uns en fonction des autres Un objet graphique est positionné en fonction de son conteneur, ou en fonction d'un autre objet Position relative au conteneur Positionner l'objet en focntion des 4 bords du conteneur : Aligner son bord haut avec le bord haut du conteneur : android:layout_alignParentTop Aligner son bord inférieur avec le bord inférieur du conteneur: android:layout_alignParentBottom Aligner son bord gauche avec le bord gauche du conteneur: android:layout_alignParentLeft Aligner son bord droit avec le bord droit du conteneur : android:layout_alignParentRightSaber LAJILI La plateforme Android 27 / 54
- 28. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Layouts: Relative_Layout Position relative aux autres objets Aligner son bord inférieur avec le bord haut du l'objet référencé : android:layout_above Aligner son bord haut avec le bord inférieur du l'objet référencé : android:layout_below Placer l'objet à gauche de l'objet référencé : android:layout_toLeftOf Placer l'objet à droite de l'objet référencé : android:layout_toRightOf ... attribut : padding Sets the padding, in pixels, of all four edges. Padding is dened as space between the edges of the view and the view's content. Saber LAJILI La plateforme Android 28 / 54
- 29. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Relative_Layout (demo) demo Saber LAJILI La plateforme Android 29 / 54
- 30. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Création de vues en code java Saber LAJILI La plateforme Android 30 / 54
- 31. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Outline 1 Activity 2 User interface Les vues Création des vues Propriétés des vues Vues de base Layouts Les ressources 3 Listeners 4 Interaction des Composants : Intents 5 Appeler une application 6 Interfaces avancées Saber LAJILI La plateforme Android 31 / 54
- 32. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Les ressources Android traite diérents types de ressources répertoriés dans : values, drawable, menus, animations, ... l'externalisation des ressources est une tâche importante facilitant leur mise à jour values: String Le dossier values regroupe l'ensemble des diérents types de constantes : string, plurals, string-array, dimension, color, ... Par défaut le chier strings.xml L'accès : en code java R.string.nom_string et en XML @string/nom_string Saber LAJILI La plateforme Android 32 / 54
- 33. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Les ressources values: string-array Saber LAJILI La plateforme Android 33 / 54
- 34. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Les vues Création des vues Propriétés des vues Les ressources Les ressources values: colors, dim, types Saber LAJILI La plateforme Android 34 / 54
- 35. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Outline 1 Activity 2 User interface 3 Listeners 4 Interaction des Composants : Intents 5 Appeler une application 6 Interfaces avancées Saber LAJILI La plateforme Android 35 / 54
- 36. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Listeners Les listeners sont des interfaces qui dénissent des écouteurs d'événements Les écouteurs se produisent sur les vues View . On distingue - OnClickListener , - OnLongClickListener et - OnKeyListener, ... Diérentes manières d'implémentation Saber LAJILI La plateforme Android 36 / 54
- 37. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Listeners Implémentation de l'interface onClickListener Saber LAJILI La plateforme Android 37 / 54
- 38. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Listeners Gérer les événnements sur les boutons Ajout de deux écouteurs de clic sur les deux boutons 1 et 2 Saber LAJILI La plateforme Android 38 / 54
- 39. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Listeners Evénnements onClick en XML File Saber LAJILI La plateforme Android 39 / 54
- 40. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Types d'Intent Outline 1 Activity 2 User interface 3 Listeners 4 Interaction des Composants : Intents Types d'Intent 5 Appeler une application 6 Interfaces avancées Saber LAJILI La plateforme Android 40 / 54
- 41. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Types d'Intent Intents Dénition Les intents sont des messages asynchrones qui permettent de faire coopérer et communiquer les applications ou bien les composants Android La navigation d'une activité à une autre peut se faire par la création et l'exécution d'une intent: Constructeurs : Intent i=new Intent(String action, Uri uri, Context packageContext, Class? cls) Lancement d'intent : startActivity(i); Saber LAJILI La plateforme Android 41 / 54
- 42. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Types d'Intent Intents Composants d'une intent Saber LAJILI La plateforme Android 42 / 54
- 43. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Types d'Intent Outline 1 Activity 2 User interface Vues de base Layouts 3 Listeners 4 Interaction des Composants : Intents Types d'Intent 5 Appeler une application 6 Interfaces avancées Saber LAJILI La plateforme Android 43 / 54
- 44. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Types d'Intent Intent explicite Intent Explicite L'intent est dite explicite si on connaît la classe destinataire (à lancer) Intent i = new Intent(ActivityOne.this, ActivityTwo.class) Exemple Button go= (Button)ndViewById(R.id.buttgo); go.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Intent i = new Intent(ActivityOne.this, ActivityTwo.class); startActivity(i); }}); Saber LAJILI La plateforme Android 44 / 54
- 45. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Types d'Intent Intent implicite L'intent est dit implicite si on ne connais que l'action qu'on souhaite exécuter Intent Implicite : une action + une donnée optionnel ( uri ) Exemple : Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(http://www.google.com)); Saber LAJILI La plateforme Android 45 / 54
- 46. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Types d'Intent Intent ltre Le système peut choisir le composant le mieux adapté au traitement d'une action Les composants d'une application peuvent s'inscrire pour répondre à une demande d'intent par Intent Filtre 3 niveaux de ltrage : action: identie l'action de l'Intent category: permet de ltrer une catégorie d'action (DEFAULT, BROWSABLE, ...) data: ltre sur les données du message par exemple en utilisant android:host pour ltrer un nom de domaine Saber LAJILI La plateforme Android 46 / 54
- 47. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Types d'Intent Demo Soit l'écran ci-dessous de l'application gestion téléphone permettant de gérer les SMS et les appels téléphoniques Saber LAJILI La plateforme Android 46 / 54
- 48. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Outline 1 Activity 2 User interface 3 Listeners 4 Interaction des Composants : Intents 5 Appeler une application 6 Interfaces avancées Saber LAJILI La plateforme Android 47 / 54
- 49. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Appeler une application Etapes Récupérer une instance de la classe PackageManager par la méthode getPackageManager Récupérer l'intent renvoyée par la méthode getLaunchIntentForPackage() de la classe PackageManager La méthode getLaunchIntentForPackage() reçoit comme paramètre le package de l'application à appeler Exemple : Navigation de l'application telephony vers horloge Saber LAJILI La plateforme Android 48 / 54
- 50. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Outline 1 Activity 2 User interface 3 Listeners 4 Interaction des Composants : Intents 5 Appeler une application 6 Interfaces avancées Saber LAJILI La plateforme Android 49 / 54
- 51. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Interfaces avancées Toast Les toasts servent à créer et acher des messages courts (dit noticatio) La création des toasts se fait par des composants android qui ont un contexte La méthode makeText crée un objet toast et prend comme argument: le context, la chaîne à acher et la durée. L'objet toast s'ache en faisant appel à la méthode show. Exemple Toast.makeText(getApplicationContext(), Bonjour à tous, Toast.LENGTH_LONG).show(); Saber LAJILI La plateforme Android 50 / 54
- 52. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Interfaces avancées AlertDialog C'est une boite de dialogue interactive permettant d'acher un message, elle se compose de trois parties: 1 Le titre de la boite de dialogue(optionnel) 2 Le contenu de la boite de dialogue qui peut être des vues (RadioButton, TextView, ...) 3 Des boutons d'action : pour choisir l'action à eectuer Etapes Créer une instance builder de AlertDialog.Builder spécier le message à acher et les boutons (OK, CANCEL) L'instance builder crée la boite de dialogue par create () et l'ache par show () Saber LAJILI La plateforme Android 51 / 54
- 53. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Exemple AlertDialog Saber LAJILI La plateforme Android 52 / 54
- 54. Activity User interface Listeners Interaction desComposants : Intents Appeler une application Interfaces avancées Boite de dialog personnalisée et WebView Voir démo projet interfaceavancee Saber LAJILI La plateforme Android 53 / 54
- 55. . Merci pour votreattention