Le document explique l'interface utilisateur d'Android Studio, mettant en avant la structure principale comprenant des barres d'outils, de navigation, et d'état, ainsi que l'éditeur de code et les fenêtres d'outils. Il aborde également la définition et l'imbrication des composants graphiques (vues et widgets) à travers des fichiers XML, en détaillant des éléments tels que les listviews et l'utilisation des layouts pour positionner les vues. Enfin, il souligne la gestion des événements utilisateur à l'aide d'écouteurs tels que onclicklistener, ainsi que les différents types de gabarits disponibles pour organiser les composants dans une interface graphique.

1. Samir Akhrouf
Interface Utilisateur
Université Mohamed Boudiaf de M’Sila
Faculté des Mathématique et de l’Informatique
Département d’Informatique
Année universitaire
2019-2020

2. 2
Définition
❑ La fenêtre principale d'Android Studio est composée de plusieurs
zones logiques identifiées dans la figure suivante:

3. 3
La barre d'outils vous permet d'effectuer un large éventail d'actions, y compris
l'exécution de votre application et le lancement d'outils Android.
La barre de navigation vous aide à naviguer dans votre projet et à ouvrir des
fichiers pour les modifier. Il offre une vue plus compacte de la structure visible
dans la fenêtre Projet.
La fenêtre de l'éditeur est l'endroit où vous créez et modifiez le code. En fonction
de la type de fichier actuel, l'éditeur peut changer. Par exemple, lors de l'affichage
d'un fichier de mise en page, l'éditeur affiche l'éditeur de mise en page.
La barre de la fenêtre d'outils s'étend autour de l'extérieur de la fenêtre IDE et
contient les boutons qui vous permettent d'agrandir ou de réduire les fenêtres
d'outils individuelles.
Les fenêtres d'outils vous donnent accès à des tâches spécifiques telles que la
gestion de projet, la recherche, le contrôle de version, etc. Vous pouvez les
développer et les réduire.
La barre d'état affiche l'état de votre projet et l'IDE lui-même, ainsi que
tout avertissement ou message.
2
1
3
4
5
6
La fenêtre principale d'Android Studio.

4. 4
Interface Graphique
Une interface graphique est un ensemble de composants
graphiques, 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 suivant :
Correspond en réalité à un assemblage
de composants avec une structure
imbriquée :

5. 5
❑ L'imbrication de l'ensemble de ces composants graphiques se fait,
sous Android, sous la forme d'un arbre, en une structure
hiérarchique :
❑ Une interface utilisateur peut être déclarée dans des fichiers XML
qui permettent de séparer les vues des traitements logiques. Il
suffira de créer un ou plusieurs fichiers XML qui devront être placées
dans le dossier res/layout.
❑ En effet, un document XML est tout à fait adapté à la structuration
sous forme d'arborescence, avec un enchaînement de balises
englobantes, ou balises mères, et de balises feuilles ou filles.

6. 6
LES VUES
Une interface graphique est composée d'une multitude de composants
graphiques : les vues.
Sous Android, une vue est représentée, comme son nom l'indique, par
la classe View. Tous les composants graphiques (boutons, images,
case à cocher, etc.) d'Android héritent de cette classe View et sont
appelées des widgets. Ci-dessous vous avez la hiérarchie de
quelques vues qui sont souvent utilisées :

7. 7
❑TextView : Cette vue permet d’afficher un texte à l'écran et gère de
nombreuses fonctionnalités relatives à l'affichage du texte : couleur,
police, taille, graisse, etc.
❑ Button : Comme son nom l'indique, cette classe représente un
bouton. Puisque cette classe hérite de TextView, elle dispose de
toutes les capacités de sa classe parente. La seule particularité
d'une vue Button vis-à-vis d'une vue TextView est son apparence.
Un Button est en fait un texte affiché dans un bouton ((rectangle
gris aux coins arrondis)) changeant automatiquement d'apparence
Lorsque l'utilisateur interagit avec ce dernier ((clic, focus)).
❑ EditText : Cette vue permet à l'utilisateur d'entrer un texte que
l'application pourra récupérer et utiliser par la suite.
❑ ImageView : Avec TextView, I’ImageView est l'une des vues les
plus utilisées dans les interfaces graphiques. Elle perteinte,
redimensionnement, et permet d'afficher une image et de disposer
de plusieurs options intéressantes :

