Développement Mobile : Android

1. Développement Mobile : Android Cours N°3 Interfaces graphiques Rami AMRI (rami.amri@gmail.com) FST 2011/2012

2. Vues et Layouts • Les élements graphiques héritent de la classe View. • On peut regrouper des éléments graphiques dans une ViewGroup. • Des ViewGroup particuliers sont prédéfinis: ce sont des layouts (gabarits) qui proposent une prédispositions des objets graphiques:

3. Vues et Layouts • LinearLayout: dispose les éléments de gauche à droite ou du haut vers le bas • RelativeLayout: les éléments enfants les uns par rapport aux autres • TableLayout: disposition matricielle • FrameLayout: disposition en haut à gauche en empilant les éléments

4. Attributs des Layouts Les plus importants sont: • android:layout_width et android:layout_height: • ="fill_parent": l'élément remplit tout l'élément parent • ="wrap_content": prend la place nécessaire à l'affichage • android:orientation: définit l'orientation d'empilement • android:gravity: définit l'alignement des éléments

5. un exemple de LinearLayout

6. L'interface comme ressource • Une interface graphique définie en XML sera aussi générée comme une ressource dans la classe statiqueR. • Le nom du fichier xml, par example accueil.xml permet de retrouver le layout dans le code java au travers de R.layout.accueil.

7. L'interface comme ressource • Associer la première vue graphique à l'activité principale de l'application :

8. L'interface comme ressource • Le layout reste modifiable au travers du code, comme tous les autres objets graphiques. • Pour cela, il est important de spécifier un id dans la définition XML du layout (android:id="@+id/accueilid") • Ainsi, on peut accéder à cet élément par son id et agir dessus au travers du code Java:

9. L'interface comme ressource

10. Les éléments graphiques de base Un Layout peut contenir des éléments graphiques, ou d'autres Layout. • Les labels de texte • En XML:

11. Les éléments graphiques de base • Par la programmation

12. Les éléments graphiques de base • Les images • Par Xml • Par la programmation:

13. Les éléments graphiques de base • Les Zones textes • Par XML • Par la programmation

14. Les éléments graphiques de base • Les boutons : • En XML:

15. Les éléments graphiques de base • La gestion des événements de click se font par l'intermédiaire d'un listener:

16. Les éléments graphiques de base Les listes: • Au sein d'un Layout, on peut implanter une liste que l'on pourra dérouler si le nombre d'éléments est important. • pour afficher une liste d’items dans celle-ci, il lui faut un adaptateur de données.

17. Les éléments graphiques de base

18. Les éléments graphiques de base • Dans notre activité principale, nous allons récupérer notre ListView et lui affecter un adaptateur grâce à la méthode setAdapter, •  Ajoutons-y un objet de type ArrayAdapter, contenant une liste de String avec un layout générique d’item que fournit la plateforme par défaut et enfin la liste des données.

19. Les éléments graphiques de base

20. Les éléments graphiques de base Remarque: Syntaxe : • ArrayAdapter<Type de données>(le contexte,le style des items,les données);

21. Les éléments graphiques de base Les onglets: • La réalisation d'onglets permet de mieux utiliser l'espace réduit de l'écran. • Pour réaliser les onglets, il faut suivre une structure très particulière pour le layout . • Les différents onglets sont ensuite créé dynamiquement par le code, en associant à chaque onglet l'activité correspondante.

22. Les éléments graphiques de base

23. Les éléments graphiques de base • Main.xml :

24. Les éléments graphiques de base • TabWidget : contiendra les onglets • FrameLayout contiendra le contenu de ses onglets

25. Les éléments graphiques de base • Ensuite on va crée trois fichiers XML qui contiendra l'interface du contenu de chaque onglet (ici un TextView) • Onglet1.xml

26. Les éléments graphiques de base • Onglet2.xml

27. Les éléments graphiques de base • Onglet3.xml

28. Les éléments graphiques de base Partie JAVA : • On commence par créer notre activité principale TabAndroidActivity.java • On place tout les imports nécessaires :

29. Les éléments graphiques de base • Puis on doit avoir :

30. Les éléments graphiques de base • Lier le premier onglet à l’activité principale:

31. Les éléments graphiques de base • Lier le deuxième onglet à l’activité principale: • Lier le Troisième onglet à l’activité principale:

32. Les éléments graphiques de base • On peut définir l’onglet par défaut avec : tabHost.setCurrentTab(0); Maintenant, nous créons nos classes pour les onglets :

33. Les éléments graphiques de base

34. Les éléments graphiques de base

35. Les éléments graphiques de base • Ne pas oublier de déclarer les activités des onglets dans l’android manifest