IHM et les composants graphique

sous la plateforme ANDROID

Plan du chapitre

1) Construction d’une I H M
2) Les gabarits
3) Les Composants graphiques non
conteneurs

2
I. C onstru ctio n d’une IHM

 Construire une I H M , c'est mettre des composants

graphiques les uns à l'intérieur des autres
 Les ensembles de composants graphiques sont des
classes. On aura la classe des boutons, la classe des
cases à cocher, etc.
 Un composant graphique particulier sera une
instance particulière d'une classe. Par exemple le
bouton "Quitter" et le bouton ''Sauvegarder" d'une
IHM seront deux instances de la classe des boutons 3
C onstr uction d ’u n e I H M

 Un composant graphique a 3 parties :

⚫ Les données qu'il représente : le modèle (model)
⚫ Le dessin d'affichage : la vue (view)

⚫ Ce qui prend en charge les actions de l'utilisateur

sur ce composant : le controleur

4
 C onstr uctio n d ’u n e ih m

 Les interfaces sont composées d’objets héritant 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)
⚫ Un groupe de vues organise l’affichage des
vues qu’il contient
5
⚫ Un groupe de vues est une vue.
 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.
C onstr uctio n d ’u n e IH M

6
C onstr uction d ’u n e ih m
 On peut tout coder en J a v a dans l'activité
 Mais, en général, pour l'IHM on utilise plutôt les fichiers
XML
 Par exemple, créer une nouvelle application Android
⚫ Ouvrir le fichier activity_main.xml
(dans res/layout/activity_main.xml)
 Et on peut construire
l'IHM en glisser déposer à
partir d’une palette
graphique.
7
 L’IHM est alors générée
en X M L
C onstr uction d ’u n e IH M

 O n peut changer la largeur et la hauteur d'un

composant à l'aide de ses propriétés
⚫ Exemple : layout:width et layout:height
 Les valeurs de ces propriétés peuvent être
