Chapitre III Graphiques

Institut Supérieur d'Informatique de Mahdia
Support du cours
DÉVELOPPEMENT
D’APPLICATIONS MOBILES
Naziha Nouri
nourinaziha@yahoo.fr
LCS-GLSI 3 Informatique A.U 2023-2024
2
PLAN
• Construction d’une IHM
• Les gabarits (Layout en anglais))
• Les contrôles Android
3
Construction d’une IHM
• L’IHM se construit par la mise en place des

composants graphiques les uns à l'intérieur des
autres
• Les composants graphiques sont des classes.

• Ex: la classe des boutons, la classe des cases à cocher,
etc.
4
• Un composant graphique particulier sera une

instance particulière d'une classe.
• Ex: bouton "Quitter" et le bouton ''Sauvegarder"
d'une IHM seront deux instances de la classe des
boutons
• Un composant graphique a 3 parties : MVC
• les représentations des données : le modèle (model)
• L'affichage de dessin : la vue (view)
• Décrit les actions de l'utilisateur sur ce composant :
le controleur
5
• Modèle-vue-contrôleur ou MVC
6
• Les objets qui composent les interfaces héritent des

classes View et ViewGroup ;
• Une vue se dessine et permet les interactions avec
l’utilisateur (boutton, textView…)
• Un groupe de vues contient d’autres vues (les
gabarits conteneurs des vues)
– organise l’affichage des vues qu’il contient
– est une vue.
7
• Android fournit une collection de vues et de

groupes de vues qui offrent :
– les principales entrées (textes, champs de texte,
listes, etc.) ;
– différents modèles d’organisation (linéaire, etc.).
• Une classe est associée à chaque type de vue ou
groupe de vue.
8
• Android view class
9
Différents types des gabarits Différents types des vues
10
• Dans l'activité ,On peut tout coder en Java

• Mais pour l'IHM, en général, on utilise plutôt les
fichiers XML
• Par exemple, pour créer une nouvelle application
Android
– Ouvrir le fichier activity_main.xml (dans
res/layout/activity_main.xml)
11
• Et on peut construire l'IHM en glisser déposer à

partir d’une palette graphique.
• L’IHM est alors générée en XML
12
• On peut changer les propriétés d’une composantes

Exemple :
• layout:width largeur
• layout:height hauteur
Valeurs:
– match_parent garde la taille du composant mère
(parent)
– wrap_content : prend seulement la taille qui lui
faut ou…
13
• Pour positionner une propriété (= valeur d'attribut =

données = ...) d'un composant graphique
• En XML: à l'aide d'une valeur d'attribut de sa balise
XML
• Par appel d'une méthode appropriée en java:
• Donc il y a une correspondance entre les noms
d'attribut d'une balise XML et une méthode
• Ex: Android:background pour l’arriere plan
Android:alpha pour la transparence d’une vue (0:
transparnt ou 1: opaque)
14
• Le composant est manipulé par cet identifiant dans

le programme Java à l'aide de la méthode
findViewById(R.id.nomIdentifiant);
• La valeur nomIdentifiant est celle qui apparaît dans
le fichier activity_main.xml après @+id/
• Pour cet exemple l’appelle de composante sera
findViewById(R.id.button1);
15
• Exemple de code xml d’une IHM
16
Les gabarits
• Des ViewGroup particuliers sont prédéfinis : ce sont

les gabarits (layout en anglais) qui proposent une
prédisposition des objets graphiques :
• Les principaux Layout Android sont : (voir page 10)
• LinearLayout (le modèle de boîte),
• RelativeLayout (un modèle à base de règles),
• TableLayout (le modèle de grille),
• ScrollView, un récipient conçu pour aider à la mise
en oeuvre des conteneurs de défilement.
17
Les gabarits
• Autres (ListView, GridView, WebView, MapView, ...)

• Les déclarations se créent principalement en XML,
afin d’évite le passage par les instanciations Java.
18
Les gabarits
• Les attributs des layouts permettent de spécifier des

attributs supplémentaires. Les plus importants sont :
• android:layout_width et android:layout_heigh
• ="match_parent" (voir page 13)
• ="wrap_content"
• android:orientation : définit l'orientation d'empilement ;
• android:gravity : définit l'alignement des éléments.
19
Les gabarits
20
Les gabarits
• L’interface graphique définie en XML sera aussi générée en

tant qu’une ressource dans la classe statique R.
• Le nom du fichier XML, par exemple accueil.xml permet de
retrouver le layout dans le code Java a travers de
R.layout.accueil.
21
Les gabarits
 Le layout reste modifiable au travers du code. Donc, il est

