Layout : Android User Interface (UI)

Layout : Android User Interface (UI)

Une ressource de présentation ou un layout en Anglais, définit l’architecture de l’interface utilisateur dans une activité ou un composant.

Une mise en page Android est une classe qui permet d’organiser la façon dont ses enfants apparaissent sur l’écran. Tout ce qui est une View (ou hérite de View) peut être un enfant d’une Layout. Tous les Layout héritent de ViewGroup (qui à son tour hérite de View) afin que vous puissiez fare les mises en page. Vous pouvez également créer votre Layout personnalisée en créant une classe qui hérite de ViewGroup.

On a parlé de la définition de Layout, passons maintenant aux layouts utilisées sur Android.

Layout UI

Les Layouts Standars Android

LinearLayout

LinearLayout est un  ViewGroup qui aligne tous les enfants dans une seule direction, verticalement ou horizontalement. Vous pouvez spécifier la disposition de la mise en page avec l’attribut d’orientation Android:  android:orientation.

Layout LinearLayout

[su_label type= »info »]Remarque: Si l’élément racine de l’interface n’est pas LinearLayout, vous pouvez modifier le nom de la étiquette sans devoir modifier quoi que ce soit d’autre, donc vous aurez une interface avec l’élément racine qui est LinearLayout.[/su_label]

android:layout_weight

Cet attribut a une valeur «très important» à une View en fonction de la quantité d’espace qu’il devrait occuper sur l’écran. Une valeur de poids (weight) plus grande lui permet de se développer pour combler tout espace restant dans la View parentale. Les sous  View peuvent spécifier une valeur de poids, puis l’espace restant dans le ViewGroup est attribué aux sous  View dans la proportion de leur poids déclaré. Le poids par défaut est nul.

RelativeLayout

RelativeLayout est un  ViewGroup qui affiche des View enfants dans des positions relatives. La position de chaque  View peut être spécifiée par rapport aux éléments View fraternelles (par exemple à gauche ou au-dessous d’une autre vue) ou dans des positions relatives à la zone parentale RelativeLayout (par exemple alignées vers le bas, vers la gauche ou le centre).

Un RelativeLayout est un utilitaire très puissant pour la conception d’une interface utilisateur parce qu’il peut éliminer les groupes de View imbriqués et maintenir votre hiérarchie de mise en page à plat, ce qui améliore des performances. Si vous vous trouvez en utilisant plusieurs groupes LinearLayout imbriqués, vous pouvez les remplacer par un seul RelativeLayout.

Layout RelativeLayout

TableLayout

Layout TableLayout

 

TableLayout place ses composants enfants dans des lignes et des colonnes. Les conteneurs TableLayout n’indiquent pas de lignes de bordure (border) pour leurs lignes, colonnes ou cellules. La table aura autant de colonnes que la ligne avec la plupart des cellules. Une table peut laisser les cellules vides, mais les cellules ne peuvent pas se traverser (span) verticalement, comme elles le peuvent en HTML.
  • TableRow
Les objets TableRow sont les View enfant d’un TableLayout (chaque TableRow définit une seule ligne dans le tableau). Chaque ligne a zéro ou plus de cellules, dont chacune est définie par toute autre View. Ainsi, les cellules d’une ligne peuvent être composées d’une variété d’objets View, comme les objets ImageView ou TextView. Une cellule peut également être un objet ViewGroup (par exemple, vous pouvez vouss nicher un autre T ableLayout en tant que cellule).

TableLayout est une vue qui regroupe les vues en lignes et en colonnes.

GridLayout

GridLayout utilise une grille de lignes infiniment fines pour séparer sa zone de dessin en des lignes, des colonnes et des cellules. Il supporte à la fois la travée (span) de lignes et de colonnes, cela signifie qu’il est possible de fusionner des cellules adjacentes dans une grande cellule (un rectangle) pour contenir une View.

Avec  GridLayout, s’il n’y a pas de colonne de grille d’objets, la largeur de la grille est égale à 0. De la même façon, si la ligne n’est pas déplacée par des objets, la hauteur de la grille est 0.

layout_columnWeight

Dans  GridLayout, l’attribute  layout_columnWeight est weight par colonne (column) de l’objet dans la cellule, il peut affecter l’occupation par colonne, la valeur par défaut est 0.

Layout GridLayout

FrameLayout

FrameLayout est un espace réservé à l’écran que vous pouvez utiliser pour afficher une vue unique.

AbsoluteLayout

AbsoluteLayout vous permet de spécifier l’emplacement exact de ses enfants. Organisez les vues des enfants en fonction des coordonnées x, y.

CodAndroid

CodAndroid, un outil gratuit d'apprentissage de programmation en ligne, pour débutants, intermédiaires et Pros. En plus de tutoriels et des exemples de codes.

Laisser un commentaire