Développement Mobile

sous Android
3 – Création d’interfaces
utilisateur

FST – 2020/2021
 Objectifs de cette partie
• Comprendre la notion de vues (widgets) et concevoir des
activités Android.
• Etudier le cycle de vie d'une activité.
• Manipuler les layouts afin de positionner les widgets dans
une activité.
• Créer une interface utilisateur en XML.
• Créer des interfaces sans définition XML (en utilisant le
code Java).
• Interagir avec un élément de l’interface.
• Gérer les événements dans une activité et comprendre la
notion d’écouteur. 80
 Les interfaces utilisateur
• Une bonne interface utilisateur  Clé de réussite d’une
application.
• Une interface est un ensemble de composants graphiques :
bouton, texte, image, zone de saisie, boutons radio, case à
cocher, etc.
• Un composant graphique peut, lui aussi, contenir d’autres
composants graphiques

• Android se distingue par une séparation et hiérarchisation

d’interfaces (appelées aussi activités) extrêmement
élevées. 81
 Les activités
• Une activité = un écran graphique
• Hérite de la classe android.app.Activity
• Les éléments de l'activité sont définis dans des fichiers XML
(répertoire /res).
• Une application est formé de N activités (il faut désigner
une activité de départ).
• Les activités doivent être chainées (une activité doit activer
la suivante).
• La transition entre deux écran correspond au lancement
d'une activité ou au retour vers une autre activité placée en
arrière-plan. 82
 Les activités
• Différents types d’activités:
– MapActivity, ListActivity, TabActivity, Service,
– Processus sans IHM: Broadcast Receiver, etc.
• Exemple d’activités
– une activité pour afficher les paramètres des
applications
– une activité pour choisir un contact dans le répertoire
– une activité pour la saisi d'un message
– une activité pour afficher le journal d'envoi
83
 Spécification d’une activité
Une activité est composée de deux volets :
• la logique de l’activité et la gestion du cycle de vie de
l’activité qui sont implémentés en Java dans une classe
héritant de Activity (nous reviendrons plus tard sur tous
ces concepts) ;
• l’interface utilisateur, qui pourra être définie soit dans le
code de l’activité soit de façon plus générale dans un fichier
XML placé dans les ressources de l’application.

84
 Cycle de vie d’une activité
Les états principaux d’une activité sont les suivants :
• active (active) : activité visible qui détient le focus utilisateur et
attend les entrées utilisateur. C’est l’appel à la méthode onResume, à
la création ou à la reprise après pause qui permet à l’activité d’être
dans cet état. Elle est ensuite mise en pause quand une autre activité
devient active grâce à la méthode onPause ;
• suspendue (paused) : activité au moins en partie visible à l’écran mais
qui ne détient pas le focus. La méthode onPause est invoquée pour
entrer dans cet état et les méthodes onResume ou onStop
permettent d’en sortir ;
• arrêtée (stopped) : activité non visible. C’est la méthode onStop qui
conduit à cet état.
85
Cycle de vie d’une activité

86
 Cycle de vie
d’une activité

source : www.android.com

87
 Code d’une activité
• onCreate() : Appelée lorsque l’activité est créée. Permet de restaurer l’état de l’interface
utilisateur grâce au paramètre savedInstanceState.
• onDestroy() : Appelée lorsque que l’activité a fini son cycle de vie. C’est ici qu’on place le code de
libération de mémoire, fermeture de fichiers et autres opérations de "nettoyage".
• onStart() : Appelée lorsque l’activité démarre. Permet d’initialiser les contrôles.
• onStop() : Appelée lorsque l’activité passe en arrière plan. Libérez les écouteurs, arrêtez les
threads, votre activité peut disparaître de la mémoire.
• onRestart() : Appelée lorsque l’activité sort de son état de veille.
• onPause() : Appelée lorsque que l’activité est suspendue. Stoppez les actions qui consomment des
• ressources. L’activité va passer en arrière-plan.
• onResume() : Appelée après le démarrage ou une pause. Relancez les opérations arrêtées
(threads).
• Mettez à jour l’application et vérifiez vos écouteurs.
• onSaveInstanceState() : Appelée lorsque l’activité termine son cycle visible. Sauvez les données
importantes.
• onRestoreInstanceState() : Appelée après onCreate. Les données sont rechargées et l’interface
utilisateur est *restaurée dans le bon état.
88
Exemple d’interface

89
 Représentation d’une interface
• L’ Utilisateur ne voit qu’un seul écran.
• De point de vue Développeur, une interface est un
assemblage de divers composants graphiques
• La représentation effective de l’ensemble des
composants graphiques se fait sous forme d’arbre,
en une structure hiérarchisée.

90
L’écran vu par le développeur

91
Arborescence de l’exemple

92
 Définition d’une interface
• Sous Android, une interface peut être définie
de deux façons différentes:
1. Une description déclarative en XML
2. Avec des classes dans le code d’une Activité

