Cours N°3 Interfaces graphiques Rami AMRI ([email protected]) FST 2011/2012 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: 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 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 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. Associer la première vue graphique à l'activité principale de l'application : 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: Un Layout peut contenir des éléments graphiques, ou d'autres Layout. Les labels de texte ◦ En XML: ◦ Par la programmation Les images ◦ Par Xml ◦ Par la programmation: Les Zones textes ◦ Par XML ◦ Par la programmation Les boutons : ◦ En XML: La gestion des événements de click se font par l'intermédiaire d'un listener: 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. 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. Remarque: Syntaxe : ArrayAdapter<Type de données>(le contexte,le style des items,les données); 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. Main.xml : TabWidget : contiendra les onglets FrameLayout contiendra le contenu de ses onglets Ensuite on va crée trois fichiers XML qui contiendra l'interface du contenu de chaque onglet (ici un TextView) Onglet1.xml Onglet2.xml Onglet3.xml Partie JAVA : On commence par créer notre activité principale TabAndroidActivity.java On place tout les imports nécessaires : Puis on doit avoir : Lier le premier onglet à l’activité principale: Lier le deuxième onglet à l’activité principale: Lier le Troisième onglet à l’activité principale: On peut définir l’onglet par défaut avec : tabHost.setCurrentTab(0); Maintenant, nous créons nos classes pour les onglets : Ne pas oublier de déclarer les activités des onglets dans l’android manifest