Développement d’applications mobiles 6.
Construction Interface Utilisateur
1. Le concept d’interface :
Une interface n’est pas une image statique mais un ensemble de composants graphiques, Qui
peuvent être des boutons, du texte, mais aussi des groupements d’autres composants
graphiques, pour lesquels nous pouvons définir des attributs communs (taille, couleur,
positionnement, etc.). Ainsi, l’écran ci-après (figure 1) peut-il être vu par le développeur
comme un assemblage (figure 2).
La représentation effective par le développeur de l’ensemble des composants graphiques se
fait sous forme d’arbre, en une structure hiérarchique (figure 3). Il peut n’y avoir qu’un
composant, comme des milliers, selon l’interface que vous souhaitez représenter. Dans l’arbre
ci-après (figure 3), par exemple, les composants ont été organisés en 3 parties (haut, milieu et
bas).
Figure 1 : Exemple d’écran.
Figure 2 : Même écran vu par le développeur
3eme Info /Université de Mascara Page 1
Développement d’applications mobiles 6. Construction Interface Utilisateur
Figure 3 : L’Arborescence de l’interface précédente.
2. Les vues :
Le composant graphique élémentaire de la plate-forme Android est la vue : tous les
composants graphiques (boutons, images, cases à cocher, etc.) d’Android héritent de la classe
View.
Android vous offre la possibilité de regrouper plusieurs vues dans une structure arborescente
à l’aide de la classe ViewGroup. Cette structure peut à son tour regrouper d’autres éléments de
la classe ViewGroup et être ainsi constituée de plusieurs niveaux d’arborescence.
L’utilisation et le positionnement des vues dans une activité se feront la plupart du temps en
utilisant une mise en page qui sera composée par un ou plusieurs gabarits de vues.
3. Positionner les vues avec les gabarits :
Un gabarit, ou layout, ou encore mise en page, est une extension de la classe ViewGroup. Il
s’agit en fait d’un conteneur qui aide à positionner Les objets, qu’il s’agisse de vues ou
d’autres gabarits au sein de votre interface.
Vous pouvez imbriquer des gabarits les uns dans les autres, ce qui vous permettra de créer des
mises en forme évoluées.
Comme nous l’avons dit plus haut, vous pouvez décrire vos interfaces utilisateur soit par une
déclaration XML, soit directement dans le code d’une activité en utilisant les classes
adéquates. Dans les deux cas, vous pouvez utiliser différents types de gabarits. En fonction du
type choisi, les vues et les gabarits seront disposés différemment :
LinearLayout : permet d’aligner de gauche à droite ou de haut en bas les éléments
qui y seront incorporés. En modifiant la propriété orientation vous pourrez signaler au gabarit
dans quel sens afficher ses enfants : avec la valeur horizontal, l’affichage sera de gauche à
droite alors que la valeur vertical affichera de haut en bas;
RelativeLayout : ses enfants sont positionnés les uns par rapport aux autres, le
Premier enfant servant de référence aux autres ;
FrameLayout : c’est le plus basique des gabarits. Chaque enfant est positionné dans le
coin en haut à gauche de l’écran et affiché par-dessus les enfants précédents, les cachant en
partie ou complètement. Ce gabarit est principalement utilisé pour l’affichage d’un élément
(par exemple, un cadre dans lequel on veut charger des images);
TableLayout : permet de positionner vos vues en lignes et colonnes à l’instar d’un
tableau.
3eme Info /Université de Mascara Page 2
Développement d’applications mobiles 6. Construction Interface Utilisateur
Voici un exemple de définition déclarative en XML d’une interface contenant un gabarit
linéaire (le gabarit le plus commun dans les interfaces Android).
Code -1- :
Ce cours est destiné à la présentation des notions de base sur l'interface utilisateur android.
Dans le TP, ces notions sont abordées avec des exemples plus détaillés.
3eme Info /Université de Mascara Page 3