nécessaire d’attribuer un id dans la définition XML du
gabarit (android:id="@+id/accueilid").
 Un layout peut contenir des éléments graphiques, ou
d'autres layouts.
 Les interfaces peuvent aussi inclure d'autres interfaces,
 On peut accéder à un layout par son id et agir dessus à
travers du code Java :
22
Les gabarits: linear layout
 LinearLayout est l'outil de modélisation la plus courante.

 Il propose une «boîte»
 Les composants d'un LinearLayout sont rangés les uns à la

suite des autres horizontalement ou verticalement
23
 LinearLayout est l'outil de modélisation la plus courante.

 Principales propriétés d'un LinearLayout :
• l'orientation
• le mode de remplissage (fill model)
 L'orientation indique si le LinearLayout présente ces
contenus
• sur une ligne (horizontalement)
• sur une colonne (verticalement)
 La propriété d'orientation dans le fichier XML est l'attribut
android:orientation
 L'orientation peut être modifiée à l'éxécution par la méthode
setOrientation() lancée sur le LinearLayout 24
Les gabarits: linearlayout
 Tous les composants à l'intérieur d'un LinearLayout doivent

fournir les attributs dimensionnels android:
• layout_width
• android: layout_height
 pour résoudre la question de l'espace vide.
 Les valeurs utilisées pour définir la hauteur et la largeur sont
les suivants:
 wrap_content :Remplir son espace naturel
 word-wrap : Si trop grand
 match_parent : remplir tout l'espace disponible
25
 LinearLayout possède une fonctionnalité clé

 Le poids: l'attribut weight permet d’autoriser la taille
dynamique pour les composants dans une vue en fonction
de l'espace disponible.
 android: layout_weight=(1, 2, 3, ...)
 Un poids de 0 (valeur par défaut ) indique que la vue ne doit
pas être développée
 Dans l'image de mise en page, vous pouvez remarquer que le
bouton avec le poids 2 obtient plus de taille par rapport à
l'autre
26
 Vous pouvez remarquer

bouton avec le poids 2
obtient plus de taille
par rapport à l'autre
27
 La proprieté gravity est employé comment un contrôle

s'aligne sur l'écran.
 Par défaut, les composants sont de gauche et
alignée en haut.
 Vous pouvez utiliser la propriété XML
android: layout_gravity = "..."
. pour définir d'autres modalités possibles:
• gauche (left) ,
• centre (center) ,
• droite (right) ,
• haut (top) ,
• bas (bottom), etc
28
Spécifie la manière de placer le contenu

d'un objet, à la fois sur les axes : x
(abcisses) –y (ordonnées) , à l'intérieur
de l'objet lui-même.
Gravity=centrer le contenu du
composant (comme ici pour les textes)
Layout-gravity=
centrer le composant lui-même dans
son conteneur (layout)
29
 La proprieté Padding: l’ajustement d'espace entre les limites

de la "cellule" composant et le contenu du composant réels.
 android:padding ou en appelant setPadding () lors de
l'exécution de Java
: augmenter l’espace interne entre les bords du composant
et de son contenu
Exemple: android:padding="30dp"
 La proprieté layout_margin spécifie la marge externe
 android:layout_margin : widgets sont serrés les uns à côté
des autres.
30
LES GABARITS: RELATIVELAYOUT
 Un RelativeLayout est un conteneur qui permet de placer ses
contenus les uns par rapport aux autres
 Les Views contenues dans le RelativeLayout indiquent leur
positionnement à l'aide de leurs attributs (fichier XML)
 Les Views indiquent leur position par rapport à la vue
parente ou leurs Views soeurs (via id)
 Les valeurs des attributs sont soit des boolean, soit l'id d'une
autre View
31
 Les attributs des Views dans un RelativeLayout
 android:layout_alignParentTop : si true, le haut de la View
est calé sur le haut de la vue parente
 android:layout_centerVertical : si true, la View est centrée
verticalement à l'intérieur de la vue parente
 android:layout_below : le haut de la vue est en dessous de la