⚫ match_parent (anciennement nommé fill_parent avant
l'API 8) indique que le composant graphique sera aussi
grand en largeur ou hauteur que son conteneur le lui
autorise

o wrap_content indiquant que le composant prend

seulement la taille qui lui faut en largeur ou hauteur pour 8

s'afficher correctement
 Pour positionner une propriété (= valeur d'attribut =
données = ...) d'un composant graphique on peut le
faire soit en X M L soit par appel d'une méthode
appropriée en java
 Dans le fichier X M L , on positionne une propriété
d'un composant graphique à l'aide d'une valeur
d'attribut de sa balise X M L

9
Donc il y a une correspondance entre les noms
d'attribut d'une balise XML et une méthode, pour
positionner une propriété d'un composant
graphique.

On a par exemple :
⚫ Android:background pour l’arrière plan
⚫ Android:alpha pour la transparence d’une vue
(0 pour complètement transparent et 1 pour
complètement opaque)
 CONSTRUCTION D’UNE IHM

 Une fois l’IHM est totalement définie dans le

fichier activity_main.xml on peut juste invoquer
les composants dans le code java et les utiliser
 Le fichier activity_main.xml repère les

composants par android:id

10
 Le composant est manipulé par cet identifiant dans le
programme Java à l'aide de la méthode
findViewById([Link]);

 La valeur nomIdentifiant est celle qui apparaît dans le

fichier activity_main.xml après @+id/……..
Pour cet exemple ce sera
findViewById([Link].button1);
Exemple de code xml d’une IHM

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/aller"
android:text="Reservation Ticket"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</ LinearLayout>

11
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 :

⚫ 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.
⚫ Autres (ListView, GridView, WebView,
MapView, ...)
 Les déclarations se font principalement en X M L , 12
ce qui évite de passer par les instanciations J ava.
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

 ="fill_parent" : l'élément remplit tout l'élément parent,

 ="wrap_content" : prend la place minimale nécessaire

à l'affichage ;
⚫ android:orientation : définit l'orientation
d'empilement ;
⚫ android:gravity : définit l'alignement des éléments.
13
GABARITS

<LinearLayout xmlns:android
="[Link]
m/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:id="@+id/accueilid" >
</LinearLayout>

14
 Une interface graphique définie en X M L sera
aussi générée comme une ressource dans la
classe statique R .
 Le nom du fichier X M L , par exemple [Link]
permet de retrouver le layout dans le code J a v a au
travers de [Link].

public void onCreate(Bundle

savedInstanceState)
{ [Link](savedInstanceState);
setContentView([Link] .acceuil) ; }

15
 LES GABARITS

 Le layout reste modifiable au travers du code, comme tous les

autres objets graphiques. Pour cela, il est important de spécifier
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,
permettant de factoriser des morceaux d'interface.
 on peut accéder à un layout par son id et agir dessus à travers
du code J a v a :
16
LinearLayout l = (LinearLayout)findViewById([Link]);
[Link]([Link]);
L E S G A B A R I T S : L I N E A R L AY O U T

 On peut dire que, LinearLayout est l'outil de

modélisation la plus courante.
 Il propose une «boîte»

17
L E S G A B A R I T S : L I N E A R L AY O U T

 L a propriété d'orientation à utiliser pour un LinearLayout dans

le fichier X M L est l'attribut android:orientation de la balise
LinearLayout.
 Les valeurs possibles pour cette propriété sont vertical et
horizontal
⚫ L a valeur vertical indique que les contenus seront les uns en
dessous des autres,
⚫ la valeur horizontal indique qu'ils seront les uns à la
suite des autres

 L'orientation peut être modifiée à l'éxécution par la méthode

setOrientation() lancée sur le LinearLayout en précisant la
valeur LinearLayoutI
18
L E S G A B A R I T S : L I N E A R L AY O U T

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

fournir les attributs dimensionnels :
 android: layout_width et android: layout_height pour
aider à résoudre la question de l'espace vide.
 Les valeurs utilisées pour définir la hauteur et la
largeur sont les suivants :( une valeur exacte de pixel (125px
pour 125 pixels) : c'est fortement déconseillé)

⚫ Fournir wrap_content, ce qui signifie que le composant doit remplir

son espace naturel, sauf si cela est trop grand, dans ce cas,
Android peut utiliser word-wrap a u besoin pour le faire rentrer.
⚫ Fournir match_parent (anciennement fill_parent avant l'API 8), ce qui 19

signifie que le composant doit remplir tout l'espace disponible dans

 LES GABARITS: L I N E A R L AY O U T

 Le poids est utilisé pour attribuer proportionnellement

l'espace pour les widgets dans une vue. Vous définissez à
android: layout_weight une valeur (1, 2, 3, ...) pour indique
quelle proportion de l'espace libre devrait aller à ce widget.
 Exemple Les deux widgets :
 TextView et botton ont été réglées dans l'exemple
précédent. Ces deux widgets ont la propriété
supplémentaire
 android: layout_weight = "1" alors que le widget
EditText android: layout_weight = "2" N B : L a valeur
par défaut est de 0 20
L E S G A B A R I T S : L I N E A R L AY O U T

 La proprieté weight indique le poids du

composants dans le layout
 Le poids est utilisé pour attribuer
proportionnellement l'espace pour les composants
dans une vue.
 Vous définissez à android: layout_weight une valeur (1, 2,
3, ...) pour indique quelle proportion de l'espace libre
devrait aller à ce widget.

21
LES GABARITS: L I N E A R L AY O U T

 Exemple Les deux

composants : TextView et
botton ont l a propriété
supplémentaire android:
layout_weight
⚫ pour le botton = ‘1’’
⚫ pour l’ EditText = ‘’2"

22
 LES GABARITS: L I N E A R L AY O U T

 L a proprieté gravity est utilisé pour indiquer

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é X M L android:
layout_gravity = "..."

pour définir d'autres modalités possibles: gauche (left) ,

centre (center), droite (right) , haut (top) , bas (bottom),
etc 23
L E S G A B A R I T S : L I N E A R L AY O U T

24
LES G A B A R I T S : L I N E A R L AY O U T

 Il y a une différence entre: android: gravity et

android:layout_gravity
 android: gravity spécifie la manière de
placer le contenu d ' u n objet, à l a fois sur les
axes : x (abcisses) –y (ordonnées) , à
l'intérieur de l'objet lui-même.
 android:gravity="center’’ => centrer le contenu
du composant (par exemple centrer le texte)
 android: layout_gravity="center« => centrer
le composant lui-même dans son conteneur 25

(layout)
LES GABARITS: L I N E A R L AY O U T

 La proprieté Padding spécifie l'espace entre

les limites de la "cellule" composant et le
contenu du composant réels.
 Pour augmenter l’espace interne entre les
bords du composant et de son contenu, on
utilise la propriété android:padding ou en
appelant setPadding () lors de l'exécution de
Java
 Pour augmenter l'espace entre eux on utilise 26

l’attribut android:layout_margin
L E S G A B A R I T S : R E L AT I V E L AY O U T

 U n RelativeLayout est un conteneur qui permet de placer

ses contenus les uns par rapport aux autres
 C'est le conteneur proposé dans le (nouveau) outil de
construction d'IHM
 Les Views contenues dans le RelativeLayout indiquent
leur positionnement à l'aide de leurs attributs (dans le
fichier X M L de l'IHM)
 Les Views indiquent leur position par rapport à la vue
parente ou leurs Views soeurs (en utilisant leur id)
 Les valeurs des attributs sont soit des boolean, soit l'id
27
d'une autre View
L E S G A B A R I T S : R E L AT I V E L AY O U T

Les Views dans un RelativeLayout peuvent utiliser les

attributs :
⚫ 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)I

28
L E S GABARITS:
R E L AT I V E L AYO U T

29
L E S G A B A R I T S : R E L AT I V E L AYO U T

 Pour se référer au conteneur :

⚫ android:layout_alignParentTop indique que le
haut du composant doit être aligné avec le haut du
conteneur
⚫ android:layout_alignParentBottom en bas du
composant doit être aligné avec le bas du conteneur
⚫ android: layout_alignParentLeft côté gauche du
composant
doit être aligné avec le côté gauche du conteneur
⚫ android:layout_alignParentRight côté droit du
composant doit être aligné avec le côté droit du conteneur
⚫ android:layout_centerInParent le composant doit
être positionnée à la fois horizontalement et verticalement
au centre du conteneur
⚫ android:layout_centerHorizontal le composant doit
être positionné horizontalement au centre du conteneur
⚫ android:layout_centerVertical le widget doit être
positionnée verticalement au centre du conteneur
L E S G A B A R I T S : R E L AT I V E L AYO U T

 Pour se réferer à d’autres composants:

⚫ android: layout_above indique que le composant doit être placé au-
dessus du composant référencé dans la propriété
⚫ android: layout_below indique que le composant doit être placé
au- dessous du composant référencé dans la propriété
⚫ android: layout_toLeftOf indique que le composant doit être
placé à la gauche du composant référencé dans la propriété
⚫ android: layout_toRightOf indique que le composant doit être placé à
la droite du composant référencé dans la propriété
⚫ android: layout_alignTop indique que le haut du composant doit
être aligné avec le haut du composant référencé dans la propriété
⚫ android: layout_alignBottom indique que le bas du composant doit
être
aligné avec le bas du composant référencé dans la propriété
⚫ android: layout_alignLeft indique que le gauche du composant doit
être aligné avec la gauche du composant référencé dans la propriété
⚫ android: layout_alignRight indique que le droit du composant doit
être
aligné avec la droite du composant référencé dans la propriété
⚫ android: layout_alignBaseline indique que les lignes de base des
deux composants doivent être alignés
 Exemple: android: layout_below = "@ + id /ediUserName"
L E S G A B A R I T S : TA B L E L AYO U T

 Le TableLayout agence les widgets sur un quadrillage

exactement comme on pourrait le faire en H T M L avec
la balise <table>
 Les lignes sont déclarées par vous en mettant
widgets comme des fils d'un TableRow à
l'intérieur d u TableLayout globale.

32
 L E S G A B A R I T S : TA B L E L AY O U T

 Le nombre de colonnes est déterminé par Android

(vous pouvez contrôler le nombre de colonnes d'une
manière indirecte).
 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
(ceci est similaire à l'attribut colspan que l'on trouve
dans les cellules d u tableau en H T M L )
33
L E S G A B A R I T S : TA B L E L AY O U T

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

34
L E S G A B A R I T S : TA B L E L AY O U T

35
L E S G A B A R I T S : TA B L E L AY O U T

 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.
 Exemple : nous étirons les colonnes 2, 3, et 4 pour remplir le
reste de la ligne.
<TableLayout
xmlns:android="[Link]
android:id="@+id/myTableLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ff0033cc"
android:stretchColumns="2,3,4"
android:orientation="vertical" >
<TableRow>
 L E S GABARITS: S C R O L L V I E W L AYO U T

 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.
 Ceci est similaire à la navigation un page Web volumineuse
qui oblige l'utilisateur à faire défiler la page pour voir la
partie inférieure du formulaire.
37
L E S G A B A R I T S : S C R O L LV I E W L AY O U T

<?xml version="1.0" encoding="utf-8"?> <ImageView

android:id="@+id/myPicture"
<ScrollView android:layout_width="wrap_content" 9
xmlns:android="http:// /0
android:layout_height="wrap_content" 2
/2
[Link] android:src="@drawable/ic_launcher" 0
[Link]/apk/res/android" 1
/> 7
android:id="@+id/myScrollView1" <TextView
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_height="wrap_content"
android:background="#ff009999" > android:text="Line1"
android:textSize="70dip" / >
<LinearLayout </LinearLayout>
android:id="@+id/myLinearLayoutVertical <View
" android:layout_width="fill_parent"
android:layout_height="6dip"
android:layout_width="fill_parent" android:background="#ffccffcc" / >
android:layout_height="fill_parent" ……….
android:orientation="vertical" > <View
<LinearLayout android:layout_width="fill_parent"
android:layout_height="6dip"
android:id="@+id/ myLinearL ayoutH orizon android:background="#ffccffcc" / >
tal1" <TextView
android:layout_width="fill_parent" android:id="@+id/textView5"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_height="wrap_content"
android:orientation="horizontal" > android:text="Line5" 38
android:textSize="70dip" / >
</LinearLayout>
</ScrollView>
L E S GABARITS: LISTVIEW

 ListView place les composants qu’il contient

verticalement, les uns après les autres et un seul par ligne :
ils sont visuellement séparés par une ligne.
 Les composants sont fournis par une instance de
ListAdapter. S i la hauteur cumulée de tous les composants
ajoutés dépasse la taille de l’écran, la liste devient scrollable.
 C e layout pourrait, par exemple, être employé pour créer un
menu avec sous-menu : les options du menu seraient des
TextView qui en cas de sélection afficheraient un autre
ListView.
39
L E S GABARITS: LISTVIEW

40
Exercice 1
Correction
Exercice 2
Correction exercice 2
 Ré f é re n c e s

1) Cours de Jean-Marc Farinone, maître de conférences au

Conservatoire National des Arts et Métiers (CNAM) de Paris

2) Cours "Développement sous Android" de Jean- François

Lalande, I N S A , Institut National des Sciences Appliquées,

Centre VA L D E L O I R E

44