10/10/2023

Institut Supérieur des Etudes Technologiques de Béja

DÉVELOPPEMENT MOBILE
Enseignante: Mme. Haïfa Chorfi

CHAPITRE 3 : INTERFACE GRAPHIQUE

Niveau : DSI3

79 Mme. HAIFA CHORFI

79

Introduction

80 Mme. HAIFA CHORFI

80

Mme Haifa Chorfi 1

 10/10/2023

Concept 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.).

Ecran vu par l’utilisateur Ecran vu par le développeur Arborescence de l’interface

81 Mme. HAIFA CHORFI

81

Concept Interface

 Sous Android, vous pouvez décrire vos interfaces graphiques de

deux façons différentes :
 avec une description déclarative XML
 directement dans le code d’une activité en utilisant les classes
adéquates.

 La façon la plus simple de réaliser une interface est d’utiliser la

méthode déclarative XML via la création d’un fichier XML
qu’on placera dans le dossier /res/layout du projet.

82 Mme. HAIFA CHORFI

82

Mme Haifa Chorfi 2

 10/10/2023

Concept Interface - 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.

83 Mme. HAIFA CHORFI

83

Concept Interface - Vues

 L’utilisation et le positionnement des vues dans une activité se fera

la plupart du temps en utilisant une mise en page qui sera
composée par un ou plusieurs gabarits de vues.

84 Mme. HAIFA CHORFI

84

Mme Haifa Chorfi 3

 10/10/2023

Concept Interface - Layout

 Les Layouts = Gabarits

définissent la structure visuelle
pour une interface utilisateur
 Un layout ou une mise en
page est un conteneur qui aide à
positionner les objets, qu’il
s’agisse de vues ou d’autres
layout au sein de votre interface.
 Les fichiers de définition
d’interface XML sont enregistrés
dans le dossier res/layout du Types de Layout
projet.
85 Mme. Haifa CHORFI

85

Concept Interface - ConstraintLayout

86 Mme. HAIFA CHORFI

86

Mme Haifa Chorfi 4

 10/10/2023

Concept Interface - Layout

87 Mme. HAIFA CHORFI

87

Attributs

 Chaque gabarit possède des attributs spécifiques, et d’autres communs à tous les
types de gabarits.
 Tous les widgets y compris les layouts doivent fournir une taille (hauteur et
largeur). Donc ils doivent définir les deux propriétés: L

android:layout_width
android:layout_height H

 Chaque fichier de définition d’interface possède un identifiant unique qui y fait

référence directement dans le code.
Déclaration d’un élément : android:id= “@+id/idElem”
Utilisation XML : @id/idElem
ID

 Chaque ID aura une référence dans le fichier R.JAVA à partir de laquelle nous
88
pourrions l'appeler dans les fichiers de type Activity.R.
Mme. Haifa CHORFI
Utilisation Java : R.layout.id R.java

88

Mme Haifa Chorfi 5

 10/10/2023

Attributs
 Orientation : Sens de placement des vues dans un conteneur
 android:orientation = vertical | horizontal

 Taille : Surface prise par la vue

 android:layout_width = ??px|match_parent|wrap_content
 android:layout_height = ??px|match_parent|wrap_content
 ="match_parent": l'élément remplit tout l'élément parent
 ="wrap_content": prend la place minimum nécessaire à l'affichage

 Gravité : Alignement d'une vue dans son conteneur

 android:layout_gravity=left|center_horizontal|top|
bottom|right

 Marge: précise l’espace situé entre le contour de la "cellule" du

widget et son contenu réel
 android:padding

89 Mme. HAIFA CHORFI

89

Concept Interface - Layout

 Exemple:
<!-- Mon premier gabarit -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width=“match_parent" Espace de nommage
android:layout_height=“match_parent”> d’Android (imposé)
</LinearLayout>

propriétés du conteneur
principal

90 Mme. HAIFA CHORFI

90

Mme Haifa Chorfi 6

 10/10/2023

Création d’une interface

 La création d’une interface se traduit par la création de deux

éléments :
 une définition de l’interface utilisateur (gabarits, etc.) de façon
déclarative dans un fichier XML ;
 une définition de la logique utilisateur (comportement de
l’interface) dans une classe d’activité.

 Cela permet d’avoir une séparation stricte entre la présentation et la

