Institut Supérieur d'Informatique de Mahdia
Support du cours
DÉVELOPPEMENT
D’APPLICATIONS MOBILES
Naziha Nouri
[email protected]
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
Construction d’une IHM
• 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
Construction d’une IHM
• Modèle-vue-contrôleur ou MVC
6
Construction d’une IHM
• 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
Construction d’une IHM
• 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
Construction d’une IHM
• Android view class
9
Construction d’une IHM
Différents types des gabarits Différents types des vues
10
Construction d’une IHM
• 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
Construction d’une IHM
• 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
Construction d’une IHM
• 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
Construction d’une IHM
• 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
Construction d’une IHM
• 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
Construction d’une IHM
• 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
Les gabarits: linear layout
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
Les gabarits: linear layout
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
Les gabarits: linear layout
Vous pouvez remarquer
bouton avec le poids 2
obtient plus de taille
par rapport à l'autre
27
Les gabarits: linear layout
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
Les gabarits: linear layout
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
Les gabarits: linear layout
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 GABARITS: RELATIVELAYOUT
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
LES GABARITS: RELATIVELAYOUT
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
LES GABARITS: TABLELAYOUT
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
LES GABARITS: TABLELAYOUT
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
LES GABARITS: TABLELAYOUT
37
LES GABARITS: TABLELAYOUT
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
LES GABARITS: TABLELAYOUT
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
LES GABARITS: SCROLLVIEW LAYOUT
Défiler les 10 boutons: dans le sens vertical
dans le sens horizontal
41
LES GABARITS: SCROLLVIEW LAYOUT
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
LES GABARITS: LISTVIEW
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
LES GABARITS: LISTVIEW
Couleur rouge
Épaisseur
Couleur vert
45
LES GABARITS: LISTVIEW
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
LES GABARITS: LISTVIEW
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
LES GABARITS: LISTVIEW
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
LES GABARITS: LISTVIEW
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
LES GABARITS: LISTVIEW
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
LES GABARITS: LISTVIEW
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
LES CONTRÔLES ANDROID
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
LES CONTRÔLES ANDROID
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
