Académique Documents
Professionnel Documents
Culture Documents
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" />
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"/>
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 " />
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 :
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:
Exemple de la figure 2
LinearLayout
orientation= Vertical