logique fonctionnelle de votre application.
 De plus, un intégrateur graphique pourra modifier l’interface sans
interférer avec le code du développeur.

91 Mme. HAIFA CHORFI

91

Exemple LinearLayout

Mme. HAIFA
92CHORFI

92

Mme Haifa Chorfi 7

 10/10/2023

Mme. HAIFA
93CHORFI

93

20 %

10 %

70 %

Mme. HAIFA
94CHORFI

94

Mme Haifa Chorfi 8

 10/10/2023

Attribut Weight

Mme. HAIFA
95CHORFI

95

Exemple ConstraintLayout

Mme. HAIFA
96CHORFI

96

Mme Haifa Chorfi 9

 10/10/2023

Mme. HAIFA
97CHORFI

97

Exercice d’application
 Reconstitué le logo en utilisant :
1.Seulement des LinearLayouts
dans le fichier XML /res/layout/activity_linear.xml

2. Seulement des ConstraintLayouts

dans le fichier XML /res/layout/activity_constraint.xml

LinearLayout ConstraintLayout

Mme. HAIFA
98CHORFI

98

Mme Haifa Chorfi 10

 10/10/2023

Eléments graphiques

 Un gabarit peut contenir des éléments graphiques, ou d'autres

gabarits.

99 Mme. HAIFA CHORFI

99

Eléments graphiques - Labels de texte

 Pour afficher un texte, vous pouvez utiliser la vue TextView

 En XML:
<TextView
android:id="@+id/t1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/texte1"
android:layout_gravity="center”/>

100 Mme. HAIFA CHORFI

100

Mme Haifa Chorfi 11

 10/10/2023

Eléments graphiques - zones de texte

 Pour proposer à l’utilisateur de saisir du texte, vous pouvez utiliser la

vue EditText
 En XML:
<EditText
android:id="@+id/z1"
android:layout_width=“match_parent"
android:layout_height="wrap_content">
android:hint="Taper votre nom" >
</EditText>

101 Mme. HAIFA CHORFI

101

Eléments graphiques - Images

 Pour ajouter une image dans votre interface, on utilise la vue de type
ImageView.
 En XML:
<ImageView
android:id="@+id/logoAndroid"
android:src="@drawable/logo"
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
</ImageView>

102 Mme. HAIFA CHORFI

102

Mme Haifa Chorfi 12

 10/10/2023

Eléments graphiques - Boutons

 Bouton classique
 Pour ajouter un bouton dans votre interface, on utilise la vue de type
Button.
 En XML:
<Button
android:text="Valider"
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>

103 Mme. HAIFA CHORFI

103

Eléments graphiques - Boutons

 Bouton Image
 Pour ajouter un bouton image dans votre interface, on utilise la vue de
type ImageButton.
 En XML:
<ImageButton
android:id="@+id/ImageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon">
<!-- @drawable/icon est une Image qui se trouve dans le
dossier /res/drawable de notre projet -->
</ImageButton>

104 Mme. HAIFA CHORFI

104

Mme Haifa Chorfi 13

 10/10/2023

Eléments graphiques - Eléments à deux états

 La Case à cocher (CheckBox)

 La case à cocher propose un choix basique à vos utilisateurs : « oui » ou «
non ». Pour récupérer à tout moment l’état de la case à cocher, il vous
suffit de le récupérer avec la méthode isChecked.
 En XML:
<CheckBox
android:id="@+id/CheckBox01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cocher ici">
</CheckBox>

105 Mme. HAIFA CHORFI

105

Eléments graphiques - Eléments à deux états

 Le groupe de boutons radio et les boutons radio

(RadioGroup et RadioButton)
 Le groupe de boutons radio propose une liste de choix à réponse unique.
Afin que les boutons radio puissent basculer de l’un à l’autre, vous devez
les regrouper dans un élément ViewGroup de type RadioGroup.
 En XML:
<RadioGroup
android:id="@+id/RadioGroup01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_horizontal">
106 Mme. HAIFA CHORFI

106

Mme Haifa Chorfi 14

 10/10/2023

Eléments graphiques - Eléments à deux états

