Développement Applications Mobiles

Ch3. Composants graphiques

walid.zeddini@gmail.com

www.zeddini.com
Objectifs
Ce chapitre est le plus concret des chapitres, il traite de l’interface graphique qui servira au dialogue
homme/machine.
La plupart des composants IHM ou widgets sont des classiques déjà utilisés depuis plusieurs années sur
les applications de bureau. Néanmoins, contrairement aux tout premiers systèmes mobiles, les
composants Android ont véritablement un look et une ergonomie pensés pour les terminaux tactiles à
taille réduite.

Ressources :
http://developer.android.com/ tout, tout, tout
Cours, TD/TP, code http://www.u-picardie.fr/ferment/android
http://www.vogella.com/android.html tutoriel
http://saigeethamn.blogspot.fr/ tutoriel
http://www.franck-simon.com cours très complet
l'Art du developpement, M. Murphy, Pearson livre simplePro Android 4, S Komatineni D
MacLean, Apress livre complet
Le livre écrit par Florent Garin « Android »
Le livre de Mark Murphy chez Pearson
Le cours de Victor Matos :
http://grail.cba.csuohio.edu/~matos/notes/cis-493/Android-Syllabus.pdf
Plusieurs livres :
Android A Programmers Guide - McGraw Hill
Professional Android Application Development - Wrox

2
La brique de base de l'interface utilisateur = zone rectangulaire "dessinable" et source d'événement dans une
fenêtre d'application, les views sont organisées en arborescence. Elles sont définies par programmation et/ou
par fichier XML :
 leurs propriétés (x, y, text, width, backgroundColor, ...)
 leurs éventuels listeners d'événements
 le focus et leur visibilité
 un id (optionnel)

NB : Les composants graphiques figurant dans le schéma ci-dessus, sont

détaillés dans les séances de TPs. Nous focalisons nos intérêts, dans ce chapitre,
sur les LAYOUTS qui vont contenir les widgets (Button, EditText, TextView,
RadioButton….)

3
3. LES LAYOUTS – Points Clés -

Conception des UI complexes

• On peut dire que, LinearLayout est l'outil de modélisation la plus courante. Il propose une «boîte»
modèle similaire à Java-Swing Box-Layout.

• En général, l'interface utilisateur complexe résulte de la combinaison de simples boîtes imbriquées

qui montrent leurs pièces intérieures avec une orientation horizontale ou verticale.

Les

layouts sont des ViewGroup responsables du dimensionnement et du positionnement des widgets à

l’écran. Il en existe plusieurs, chacun adoptant une stratégie bien spécifique.

Résumé des conteneurs-Android Communément utilisés

1.LinearLayout (le modèle de boîte),

2.RelativeLayout (un modèle à base de règles),

3.TableLayout (le modèle de grille),

4.ScrollView, un récipient conçu pour aider à la mise en œuvre des conteneurs de défilement.

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

Avant de commencer ...

1. Le gestionnaire de l’aménagement Android le plus simple est appelé: Frame Layout.
2. Un Frame Layout est un récipient rectangulaire qui coince chaque enfant à son coin supérieur gauche.
3. Ajouter plusieurs vues pour Frame Layout , c’est juste empiler l'un sur l'autre (qui se chevauche les
vues)
1

4
 1

3.1 FrameLayout
Ce layout empile les widgets les uns sur les autres. Chaque composant est positionné dans le coin en
haut à gauche en masquant le widget précédent à moins que le widget venant d’être ajouté ne soit
transparent.

3.2 LinearLayout
Ce layout aligne les widgets dans une seule direction : verticalement ou horizontalement selon le
paramétrage de l’attribut orientation. Ce layout prend en compte les marges (magins) ainsi que
l’alignement (gravity :left, center, right) des composants. Les éléments graphiques peuvent déclarer un
poids (vueight) qui indique comment se répartira le surplus d’espace entre les widgets, l’espace
supplémentaire sera distribué proportionnellement aux poids des composants.
Pour configurer un LinearLayout, vous avez cinq principaux domaines de contrôle en plus le contenu
du conteneur:
 orientation,
 fill model,
 weight,
 gravity,
 padding ,
 margin

5
 Ce layout est fréquemment utilisé, les exemples que l’on peut trouver plus loin l’exploitent pour
construire leur IHM.
 Orientation
indique si le LinearLayoutre présente une ligne (HORIZONTAL) ou une colonne (VERTICAL).

HORIZONTAL

V
E
R
T
I
C
A
L

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

<LinearLayout
android:id="@+id/myLinearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ff0033cc"
android:padding="4dip"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" >
<TextView
android:id="@+id/labelUserName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffff0066"
android:text="User Name"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#ff000000"
>
</TextView>
<EditText
android:id="@+id/ediName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
>
</EditText>
<Button
android:id="@+id/btnGo"
android:layout_width="125dip"
android:layout_height="wrap_content"
android:text="Go"
android:textStyle="bold"
>
</Button>
</LinearLayout>
Ajouter propriété d’Androïd orientation : à votre élément LinearLayout dans la mise en page XML,
définir la valeur à l'horizontale pour une ligne ou verticale pour une colonne. L'orientation peut être
modifiée à l'exécution par l’invocation de setOrientation ()