View indiquée (par son l'id)
 android:layout_toRightOf : le coté gauche de la vue est à
droite de la View indiquée (par son l'id)
32
33
LES GABARITS: TABLELAYOUT
 Le TableLayout organise les widgets (groupes de vues) en

lignes et en colonnes comme balise HTML
 Les lignes sont déclarées par l'élément <TableRow> en
mettant widgets comme des fils à l'intérieur du TableLayout
globale.
 Le nombre de colonnes est déterminé par Android
34
 Si vous avez trois lignes: une avec deux widgets, une avec
trois widgets, et une autre avec quatre widgets, il y aura au
moins quatre colonnes.
 un seul widget peut prendre jusqu'à plus d'une colonne en

incluant : la propriété androïd :layout_span, indiquant le
nombre de colonnes des travées widget
35
 Ordinairement, les widgets sont mis dans la première

colonne de chaque ligne disponible.
 Dans l'exemple ci-dessous, l'étiquette ("URL") irait dans la
première colonne (colonne 0, les colonnes sont comptées à
partir de 0), et le EditText irait dans un ensemble s'étend sur
trois colonnes (colonnes 1 à 3).
36
37
 Par défaut, chaque colonne sera dimensionnée en fonction de la

"naturelle" de la plus grande widget dans cette colonne.
 Si votre contenu est moins large que l'espace disponible, vous
pouvez utiliser la propriété TableLayout:
android:stretchColumns=“…”
 Sa valeur doit être un nombre unique de colonne (0-based) ou une
liste séparée par des virgules des numéros de colonne. Ces
colonnes seront étirés de manière occuper tout l'espace encore
disponible sur la ligne.
 Exemple : nous étirons les colonnes 2, 3, et 4 pour remplir le reste
de la ligne.
38
 Exemple : nous étirons les colonnes 2, 3, et 4 pour remplir le reste de la

ligne.
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/an
droid"
android:id="@+id/myTableLayout"
android:layout_width=« match_parent"
android:layout_height=« match_parent"
android:background="#ff0033cc"
android:stretchColumns="2,3,4"
android:orientation="vertical" >
<TableRow>
39
LES GABARITS: SCROLLVIEW LAYOUT
 Lorsque nous avons plus de données que ce qui peut être sur
un seul écran, vous pouvez utiliser la ScrollViewcontrol.
 Il offre un accès glissement de défilement ou pour les
données. De cette façon, l'utilisateur ne peut voir qu'une
partie de votre mise en page en une seule fois, mais le reste
est disponible via le défilement.
40
 Défiler les 10 boutons: dans le sens vertical
 dans le sens horizontal
41
 Exemple: défiler les 10 boutons dans le sens vertical
42
LES GABARITS: LISTVIEW
 ListView est un view group, affiche des éléments (éléments)

selon une liste et peut être déplacé verticalement. Listview
est une vue importante et est largement utilisé dans les
applications Android.
 Un ListView est fait à partir d'un groupe de ListItem.
ListItem est une ligne (row) individuelle dans listview où les
données seront affichées. Toutes les données dans listview
sont affichées uniquement via listItem. Considérez Listview
comme groupe défilable de ListItems.
 Un ListItem est une pièce de
l'interface qui peut être créée
par un nombre de View.
43
 Divider : Il s'agit d'un dessin ou d'une couleur à dessiner

entre différents éléments de la liste
 dividerHeight :Ceci spécifie la hauteur du séparateur entre
les éléments de la liste. Cela peut être en dp (pixel de
densité), sp (pixel indépendant de l'échelle) ou px (pixel).
 listSelector: vous devez personnaliser les effets, tels que
modifier la couleur d'arrière-plan de ListItem lorsque le
curseur se déplace dessus ou modifier la couleur d'arrière-
plan lorsqu'il est sélectionné.
44
Couleur rouge
Épaisseur
Couleur vert
45
 Android Adapter (L'adaptateur) est un pont entre des View

(par exemple comme ListView) et les données sous-jacentes
pour ce View. Un Adapter gère des données et adapte les
données dans les lignes individuelles (ListItem) du view.
Vous pouvez lier des Adapter avec Android ListView via la
méthode setAdapter.
46
 AdapterView : Il existe plusieurs View ont eu besoin

d'Android Adapter en vue de gérer des données affichées,
ces View sont les sous-classes de la classe AdapterView
47
 Dans Android, les adaptateurs couramment utilisés sont :

1- Array Adapter
2- Base Adapter
1- ArrayAdapter a utilisé à afficher le ListView avec des ListItem
simple, ListItem peut être fabriqué à partir seulement un
TextView, CheckedTextView, EditText,...
Vous pouvez lier des Adapter avec Android ListView via la
méthode setAdapter
48
2- BaseAdapter
 est une classe de base commune d'une implémentation
générale d'un adaptateur qui peut être utilisée dans
ListView, GridView, Spinner, etc.
 Pour avoir une liste personnalisée dans un ListView ou de
grilles personnalisées dans un GridView, vous créez votre
propre adaptateur et y étendez l'adaptateur de base.
ListView GridView
49
2- BaseAdapter
 est une classe de base commune d'une implémentation
générale d'un adaptateur qui peut être utilisée dans
ListView, GridView, Spinner, etc.
 Pour avoir une liste personnalisée dans un ListView ou de
grilles personnalisées dans un GridView, vous créez votre
propre adaptateur et y étendez l'adaptateur de base.
 L'adaptateur de base peut être étendu pour créer un
adaptateur personnalisé permettant d'afficher un élément
de liste personnalisé.
 Remarque importante : ArrayAdapter est également une
implémentation de BaseAdapter
50
Créer une nouvelle classe

CustomAdapter.java
51
LES CONTRÔLES ANDROID
 Ce sont les composants graphiques que voient l'utilisateur, avec

lesquels il agit sur (contrôle) l'interface graphique
 Appelés dans certains domaines, les contrôles
 En Android ce sont (par exemple) :
• Les zones de texte non éditable (~ Label AWT(Abstract
Window Toolkit)) ou éditable (~ TextComponent AWT) :
TextView
• Les boutons (~ Button AWT) : Button
• Les zones de texte éditables (~ TextField et TextArea de
AWT) : EditText
• Les cases à cocher (~ Checkbox AWT) : CheckBox et les
boutons radio RadioButton à regrouper dans un ensemble
52
 Toutes ces classes sont dans le package android.widget

et dérivent de android.view.View
 Arborescence des principaux contrôles Android
– Les classes de composants non
conteneurs (contrôles) sont rangées
dans l'arbre d'héritage :
53
 Peut servir de zone de texte non éditable (~ Label AWT) et dans ce

cas, sert souvent pour présenter les widgets qui suivent
 Propriétés importantes :
 android:text : le texte du TextView
 android:typeface : le type de police utilisée (monospace, ...)
 android:textStyle : le style (italic pour l'italique,
bold_italic pour gras et italique, ...)
 android:textColor pour la couleur d'affichage du texte.
 Les valeurs sont en hexadécimal en unité RGB (par exemple
#FF0000 pour le rouge)
54

Chapitre III Graphiques

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre III Graphiques

Transféré par

Droits d'auteur :

Formats disponibles

Institut Supérieur d'Informatique de Mahdia

• L’IHM se construit par la mise en place des

• Les composants graphiques sont des classes.

• Un composant graphique particulier sera une

• Les objets qui composent les interfaces héritent des

• Android fournit une collection de vues et de

• Android view class

Différents types des gabarits Différents types des vues

• Dans l'activité ,On peut tout coder en Java

• Et on peut construire l'IHM en glisser déposer à

• On peut changer les propriétés d’une composantes

• Pour positionner une propriété (= valeur d'attribut =

• Le composant est manipulé par cet identifiant dans

• Exemple de code xml d’une IHM

• Des ViewGroup particuliers sont prédéfinis : ce sont

• Autres (ListView, GridView, WebView, MapView, ...)

• Les attributs des layouts permettent de spécifier des

• L’interface graphique définie en XML sera aussi générée en

 Le layout reste modifiable au travers du code. Donc, il est

 LinearLayout est l'outil de modélisation la plus courante.

 Les composants d'un LinearLayout sont rangés les uns à la

 LinearLayout est l'outil de modélisation la plus courante.

 Tous les composants à l'intérieur d'un LinearLayout doivent

 LinearLayout possède une fonctionnalité clé

 Vous pouvez remarquer

 La proprieté gravity est employé comment un contrôle

Spécifie la manière de placer le contenu

 La proprieté Padding: l’ajustement d'espace entre les limites

 Le TableLayout organise les widgets (groupes de vues) en

 un seul widget peut prendre jusqu'à plus d'une colonne en

 Ordinairement, les widgets sont mis dans la première

 Par défaut, chaque colonne sera dimensionnée en fonction de la

 Exemple : nous étirons les colonnes 2, 3, et 4 pour remplir le reste de la

 Défiler les 10 boutons: dans le sens vertical

 dans le sens horizontal

 Exemple: défiler les 10 boutons dans le sens vertical

 ListView est un view group, affiche des éléments (éléments)

 Divider : Il s'agit d'un dessin ou d'une couleur à dessiner

 Android Adapter (L'adaptateur) est un pont entre des View

 AdapterView : Il existe plusieurs View ont eu besoin

 Dans Android, les adaptateurs couramment utilisés sont :

Créer une nouvelle classe

 Ce sont les composants graphiques que voient l'utilisateur, avec

 Toutes ces classes sont dans le package android.widget

 Peut servir de zone de texte non éditable (~ Label AWT) et dans ce

Vous aimerez peut-être aussi