<RadioButton
android:id="@+id/RadioButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text= " bouton1« >
</RadioButton>
<RadioButton
android:id="@+id/RadioButton02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" bouton2"
android:checked="true">
</RadioButton>
</RadioGroup>

107 Mme. HAIFA CHORFI

107

Eléments graphiques - Eléments à deux états

 Bouton à bascule (ToggleButton)

 android:checked Pour définir l’état initial
 android:disabledAlpha Pour définir la transparence
appliquée lorsque le bouton est inactif
 android:textOff Pour définir le texte quand le bouton
n'est pas allumé
 android:textOn Pour définir le texte quand le bouton est
allumé

108 Mme. HAIFA CHORFI

108

Mme Haifa Chorfi 15

 10/10/2023

Eléments graphiques - Autres

 Sélecteur de date (DatePicker)

 Le sélectionneur de date affiche les boutons nécessaires pour saisir une date.

 android:startYear Pour définir l'année de départ du calendrier

affiché
 android:endYear Pour définir l'année de fin du calendrier affiché
 android:minDate Pour définir la date affichée de départ du
calendrier sous la forme mm/jj/aaaa
 android:maxDate Pour définir la date affichée de fin du calendrier
sous la forme mm/jj/aaaa

109 Mme. HAIFA CHORFI

109

Eléments graphiques - Autres

 Le sélecteur de temps :TimePicker

 La barre de vote : RatingBar : affiche une barre comportant des étoiles

pour représenter et/ou récupérer une notation.

 android:isIndicator Pour indiquer si l'utilisateur peut modifier la

valeur ou pas (true= non modifiable)
 android:numStars Pour définir le nombre d'étoiles affichées
 android:rating Pour définir la position initiale
 android:stepSize Pour définir le pas de progression (on peut colorier
des ¼ d’étoiles par exemple).

110 Mme. HAIFA CHORFI

110

Mme Haifa Chorfi 16

 10/10/2023

Eléments graphiques - Autres

 l’horloge digitale (DigitalClock) : affiche une horloge digitale dans

votre application.

 l’horloge analogique (AnalogClock) : affiche une horloge à aiguilles

dans votre application.

 …..

111 Mme. HAIFA CHORFI

111

Exercice 1
 Donner les types des Layouts suivants :

112 Mme. HAIFA CHORFI

112

Mme Haifa Chorfi 17

 10/10/2023

Exercice 2
 Ecrire le code XML nécessaire pour créer cette interface

113 Mme. HAIFA CHORFI

113

Gestion des évènements

 Sous Android, toutes les actions de l’utilisateur sont perçues comme

un événement, que ce soit le clic sur un bouton d’une interface, le
maintien du clic, etc. Ces événements peuvent être interceptés par les
éléments de l’interface graphique pour exécuter des actions en
conséquence.
 Le mécanisme d’interception repose sur la notion d’écouteurs
appelés listeners dans la documentation Java.
 Il permet d’associer un événement à une méthode à appeler en cas
d’apparition de cet événement. Si un écouteur est défini pour un
élément graphique et un événement précis, la plate-forme Android
appellera la méthode associée dès que l’événement sera produit sur
cet élément.
114 Mme. HAIFA CHORFI

114

Mme Haifa Chorfi 18

 10/10/2023

Gestion des évènements

 Les événements qui peuvent être interceptés ainsi que les méthodes
associées sont imposés.

 Pour que l’interface réagisse à un événement sur un

élément, il faudra choisir l’élément et l’événement à
intercepter, définir un écouteur sur cet événement et
définir la méthode associée.

115 Mme. HAIFA CHORFI

115

Gestion des évènements

 Listener :

Call : click

Application
Callback: onClick

 Pour un événement OnClick (élément cliqué), la méthode associée

sera OnClick() : il nous suffira alors de définir cette méthode pour
notre écouteur pour qu’elle soit appelée lorsque l’utilisateur cliquera
sur l’élément graphique associé.

116 Mme. HAIFA CHORFI

116

Mme Haifa Chorfi 19

 10/10/2023

Gestion des évènements

 Exemple:
 Le clic sur un bouton permet d’afficher le message «Bouton cliqué !».
1. Définir le gabarit
2. Ecrire le code de l’activité main.java

117 Mme. HAIFA CHORFI

117