6
  fill model (Remplissage)
Les widgets ont une taille «naturel» en fonction de leur texte accompagné.
Lors de leurs tailles combinées ne correspond pas exactement à la largeur de l'écran de l'appareil
Android, nous pouvons poser la question quoi faire avec l'espace restant.

Tous les widgets à 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:
1. Spécifier une dimension particulière, comme Ex : 125 dip (device independent pixel)
2. Fournir wrap_content, ce qui signifie que le widget doit remplir son espace naturel, sauf si cela est
trop grand, dans ce cas, Android peut utiliser word-wrap au besoin pour le faire rentrer.
3. Fournir match_parent, ce qui signifie que le widget doit remplir tout l'espace disponible dans son
conteneur qui le renferme, après avoir pris en charges tous les autres widgets.

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/myLinearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"

7
 android:background="#ff0033cc"
android:orientation="vertical" rangée par rangée
android:padding="4dip">

<TextView
android:id="@+id/labelUserName"
android:layout_width="match_parent" Utiliser toute la ligne
android:layout_height="wrap_content"
android:background="#ffff0066"
android:text="User Name"
android:textColor="#ff000000"
android:textSize="16sp"
android:textStyle="bold"></TextView>

<EditText
android:id="@+id/ediName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"></EditText>

<Button
android:id="@+id/btnGo"
android:layout_width="125dip" Taille spécifique 125 dip
android:layout_height="wrap_content"
android:text="Go"
android:textStyle="bold"></Button>
</LinearLayout>

 weight
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 chacune la propriété supplémentaire android: layout_weight = "1" alors que le widget
EditText android: layout_weight = "2"
NB : La valeur par défaut est de 0

Prend: 2 / (1 +1 +2)
de l'espace de l'écran,

 gravity / layout_gravity

8
 gravity est utilisé pour indiquer comment un contrôle s'aligne sur l'écran.
• Par défaut, les widgets 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

La différence entre: android: gravity et android:layout_gravity

android: gravity 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.

android:gravity="center"
android: layout_gravity il positionne la vue par rapport à son parent (c'est à dire que la vue est
contenu dans).

android:layout_gravity="center"

 Padding
Le rembourrage spécifie combien y a t’il d'espace entre les limites de la "cellule" widget et le contenu
du widget réels.

Si vous souhaitez augmenter l’espace interne entre les bords du widget et de son contenu, utilisez la
propriété android:padding ou en appelant setPadding () lors de l'exécution de Java.

Note: rembourrage est analogue aux marges d'un document de traitement de texte.

9
 Padding & Marging

Les marges INTERNES utilisant Padding

Exemple:
La boîte EditText a été modifiée pour afficher 30dip de rembourrage tout autour :

<EditText
android:id="@+id/ediName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:padding="30dip"
/>

10
 Les marges EXTERNES
Par défaut, les widgets sont serrés les uns à côté des autres. Pour augmenter l'espace entre eux utilisent
l’attribut android:layout_margin
La boîte EditText a été modifiée pour afficher 30dip de rembourrage tout autour :

<EditText
android:id="@+id/ediName"
android:layout_width="fill_parent"
Espace entre-
android:layout_height="wrap_content"
widget android:textSize="18sp"
augmenté android:padding="30dip"
android:layout_margin="6dip" />

3.3 ListView
ListView place les widgets 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 widgets sont fournis par une instance de ListAdapter.
Si la hauteur cumulée de tous les composants ajoutés dépasse la taille de l’écran, la liste devient
scrollable.
Ce 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.

Figure 3.20 — Le ListView peut servir à créer des menus

TagXML

11
<?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:orientation="vertical" >
<ListView
android:id="@+id/felins"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:choiceMode="singleChoice"
android:entries="@array/felins" />
</LinearLayout>

3.4 RelativeLayout
RelativeLayout place des widgets en fonction de leur relation avec les autres widgets dans le conteneur et
le conteneur parent.

Exemple:
A est en haut du conteneur parent
C est en bas de A, à sa droite
B est en bas de A, à gauche de C