8. 8
ListView dans Android Studio
Affiche une collection de vues à défilement vertical, où chaque vue
est positionnée immédiatement en dessous de la vue précédente
dans la liste. Pour une approche plus moderne, flexible et
performante de l'affichage des listes, utilisez RecyclerView.
Pour afficher une liste, vous pouvez inclure une vue de liste dans
votre fichier XML de mise en page:
<ListView
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
ListView est un adaptateur qui ne connaît pas les détails, tels que le type et le contenu,
des vues qu’il contient.
ListView affiche des vues à la demande à ListAdapter, par exemple pour afficher de
nouvelles vues lorsque l'utilisateur fait défiler vers le haut ou vers le bas.

9. 9
UTILISATION DES LAYOUTS XML
❑ Il est possible de créer et d'attacher des composants widgets à une
activité en utilisant uniquement du code Java.
❑ Nous allons voir comment employer un fichier de positionnement
(layout) codé en XML pour le faire.
❑ Android permet la définition d’interfaces graphiques dans un format
XML.
❑ Elle est réalisée dans des fichiers XML où on spécifie des relations
existantes entre les widgets, ainsi qu'avec leurs conteneurs.
❑ C'est une ressource stockée dans le dossier prévu à cet effet :
res/layout.
DÉFINITION D’UN IDENTIFIANT
❑ Android propose la notion d'identifiant, utilisé en informatique,
notamment pour les bases de données.
❑ Chaque vue Android peut ainsi disposer d'un identifiant défini grâce
à l'attribut XML android:id.

10. 10
La syntaxe utilisée pour définir un identifiant est un peu particulière.
On écrit : @+id/buton, ce qui correspond à:
1. @ : Ce caractère spécial dans les layouts Android exprime une
indirection. Ainsi, le système comprend que la ressource pointée
par l'identifiant n'est pas définie dans le fichier courant, mais dans
un fichier externe.
2. + : Ce caractère permet d'indiquer à Android que l'identifiant peut
être ajouté à la liste des identifiants de l'application si cella n'est
pas déjà le cas.
3. id/ : En conjonction avec le @, id/ permet d'obliger Android à
regarder dans la liste des identifiants déjà déclarés (par +).
4. buton : c'est le nom de l’identifiant définit.
Gestion des événements
❑ Sous Android, les actions de l'utilisateur sont perçues comme un
événement, clic sur un bouton, le maintien de cette action,
l'effleurement d'un élément de l'interface, etc.
❑ Ils sont interceptés par les éléments de l’interface pour exécuter des
actions en conséquence.

11. 11
❑ L’interception repose sur la notion d'écouteurs (listeners).
❑ Il associe un événement à une méthode à appeler en cas
d’apparition de cet événement.
❑ Ils sont représentés par des interfaces. Ils correspondent aux types
d'événements à prendre en compte et qu'il est nécessaire de
redéfinir pour préciser l'action à faire lors de la génération de
l’événement.
❑ L'écouteur s'appelle OnClickListner et la méthode se nomme
onClick().
Positionner les vues avec les gabarits
❑ Une interface graphique n'est pas uniquement composée de vues
"feuilles".
❑ Il existe, des vues particulières permettant de contenir d'autres vues
et de les positionner : les gabarits, layouts.

12. 12
En fonction du type choisi, les vues et les gabarits seront disposés
différemment :
o LinearLayout : Ce gabarit aligne l'ensemble de ses enfants dans
une direction unique, horizontale ou verticale. Les éléments se
succèdent ensuite de gauche à droite ou de haut en bas. Ce
gabarit n'affiche donc qu'un seul élément par ligne ou colonne
(selon l'orientation choisie : horizontale ou verticale).
o FrameLayout : Ce gabarit empile les éléments fils les uns sur les
autres tel une accumulation de calques. Par défaut, toutes les
vues filles s'alignent sur le coin supérieur gauche, mais il est
possible de modifier le positionnement avec le paramètre
android:layout_gravity.

13. 13
o RelativeLayout : Ses enfants sont positionnés les uns par
rapport aux autres, le premier enfant servant de référence
aux autres. Ce gabarit a l'avantage de permettre un
positionnement précis et intelligent tout en minimisant le
nombre de vues utilisées.
o TableLayout : Permet de positionner vos vues en lignes
et colonnes à l'instar d'un tableau.
o Gallery : Affiche une ligne unique d'objets dans une liste
déroulante horizontale.