Gestion des évènements

 1ère méthode
1. Définition du gabarit
Layout/activity_main.xml

118 Mme. HAIFA CHORFI

118

Mme Haifa Chorfi 20

 10/10/2023

Gestion des évènements

 1ère méthode
2. Java
Java/MainActivity.java

119 Mme. HAIFA CHORFI

119

Gestion des évènements

 2ème méthode
1. Définition du gabarit
Layout/activity_main.xml

120 Mme. HAIFA CHORFI

120

Mme Haifa Chorfi 21

 10/10/2023

Gestion des évènements

 2ème méthode
2. Java
Java/MainActivity.java

121 Mme. HAIFA CHORFI

121

Exercice d’application

 Créer une interface qui permet de convertir un poids exprimé en kg

vers pound et vice versa.

122 Mme. HAIFA CHORFI

122

Mme Haifa Chorfi 22

 10/10/2023

Messages d’interaction

 Sous Android, plusieurs événements et action nécessite parfois

l’interaction et la communication avec l’utilisateur: des erreurs
peuvent surgir; des actions doivent être validée; des tâches en
arrière plan peuvent mettre plus de temps que prévu pour se
terminer ; parfois des événements, comme les messages entrants,
sont asynchrones.
 Android dispose d’un framework complet pour gérer ce genre
d’événements et offre plusieurs moyens d’alerter les utilisateurs
par d’autres systèmes que ceux des activités classiques :
 Toasts.
 AlertDialog.

123 Mme. HAIFA CHORFI

123

Toast

 Un toast est un message transitoire permettant d’afficher une

information pendant quelques secondes de façon à ce que l’utilisateur
soit informé, ce qui convient très bien pour les applications
s’exécutant en arrière-plan telles que les services. Mais si l’utilisateur
détourne son regard quelques secondes de l’écran, l’information est
définitivement perdue.
 Un Toast est essentiellement conçu pour diffuser des messages
d’avertissement pour annoncer qu’une longue tâche en arrière-plan
s’est terminée, que la batterie est presque vide, etc. et ceci sans
interrompre l’application active.
124 Mme. HAIFA CHORFI

124

Mme Haifa Chorfi 23

 10/10/2023

Toast

 Syntaxe : Toast.makeText(Contexte, Message, Durée).show();

Java

125 Mme. HAIFA CHORFI

125

AlertDialog

 Les boites de dialogue permettent d'interagir

avec l'utilisateur. Elles offrent des
informations supplémentaires nécessaires à
une application pour continuer une tâche.
 Exemples: erreurs critiques, prise de
décision (Cancel/Ok), messages de
validation, saisie de texte, ajustement de
préférences, etc

126 Mme. HAIFA CHORFI

126

Mme Haifa Chorfi 24

 10/10/2023

AlertDialog

 Pour créer un AlertDialog, la classe Builder offre un ensemble de

méthodes permettant de configurer un AlertDialog.
 Méthodes de configuration de Builder:
 setMessage() : permet de définir le "corps" de la boîte de dialogue à partir
d’un simple message de texte.
 setTitle() et setIcon() : permettent de configurer le texte et/ou l’icône qui
apparaîtra dans la barre de titre de la boîte de dialogue.
 setPositiveButton(), setNeutralButton() et setNegativeButton() : permettent
d’indiquer les boutons qui apparaîtront en bas de la boîte de dialogue, leur
emplacement latéral (respectivement, à gauche, au centre ou à droite), leur
texte et le code qui sera appelé lorsqu’on clique sur un bouton.
 À la fin, il suffit d’appeler la méthode show() de l’objet Builder pour
afficher la boîte de dialogue.
127 Mme. HAIFA CHORFI

127

AlertDialog

 Syntaxe :
AlertDialog alertDialog=new AlertDialog.Builder(this);

alertDialog.setTitle("titre de l’alerte");
alertDialog.setMessage("Message à afficher !!!");
alertDialog.setButton("OK", new
DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}});

alertDialog.show();

128 Mme. HAIFA CHORFI

128

Mme Haifa Chorfi 25

 10/10/2023

AlertDialog
Java

129 Mme. HAIFA CHORFI

129

Exemple

130 Mme. HAIFA CHORFI

130

Mme Haifa Chorfi 26