Interface graphique
420-14D-FX Programmation pour mobiles
Duquerroy Gilles
1
View
Le framework Android fournit une
classe View qui est la classe mère de
tous les éléments graphiques.
Les éléments graphiques sont définis en
XML, dans le dossier : res / layout
Par convention, si le fichier de layout
est lié à une activité, il est préfixé
par activity, suivi du nom de
l'activité, le tout en minuscule et
séparé par un underscore
ex. activity_main.xml
2
Éditeur graphique mode Design
3
Éditeur graphique mode Text
4
Conteneurs (Layouts)
Généralement les composants d’une vue sont placés dans un layout
● FrameLayout : permet de positionner les éléments les uns au dessus des autres ;
● LinearLayout : permet de positionner les éléments les uns à la suite des autres, dans le sens horizontal
ou vertical ;
● RelativeLayout : permet de positionner les éléments les uns par rapport aux autres ;
● ConstraintLayout : comme le RelativeLayout, mais avec
des règles de positionnement beaucoup plus puissantes.
À noter que le ConstraintLayout est le layout par défaut pour les
dernières versions d’android.
5
Composants
De nombreux composants sont disponibles pour créer les vues, en voici quelques-uns :
● TextView : Afficher du texte (unité de taille en sp)
● ImageView : Afficher des images (mettre les images dans /res/drawable)
● imageButton
● EditText : Champ d’édition
○ Suivant le inputType, le clavier change (documentation)
● CheckBox
● RadioButton
● Button
Chaque composant peut avoir des attributs spécifiques que nous verrons au cas par cas.
6
Attributs
Occupation de l’espace
● layout_width et layout_height
Indique la largeur et hauteur.
Peut-être :
● Précis avec une valeur, unité dp (Density-independent pixels)
● wrap_content : S’ajuste au contenu ou wrap si trop gros.
● match_parent : Prend tout l’espace du parent.
● match_constraint : Pour les constraintLayout, permet de respecter la contrainte définie.
7
Attributs
Occupation de l’espace
● layout_margin et padding
● Mettre des valeurs avec l’unité dp
8
Attributs
Occupation de l’espace
● Poids d’un élément layout-weight
● Mettre 0dp dans layout_width ou layout_height quand on utilise les poids
Poids = 1
1+1 = 2
2+1 = 3
Poids = 2 Poids = 1
9
Attributs
Occupation de l’espace
Alignement avec :
● gravity : positionne le contenu de la vue par rapport
à elle même
● layout_gravity : positionne le composant par rapport à
son parent
10
Autres attributs
De nombreux attributs sont disponibles pour chaque composant
● visibility
● color
● background
● contentDescription
● ...
Faites des recherches en cliquant sur la petite loupe
11
LinearLayout
Définir les largeurs / hauteurs avec :
des valeurs (unité dp)
ou wrap_content /match_parent
ou layout_weight
Choisir l’orientation verticale / horizontale
Utiliser gravity et layout_gravity pour le positionnement
Possibilité d’imbriquer plusieurs
LinearLayout
Documentation
Voir le code
LinearLayout verticaux et horizontaux
12
RelativeLayout
Positionnement des éléments relativement au parent / conteneur
Contexte booléen :
● layout_alignParentTop/Bottom, Left/Right, Start/End
● layout_centerHorizontal/Vertical
● layout_centerInParent
Relativement aux autres éléments (scalaire) :
● layout_above, layout_below, layout_toLeftOf, layout_toRightOf
● layout_alignTop, layout_alignBottom, layout_alignLeft,
layout_alignRight
● layout_alignBaseline
Documentation Voir le code
RelativeLayout
13
FrameLayout
Les éléments sont positionnés les uns par dessus les
autres. Le dernier élément dans le fichier xml est au
dessus de l’avant dernier, etc.
Documentation
Voir le code
FrameLayout
14
ConstraintLayout
● Permet de créer des mises en page complexes avec une hiérarchie de
vues plate (pas de groupes de vues imbriqués).
● Nécessite d’utiliser l’interface graphique d’Android Studio.
● Fonctionne principalement en faisant des “glissés / déposés”.
● C’est maintenant le layout par défaut pour les dernières versions
d’Android.
Documentation
Voir le code
ConstraintLayout
15
Référencer les composants graphique
dans l’activité
16
Identifier les composants graphiques
Pour que le programme puisse interagir avec l’interface graphique, il faut donner des ID aux composants
graphiques.
Exemple avec un TextView et un Button, sélectionnez chaque élément et définissez
un ID unique.
layout/activity_main.xml
17
Récupérer le composant graphique
Dans la class Java MainActivity.java
Importation des widgets dont on a besoin
(peut se faire automatiquement: Alt + Enter ou régler
les « import automatique » dans les settings).
Déclaration des variables
Utilisez findViewById() pour obtenir la référence d’un
composant.
18