93
 Les vues
• Que ce soit avec XML ou code Java, la forme
élémentaire de tout composant graphique est la
vue.
– Les boutons, images, cases à cocher, etc. héritent de la
classe View.
– On a la possibilité de regrouper plusieurs composants
graphique (vues) dans une structure arborescente à
l’aide de la classe ViewGroup qui, elle, est, aussi, dérivée
de la classe View.

94
 Retour à l’exemple

Activity

ViewGroup (haut) ViewGroup (milieu) ViewGroup (bas)

Case à cocher texte

Bouton 1 Bouton 2
Texte oui Texte non étoiles jour mois année

Comment sont organisées

les vues dans un
ViewGroup?
95
 Les layouts
• Un Layout (gabarit ou conteneur) permet une mise
en page des composants d’un ViewGroup.
• C’est un conteneur qui aide à positionner les objets
qu’il s’agisse de vues ou d’autres layouts au sein
d’une interface.
• Un layout est extension de la classe ViewGroup.

96
 Types de Layout
• LinearLayout permet d’aligner ses éléments de gauche à
droite ou de haut en bas.
• RelativeLayout ses éléments sont positionnés les uns par
rapport aux autres.
• FrameLayout destiné à afficher un seul élément en haut et
à gauche de l’écran (exemple : cadre pour afficher des
images superposées)
• TableLayout permet de positionner les éléments en lignes
et colonnes à l’instar d’un tableau.

97
 Exemples

LinearLayout RelativeLayout TableLayout

WebView List View Grid View

98
 Conteneur LinearLayout
Pour configurer un LinearLayout, on peut agir sur cinq paramètres :
• android:orientation : L’orientation précise si le LinearLayout représente une ligne (alignement
horizontal) ou une colonne (alignement vertical).

• android:layout_width et android:layout_height : spécifient la largeur et la hauteur des layouts. Ils

prennent des valeurs (ex : en pixels) ou des constantes : fill_parent (prendre la place disponible)
ou wrap_content (n’occupe que la place qui lui est nécessaire).

• android:layout_weight : indique la proportion d’espace libre qui sera affectée au widget. Si cette
valeur est la même pour deux widgets, l’espace libre sera partagé équitablement entre eux. Si la
valeur est 1 pour un widget et 2 pour l’autre, le second utilisera deux fois plus d’espace libre que le
premier, etc.

• android:gravity : indique au widget et à son conteneur comment l’aligner par rapport à l’écran
(exemple: LEFT, CENTER_HORIZONTAL, RIGHT, etc.). Par défaut, les widgets s’alignent à partir de la
gauche et du haut.

• android:padding : précise l’espace situé entre le contour de la "cellule" du widget et son contenu
réel. Elle est analogue aux marges d’un document dans un traitement de texte. 99
 LinearLayout
• Exemple 1:

100
 LinearLayout
• Exemple 2 : configuration du poids et de gravité

101
 Hiérarchie de layouts
• Il est possible d’imbriquer des layouts les uns dans les autres, ce qui
permet de créer des mises en forme évoluées.
• Nous parlerons ainsi de layout parent et de layout enfant.

Hiérarchie de vues avec des paramètres de layouts associés à chaque vue

102
 Création d’une activité
Pour créer une nouvelle activité, il faut suivre les étapes
suivantes :
1. Créer une nouvelle classe héritant de la classe Activity.
2. Générer la méthode onCreate().
3. Créer un nouveau fichier layout, et y ajouter les éléments
graphiques désirés.
4. Associer ce fichier layout à l’activité dans la méthode onCreate().
5. Ajouter la nouvelle activité dans le fichier Manifest.

103
 Création d’interface utilisateur
en XML
• À une interface est associée deux éléments :
– Une définition de l’interface utilisateur (layout, bouton,
etc.) dans un fichier XML.
– Une définition de la logique utilisateur (comportement)
dans une classe d’activité.
• Avantages :
– Séparation entre la présentation et la logique
fonctionnelle de l’application.
– Possibilité de modifier l’interface sans interférer avec le
code associé.
104
 Intégration d’un layout XML dans
une application
1. Créer un layout XML avec un éditeur texte ou un outil de
le générant.
2. Charger le layout dans la méthode onCreate via la
méthode setContentView.
⁻ Quand l'application est compilée chaque layout XML est compilé
en une ressource View.
⁻ La méthode setContentView prend en paramêtre la référence
vers le layout (de la forme R.layout.nom_du_layout).
3. Instancier les widgets sur lesquels on veut agir.

105
 Définition XML
• Soit le fichier /layout/main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/and
roid"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout> Texte provenant de la ressource
string.xml 106
 Associer l’interface à une activité
• La définition main.xml est identifiée
automatiquement par le complément ADT.
• Puisque main.xml est placé dans /res/layout ,
l’identifiant est R.layout.main
• L’affichage de l’interface se fait via une Activité.
• Il faut créer une classe qui dérive de la classe
Activity. Puis redéfinir la méthode OnCreate pour
spécifier le layout à afficher grâce à la méthode
setContentView.
107
 Code associé à une activité
