Les composants

graphiques
simples

1
Avant propos
• Les interfaces graphiques prennent une place de plus en plus
importante dans le choix des applications par les utilisateurs

2
Concept d’interface
• Une interface est un ensemble (assemblage) de composants
graphiques
• Sous Android, on trouve trois types de composants graphiques :
◦• Les composants unitaires (vues)
◦• Les groupements de composants (groupes)
◦• Les composants conteneurs (layouts)
• Chaque composant graphique (vue, conteneur ou groupe) admet
des proprietes, qui peuvent etre communes (taille, couleur,
positionnement, . . . ) ou specifiques
• L’assemblage des composants dans une interface se fait sous
forme d’arbre ou structure hierarchique.

3
 Concept d’interface

Vue
Exemple d’un d’assemblage de
ecran l’ecran

Arborescence de
l’interface
precedente

4
 Concept d’interface
−Sous Android, les interfaces graphiques peuvent etre decrites de deux manieres :
− Par description dans des fichiers XML (fichier layout)
− Par description directe dans la classe de l’activite (comparable a java swing) mais avec des
classes propres a Android

−La façon la plus simple de realiser une interface est d’utiliser la methode
declarative avec des fichiers layout XML
−Cette methode consiste a creer un fichier XML contenant la definition et
l’organisation des composants graphiques de l’interface. Ce fichier est place par
defaut dans le dossier «/res/layout » de l’application

−Cette methode permet de separer entre la presentation et le traitement dans une

activite

5
Concept d’interface

6
Proprietes communes des composants
graphiques
▪ Identifiant
▪Un identifiant doit etre associe a chaque element decrit dans un fichier
XML. Cet identifiant permet d'acceder a l’element cree dans le code ou de
le referencer dans d’autres fichiers XML
▪Definition de l’identifiant dans le fichier XML :
android:id="@+id/mon_ident"
▪La methode « findViewById(R.id.mon_ident) » permettra de
retrouver cet element dans le code JAVA de l’activite
▪La methode « setId(int) » appliquee a l’objet JAVA d’un composant
permet de definir ou de modifier l’identifiant de ce composant
▪Il y a plein d’autres proprietes communes qui gere la position, la visibilite,
le fond, la taille, les marges ...

7
Proprietes communes des composants
graphiques:Identifiant
Un composant graphique de type bouton

La description du bouton dans le fichier layout

XML

Le referencement du bouton dans la classe de

l’activite

« B » est l’objet JAVA qui fait

reference au bouton « button » cree en XML

8
Les Vues (Widgets)
- Elles definissent les composants graphiques elementaires d’une
interface (boutons, images, cases a cocher, . . . )
- Chaque vue permet d’afficher du contenu a l’utilisateur ou lui
permet d’interagir avec l’application
- Elles sont definies d’une part a travers une balise et plusieurs
attributs XML et d’autre part une classe et plusieurs methodes JAVA.
Ceci permet de manipuler les vues dans le fichier layout de l’activite
ou bien dans sa classe JAVA
- Les classes JAVA des vues heritent de la classe predefinie « View »
- Exemple : Un bouton est definit par la classe « Button

9
ImageView
• Permet d’afficher des images

• Exemple

10
 • TextView et EditText
• TextView est utilise pour afficher un texte tandis que EditText est dedie
a la saisie du texte
• Pour l’EditText, on trouve plusieurs types de formatage qui s’adapte a
1a nature du texte saisie. On trouve par exemple des EditTexts de type :
◦ • Password : pour la saisie des mots de passe
◦ • Email : pour la saisie des adresses mail
◦ • Phone : pour la saisie des numeros de telephone
◦ • Date : pour la saisie des dates
◦ • Multiline Text : pour la saisie du texte a plusieurs lignes

11
 AutoCompleteTextView
• C’est une specialisation de EditText pour apporter l’auto-
completion de la saisie
• Il est associe a une source d’entrees qui peut etre un fichier
XML, une base de donnees, ...
• Exemple

12
 Button
II y a deux types de boutons :
• Button : Un simple bouton poussoir, il admet les memes
parametres que « TextView »

• ImageButton : Un bouton ayant une image comme etiquette, il

possede les memes parametres que « Image View »

