Cours N°3

Interfaces graphiques

Rami AMRI (rami.amri@gmail.com)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