import android.app.Activity;
import android.os.Bundle;

public class HelloActivity extends Activity {

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

108
 Interagir avec un élément de
l’interface (1)
• Supposons que nous voulions changer le texte à
afficher.
• Il faut tout d’abord récupérer l’élément texte.
• Pour cela, on doit lui associer un identifiant :
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
android:id="@+id/monText"
/>
109
Code minimal d’une activité

110
 Interagir avec un élément de
l’interface (3)
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;

public class HelloActivity extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TextView monTexte = (TextView)
findViewById(R.id.monText);
monTexte.setText("Bonjour tout le monde !");
}
}
111
 Création d’interface utilisateur
avec Code
• Le même résultat que l’exemple précédent peut être réalisé sans
définition XML.
• Cette technique possède quelques inconvénients :
– Pas de séparation entre la définition de l’interface et la logique de cette
dernière
– Rendre le code plus difficile à maintenir par des profils métiers différents
comme un développeur et un graphiste.
• Il existe des situations où le développeur est amené à faire ce choix.
Pour ce faire, il faut :
1. Créer deux objets : TextView et LinearLayout
2. Spécifier les attributs nécessaires à chaque objet
3. Associer l’objet TextView à l’objet LinearLayout
4. Rattacher l’activité à l’objet LinearLayout
112
 Exemple de code sans définition
XML (1)
import android.app.Activity;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.TextView;

public class HelloActivity extends Activity {

/** appelée lorsque l’activité est créée. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

LinearLayout cadre = new LinearLayout(this);

cadre.setOrientation(LinearLayout.VERTICAL);

113
 Exemple de code sans définition
XML (2)
TextView texte = new TextView(this);
texte.setText("Interface créée sans XML");

cadre.addView(texte);

setContentView(cadre);
}
}

Remarque:
– La méthode setContentView n’accepte qu’une seule vue.
– Dans le cas d’une interface qui contient plusieurs vues, il faut réunir ces
vues dans un conteneur et le transmettre à la méthode setContentView. 114
 Gérer les événements
• Suite à un clic dans l’interface graphique (sur un
bouton, EditText, etc) un événement est déclenché.
• Souvent, il faut intercepter cet événement pour
exécuter des actions en conséquence.
• Le mécanisme d’interception repose sur la notion
d’écouteurs (les listeners)
– Associer une méthode à un événement déclenché

116
 Classe écouteur
• Il existe des classes du package android.view.View
qui sont en écoute des événements déclenchés.
• Ces classes sont de type Interface : elles ne
contiennent que des méthodes abstract.
• Exemple :
– L’interface OnClickListener est évoquée lorsque
l’événement (cliqué) est déclenché.
– Elle possède la méthode onClick (View v) qui est
appelée lorsqu’une vue est cliquée.
117
 Interface OnClickListener

public interface OnClickListener {

public abstract void onClick(android.view.View v);

118
 Exemple
• Créer une activité avec un seul bouton. Lorsqu’on
clique sur ce bouton, on affiche « bouton cliqué »

classe OnClickListener

Dans la méthode OnClick

Button afficher « Bouton
cliqué »
setIOnClickListener ( )

119
 Mise en œuvre : main.xml
• Créer un layout avec un seul bouton centré au milieu de l’écran.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical" >

<Button
android:id="@+id/monBouton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cliquez ici !" >
</Button>
120
</LinearLayout>
 Mise en œuvre : projet.java
• Récupérer l’instance monBouton avec l’identifiant
R.id.monBouton.
• Spécifier dans la méthode setOnClickListener
l’écouteur OnClickListener
• Dans la méthode OnClick(), afficher un message
avec un Toast (alerte visuelle)
Toast (context, message, durée).show();

121
 Projet.java
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class ClickButtonActivity extends Activity {

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

122
 Projet.java (suite)
Button b1 =
(Button)findViewById(R.id.monBouton);
b1.setOnClickListener(

new OnClickListener() {
public void onClick(View v){
Toast.makeText(getApplication(),
"Bouton Cliqué", 1000).show();
}
}

);
}
} 123
 À retenir
• Pour pouvoir être lancée, toute activité doit être déclarée dans le
manifeste.
• Le manifeste doit spécifier l'activité principale.
• Les activités sont empilées/dépilées:
– empilées quand une activité est lancée.
– dépilée (c.à.d. détruite) quand on presse le bouton "Retour".
• Une pression sur le bouton "Accueil" ne détruit pas l'activité mais elle
passe en arrière plan.
• Plusieurs piles d'activités peuvent coexister avec Android (l'utilisateur
passe de l'une à l'autre)
• Les smartphones n’ont pas la même définition d’écran. Les écrans
varient peut être tourné.
125