Se référant au conteneur :
Certains de positionnement XML (boolean) mappent un widget en fonction de son emplacement à
l’égard de la place du parent:
• android: layout_alignParentTop indique que le haut du widget doit être aligné avec le haut du
conteneur
• android: layout_alignParentBottom en bas du widget doit être aligné avec le bas du conteneur
• android: layout_alignParentLeft côté gauche du widget doit être aligné avec le côté gauche du
conteneur
• android: layout_alignParentRight côté droit du widget doit être aligné avec le côté droit du
conteneur
• android: layout_centerInParent le widget doit être positionnée à la fois horizontalement et
verticalement au centre du conteneur
• android: layout_centerHorizontal le widget doit être positionné horizontalement au centre du
conteneur
• android: layout_centerVertical le widget doit être positionnée verticalement au centre du
conteneur
Se référant à d'autres widgets
Les propriétés suivantes gèrent le positionnement d'un widget à l'égard d'autres widgets:
android: layout_above indique que le widget doit être placé au-dessus du widget référencé dans la
propriété
• android: layout_below indique que le widget doit être placé au-dessous du widget référencé dans
la propriété
• android: layout_toLeftOf indique que le widget doit être placé à la gauche du widget référencé
dans la propriété
• android: layout_toRightOf indique que le widget doit être placé à la droite du widget référencé
dans la propriété
• android: layout_alignTop indique que le haut du widget doit être aligné avec le haut du widget
référencé dans la propriété
• android: layout_alignBottom indique que le bas du widget doit être aligné avec le bas du widget

12
 référencé dans la propriété
• android: layout_alignLeft indique que le gauche du widget doit être aligné avec la gauche du
widget référencé dans la propriété
• android: layout_alignRight indique que le droit du widget doit être aligné avec la droite du
widget référencé dans la propriété
• android: layout_alignBaseline indique que les lignes de base des deux widgets doivent être
alignés

Pour utiliser la notation relative dans les propriétés dont vous avez constamment besoin :
1. Mettre les identifiants (android: idattributes) sur tous les éléments dont vous aurez
besoin d'aborder.
2. La syntaxe est: @ + id / ... (par exemple un EditText pourrait être XML disant: android:
id = "@ + id /ediUserName")
3. Référencer autres widgets en utilisant la même valeur d'identifiant (id @ + / ...) déjà
donné à un widget.
Par exemple, une commande en dessous de la EditTextbox pourrait dire: android:
layout_below = "@ + id /ediUserName"

Exemple :

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/myRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ff000099">

<TextView
android:id="@+id/lblUserName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#ffff0066"
android:text="User Name"
android:textColor="#ff000000"

13
 android:textStyle="bold"></TextView>

<EditText
android:id="@+id/ediUserName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/lblUserName"
android:layout_alignLeft="@+id/lblUserName"
android:layout_alignParentLeft="true"
android:padding="20dip"></EditText>

<Button
android:id="@+id/btnGo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ediUserName"
android:layout_alignRight="@+id/ediUserName"
android:text="Go"
android:textStyle="bold"></Button>

<Button
android:id="@+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/ediUserName"
android:layout_toLeftOf="@+id/btnGo"
android:text="Cancel"
android:textStyle="bold"></Button>

</RelativeLayout>

Note : Utilisez l'éditeur de mise en page pour la pose sur RelativeLayouts

Les widgets contenus dans un RelativeLayout peuvent déclarer leur position relativement par rapport
à leur parent ou par rapport aux autres widgets. Ce ViewGroup est un peu plus difficile à maîtriser
que les autres layout car un placement malencontreux peut entraîner en cascade d’autres erreurs.
Par exemple par l’attribut « android:layout_below="@id/widget2" », un widget annonce qu’il
souhaite se retrouver en dessous du widget2. Avec « android:layout_toLeftOf="@id/widget3" »,
il aurait été mis à la gauche du widget3.

3.6 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

14
 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.

Exemple

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

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/myScrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ff009999" >

<LinearLayout
android:id="@+id/myLinearLayoutVertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<LinearLayout
android:id="@+id/myLinearLayoutHorizontal1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >

<ImageView
android:id="@+id/myPicture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher_background" />

<TextView
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Line1"
android:textSize="70dip" />
</LinearLayout>

<View
android:layout_width="fill_parent"
android:layout_height="6dip"
android:background="#ffccffcc" />

<TextView
android:id="@+id/textView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Line2"
android:textSize="70dip" />

<View
android:layout_width="fill_parent"
android:layout_height="6dip"
android:background="#ffccffcc" />

<TextView
android:id="@+id/textView3"

15
 android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Line3"
android:textSize="70dip" />

<View
android:layout_width="fill_parent"
android:layout_height="6dip"
android:background="#ffccffcc" />

<TextView
android:id="@+id/textView4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Line4"
android:textSize="70dip" />

<View
android:layout_width="fill_parent"
android:layout_height="6dip"
android:background="#ffccffcc" />

<TextView
android:id="@+id/textView5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Line5"
android:textSize="70dip" />
</LinearLayout>

</ScrollView>

Combiner une
Simple ImageView& TextView
TextView dans un LinearLayout
horizontal

Scroller

Ce qu’il faut retenir

La création d’interface graphique avec Android peut se faire à la fois par du code et par une définition
XML. Cette dernière solution est très souvent souhaitable. Les familiers d’HTML n’auront pas de mal à
se faire à la grammaire XML d’Android de définition des IHM. Les habitués de Swing pourront
également déceler des similitudes, néanmoins ceux qui sont réfractaires à ce toolkit n’ont pas à
s’inquiéter, l’approche d’Android est plus pragmatique et simple que le framework de Java.

16