Dveloppement Mobile Android Cours N 3 Interfaces graphiques

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

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

Vues et Layouts Linear. Layout: dispose les éléments de gauche à droite ou du haut vers le bas Relative. Layout: les éléments enfants les uns par rapport aux autres Table. Layout: disposition matricielle Frame. Layout: disposition en haut à gauche en empilant les éléments

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

un exemple de Linear. Layout

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

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

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:

L'interface comme ressource

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

Les éléments graphiques de base ◦ Par la programmation

Les éléments graphiques de base Les images ◦ Par Xml ◦ Par la programmation:

Les éléments graphiques de base Les Zones textes ◦ Par XML ◦ Par la programmation

Les éléments graphiques de base Les boutons : ◦ En XML:

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

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.

Les éléments graphiques de base

Les éléments graphiques de base Dans notre activité principale, nous allons récupérer notre List. View et lui affecter un adaptateur grâce à la méthode set. Adapter, Ajoutons-y un objet de type Array. Adapter, 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.

Les éléments graphiques de base

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

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.

Les éléments graphiques de base

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

Les éléments graphiques de base Tab. Widget : contiendra les onglets Frame. Layout contiendra le contenu de ses onglets

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 Text. View) Onglet 1. xml

Les éléments graphiques de base Onglet 2. xml

Les éléments graphiques de base Onglet 3. xml

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

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

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

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

Les éléments graphiques de base On peut définir l’onglet par défaut avec : tab. Host. set. Current. Tab(0); Maintenant, nous créons nos classes pour les onglets :

Les éléments graphiques de base

Les éléments graphiques de base

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