13
Vues a deux etats
• II sont des composants qui peuvent avoir deux etats et ils ont
les memes parametres que « TextView » auxquels vient
s’ajouter la definition de l’etat initial

Les boutons radio doivent etre inseres dans un groupe de

type « RadioGroup »

14
 ProgressBar
• Affiche une barre de progression. La forme par defaut d’un ProgressBar
est circulaire
• Pour obtenir d’autres forme on utilise le parametre « style »

• progressBarStyleHorizontal
• progressBarStyleSmall
• progressBarStyleLarge
• SeekBar

C’est une barre de progression sous forme de barre horizontale dotee d’un curseur
permettant de modifier la valeur indiquee par la barre

15
 RatingBar
• Composant utilises pour evaluation (d’applications, d’articles, . . . )
• Il est compose d’un nombre determine d’etoiles (5 par defaut)

☆☆☆☆☆
• DatePicker et TimePicker
Permettent de selectionner une date (jour, mois et annee) ou une heure
(Heure, min)

16
 Horloges et Chronometres
• Permettent la gestion du temps (date et heure)
• Exemple

17
 Vues personnalises
• Il arrive qu’une vue ne reponde pas totalement aux besoins du
developpeur
• Il est possible, dans ce cas, d’heriter d’une vue existante pour
former une vue personnalisee
• Pour creer une vue personnalisee, il faut determiner quelle est la
classe la plus adaptee pour former la base de votre nouvelle vue
• Exemple :
public class CustomView extends TextView {

}
18
Groupes
• Ils sont des composants graphiques, qui heritent de la classe «
ViewGroup », dont le role est de grouper des vues participant a un
choix
•Les principaux groupes :
• ListView : plusieurs elements organises en liste verticale avec separateurs,
souvent utilise pour des listes de mots (type menu)
• GridView : plusieurs elements organises en matrice, souvent utilise pour
des tables de mots (type menu)
• RadioGroup : groupe de boutons radio dont un seul peut etre coche a la
fois
• Gallery : plusieurs elements organisees horizontalement avec defilement,
souvent utilise pour des images

19
 RadioGroup
• Utilise pour grouper des boutons radio
• Un seul bouton peut etre coche a la fois (attention a l’etat initial qui n’e
pris en compte par le « RadioGroup » que s’il est fait par la methode check d
RadioGroup)
• Exemple

20
Groupes

• ListView, GridView, Gallery et autres composants de type

groupe seront traites dans un chapitre ulterieur

21
 Layouts
• Un « layout » (appele aussi « gabarit » ou conteneur) est une extension
de la classe « ViewGroup »
• Il s’agit d’un conteneur qui permet de positionner les composants
graphiques (vues, groupes ou autres layouts) sur l’interface de l’activite
• Il est possible d’imbriquer les « layouts » les uns dans les autres pour
creer des mises en page complexes et evoluees

22
 Layouts
Les principaux types de « layouts »:

• LinearLayout : permet d’aligner les elements de gauche a droite ou de haut en bas

• RelativeLayout: les elements sont places les uns par rapport aux autres

• TableLayout : permet de positionner les vues en lignes et colonnes a l’instar d’une matrice

• AbsoluteLayout : les elements sont places en fonction de leurs coordonnees geometriques

• ScrollView : permet d’ajouter un ascenseur vertical a un seul composant

• HorizontalScrollView : permet d’ajouter un ascenseur horizontal a un seul composant

23
LinearLayout
• Utilise pour placer plusieurs elements en ligne (horizontalement) ou en
colonne (verticalement) sans ascenseurs

24
 AbsoluteLayout
• Utilise pour placer les elements par positions fixes en
definissant leurs coordonnees dans la surface

La position de chaque
composant est determinee a
travers le point superieur
gauche, sa largeur et sa
longueur

25
TableLayout
Utilisé pour placer des éléments en tableau (ou matrice) sans ascenseurs

26
ScrollView et
HorizontalScrollView
• Ils sont utilises en general pour ajouter des ascenseurs a un
conteneur (layout)

• Ils ne peuvent contenir qu’un seul element (le plus souvent un

conteneur)

• ATTENTION : En raison de l’ecran tactile, le defilement porte sur

l’element le plus externe (le plus haut dans l’arborescence des
composants de l’interface)

27