13 mai 2014

Android - Interface utilisateur

Article précédent : Android - Structure d'un projet et Ressources
Dans Android, il existe deux grandes familles d'éléments composant l'interface graphique :
  • les widgets qui sont éléments visuels qui interagissent avec l'utilisateur : bouton, champ texte, calendrier, vidéo, etc.
  • les conteneurs (container) qui ne sont pas visibles de l'utilisateur et qui peuvent contenir un ou plusieurs composants visuels ou conteneurs. Ils servent à agencer les éléments les uns par rapport aux autres.

Définir une interface utilisateur

Les interfaces utilisateurs peuvent définis soit en Java, soit en XML.

Les IDE Eclipse, IntellijIDEA, etc. disposent d'éditeurs graphiques pour les fichiers XML afin de définir visuellement la composition de l'écran ainsi que l'agencement et les propriétés des éléments.

Les fichiers XML des interfaces utilisateurs sont situés dans le répertoire du projet : 
res/layout



Ces fichiers XML contiennent uniquement des éléments de l'interface utilisateur.

Ces éléments sont décrits de la manière suivante : 
<[Classe Java de l'élément]
  android:id="@+id/[identifiant de l'élément]"
  android:[propriete]="[valeur]"
  android:[propriete]="[valeur]"
  android:[propriete]="[valeur]" />
Exemple : affichage d'un champ texte
<TextView
  android:id="@+id/text_id"/>
  android:text="Texte"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
, avec :
  • [Classe Java de l'élément] : Nom de la classe Java de l'élément à afficher
    • cet élément a comme classe parente View
    • il peut s'agir d'un composant visuel ou d'un conteneur définissant l'agencement des éléments
  • android:id : Identifiant unique de l'élément
    • l'élément à la racine du fichier XML n'a pas d'identifiant
    • cet identifiant sert à récupérer l'élément dans le code Java pour le manipuler
    • l'identifiant doit être unique pour TOUTE l'application : deux composants d'un même écran ou non ne doivent pas avoir le même identifiant. On doit choisir un nommage des identifiants pour qu'ils soient uniques, en préfixant par exemple l'identifiant par le nom du fichier XML

Classe R

La classe R est importante : elle est automatiquement générée par l'IDE et contient tous les identifiants des éléments définis dans les fichiers XML :
  • R.id.[identifiant de l'élément] : identifiant d'un élément d'un fichier XML
  • R.layout.[nom du fichier XML] : identifiant de l'élément à la racine du fichier XML
Ceci permet de référencer et de récupérer un élément dans le code Java.
Une erreur de compilation apparaît si l'identifiant dans le code Java ne correspond à aucun élément des fichiers XML.

Récupérer un élément graphique en Java

Nous utilisons l'identifiant stocké dans la classe R pour récupérer l'élément dans le code Java d'une activité (Activity) :
Object element = findViewById(R.id.[identifiant de l'élément]);

// récupérer un champ texte
TextView textView = (TextView) findViewById(R.id.text_id);

Définir l'affichage d'une activité

Le code suivant indique quel fichier XML servira à définir l'écran d'une activité : 
setContentView(R.layout.[nom du fichier XML]);

Eléments d'affichage

Nous allons voir maintenant l'ensemble des éléments composant les écrans.

La classe Java de l'élément à afficher est importante car elle sert de nom de balise dans le fichier XML pour cet élément.

Certaines classes Java servent de parent aux familles d'éléments graphiques : 
View : classe de base de tous les composants d'affichage
+-- Space : espace vide entre les éléments
+-- TextView : classe de base des éléments affichant du texte
+-- ImageView : classe de base des éléments contenant une image
+-- SurfaceView : classe de base des zones dont l'affichage est dessiné (2D, 3D, vidéo)
+-- ViewGroup : conteneur pour l'agencement des éléments
+-- AdapterView : affichage d'une liste de données dynamique

View : classe mère

  • View :
    • classe de base de tous les composants de l'interface utilisateur (widget, control : button, text fields)
    • elle dessine le composant à l'écran
    • elle gère les événements, comme les actions de l'utilisateur
    • le composant d'affichage occupe une zone d'affichage rectangulaire
    • Classes filles :
      • TextView, ImageView, SurfaceView, ViewGroup, AdapterView

Espace vide

  • Space est utile de définir des espaces vides entre les éléments affichés.

Eléments visuels (Widgets)

  • TextView : Composants contenant du texte
    • affiche du texte en lecture seule (pas d'édition)
    • c'est aussi la classe de base des composants contenant du texte :
      • EditText : champ texte (le type détermine le type de valeur à saisir : nombre, date, mot de passe)
      • Button : bouton
      • CheckBox : case à cocher
      • RadioButton : bouton radio
        • les boutons radio sont à inclure dans le conteneur RadioGroup
  • ImageView : Composants affichant des images
    • affiche une image en lecture seule
    • c'est aussi la classe de base des composants contenant une image :
  • SurfaceView : Zone dessinée : 2D, 3D, vidéo
    • affiche une zone qui peut être dessinée en 2D en Java via l'objet Canvas
    • c'est aussi la classe de base des composants dont l'affichage est dessiné :

Conteneurs d'agencement des éléments (Layout Containers)

Les conteneurs (Container) sont des composants invisibles de l'utilisateur qui permettent l'agencement (layout) des éléments qu'elle contient : elle peut contenir des composants d'affichage et des conteneurs. Nous pouvons ainsi avoir des conteneurs imbriqués dans d'autres conteneurs.
  • ViewGroup : Conteneur et agencement des éléments
    • classe de base des conteneurs (Container) qui peuvent contenir d'autres conteneurs et composants :
      • RelativeLayout: agencer les éléments les uns par rapport aux autres (utiliser de préférence des pourcentages pour s'adapter à la taille de l'écran)
      • GridLayout: grille de cellules pour disposer les éléments
      • TableLayout: disposer les éléments sous forme de tableau
      • LinearLayout: agencer les éléments sur une même ligne ou une même colonne
      • FrameLayout: il est optimisé si on n'y affiche qu'un, deux ou trois composants
      • RadioGroup: affiche un groupe de boutons radio
        • il contient plusieurs RadioButton
        • il peut aussi contenir d'autres composants, pour les libellés par exemple
      • AdapterView: décrit ci-dessous

Conteneur d'affichage d'une liste dynamique de données

L'AdapterView sert de conteneur pour l'affichage d'une liste de plusieurs éléments. Il a besoin d'un objet Adapter qui lui fournit les données à afficher ainsi que l'objet vue View qui servira à afficher chaque élément.

Exemple : une liste des contacts qui, pour chaque contact, affiche son nom et prénom ainsi qu'une case à cocher le sélectionner.
  • AdapterView : Conteneur d'affichage d'une liste dynamique de données
    • classe de base des vues contenant une liste dynamique d'éléments fournis par l'objet Adapter
    • Classes filles :
      • ListView: affiche les données sous forme d'une liste verticale
      • ExpandableListView: affiche les données sous forme d'une liste verticale comme précédemment, sauf qu'il est possible, pour chaque élément de la liste, de déplier une zone contenant des informations complémentaires
      • GridView: affiche les données sous forme de grille de données
      • Spinner: affiche les données sous la forme d'une liste déroulante qui s'affiche lorsque l'utilisateur souhaite changer la valeur
  • Adapter : Alimente l'AdapterView en lui fournissant les éléments à afficher
    • ce n'est pas un élément d'affichage
    • il donne à l'AdapterView un accès aux données à afficher
    • il fournit également la vue qui servira à afficher chaque élément
      • cette vue peut être un conteneur et contenir plusieurs composants d'affichage
    • Classes filles :

Exemple


Nous affichons une liste dynamique d'auteurs en affichant à chaque fois le prénom et le nom de l'auteur.

Nous avons ainsi une activité principale MainActivity avec un fichier XML main.xml contenant la liste d'affichage des auteurs via un ListView.

Nous avons aussi une classe spécifique AuthorListAdapter qui implémente Adapter. Elle est liée au fichier XML authoritem.xml qui contient les deux champs texte prénom et nom qui seront affichés pour chaque auteur.

MainActivity.java

Activité principale : point d'entrée de l'application :

main.xml

Ecran de l'activité principale :

authoritem.xml

Zone affichée pour chaque auteur dans la liste des auteurs (ListView)

AuthorListAdapter.java

Classe Adapter spécifique pour afficher la zone d'affichage authoritem.xml de chaque auteur dans la liste des auteurs de l'écran main.xml.

Résultat




Libellés : , ,