1. Layout
Un Layout définit la structure d'une interface utilisateur dans une application, comme dans
une activité. Tous les éléments de la mise en page sont construits à l'aide d'une hiérarchie
d’objets View et ViewGroup. Ces objets possèdent des attributs ou paramètres qui
permettent de les configurer et de les positionner sur l’écran d’un smartphone.
2. View et ViewGroup
Un Objet View dessine à l’écran une chose que l’utilisateur peut voir et interagir avec.
Un Objet ViewGroup est un conteneur qui définit la structure pour des objets de type View
et d’autres ViewGroup.
Figure 1: Illustration d'une hiérarchie de vues, qui définit une mise en page d'interface utilisateur
Un objet de type View est généralement appelé « widget » et peut être l'une des
nombreuses sous-classes, telles que des Boutons « Button » ou des zones de texte
« EditText ». etc.
Un objet de type ViewGroup est généralement appelé « Layouts » et peut être l'un des
nombreux types qui fournissent une structure de mise en page différente, comme
« LinearLayout » ou « ConstraintLayout »
3. Declaration de Layout
Pour respecter la bonne pratique de programmation qui consiste à séparer la logique
applicative de la présentation, Android fournit un vocabulaire XML simple qui correspond
aux classes et sous-classes de vue (View), telles que celles pour les widgets et les Layouts.
4. Types d’objets View les plus utilisés
4.1. TextView
Un élément d'interface utilisateur qui affiche du texte à l'utilisateur. Son code XML est le
suivant :
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Bonjour, je suis un widget TextView" />
Le paramètre « android:text » défini le contenu du TextView.
4.2. EditText
Un élément d'interface utilisateur pour saisir et modifier du texte. Son code XML est le
suivant :
<EditText
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:inputType="text"/>
Le paramètre « android:inputType » permet de configurer le type de clavier qui doit
apparaître. Dans notre exemple, on aura un clavier de type alphanumérique. Pour avoir un
clavier pour mettre un code pin numérique, ce paramètre aura pour valeur
« numericPassword »
4.3. Button
Un élément d'interface utilisateur sur lequel l'utilisateur peut appuyer ou cliquer pour
effectuer une action. Son code XML est le suivant :
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Appuyez moi " />
5. Types d’Objet ViewGroup les plus utilisés
5.1. LinearLayout
LinearLayout est un ViewGroup qui aligne tous ses éléments enfants dans une seule
direction, verticalement ou horizontalement. On peut spécifier la direction de la mise en
page avec l'attribut android:orientation.
Tous les enfants d'un LinearLayout sont empilés l'un après l'autre, de sorte qu'une liste
verticale n'aura qu'un enfant par rangée, quelle que soit leur largeur, et une liste horizontale
n'aura qu'une rangée de haut (la hauteur de l'enfant le plus grand, plus le rembourrage).
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!—Vues enfant -->
</LinearLayout>
Exemple :
Figure 2: UI avec LinearLayout
5.2. RelativeLayout
RelativeLayout est un ViewGroup qui affiche les vues enfants dans les positions relatives. La
position de chaque View peut être spécifiée comme relative aux éléments frères et sœurs
(comme à la gauche ou en dessous d'une autre View) ou dans des positions relatives à la
zone RelativeLayout parente (telles que alignées en bas, à gauche ou au centre).
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!—Vues enfant -->
</LinearLayout>
Exemple:
Figure 3Figure 3: UI avec RelativeLayout
Il existe le type par defaut ConstraintLayout qui est similaire à RelativeLayout mais
beaucoup trop complexe pour un nouvel apprenant du langage Android.
6. Arbre XML d’interface graphique
Chaque fichier Layout doit contenir exactement un élément racine, qui doit être un objet
View ou ViewGroup. Une fois l'élément racine définit, on peut ajouter des objets Layouts ou
des widgets supplémentaires en tant qu'éléments enfants pour construire progressivement
une hiérarchie de vue qui définit votre mise en page.
Exemple de la figure 2
LinearLayout
orientation= Vertical
View
View
View
View
EditText
EditText
EditText
Button
l_width= match_parent
l_width= match_parent
l_width= match_parent
l_width= wrap_content
l_height= wrap_content
l_height= wrap_content
l_height= wrap_content
l_weight= 1
l_height= wrap_content
gravity= top
L’attribut « l_ » est l’abbreviation de « layout_ »
l_gravity= right