Le Tutoriel de Android UI Layouts

View more categories:

1- What is Layout?

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. Toutes les Layout héritent de ViewGroup (qui hérite de View) afin que vous puissiez imbriquer les mises en page. Vous pouvez également créer votre Layout personnalisée en créant une classe qui hérite de ViewGroup.
  • L'image ci-dessous illustre la hiérarchie d'héritage entre les Vues dans Android.

2- The standard Layouts in Android

  • Les Layout standards:
Layout Description
LinearLayout


(Horizontal)

(Vertical)

LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally.

RelativeLayout

RelativeLayout is a view group that displays child views in relative positions.

TableLayout

TableLayout is a view that groups views into rows and columns.

GridLayout

GridLayout uses a grid of infinitely-thin lines to separate its drawing area into: rows, columns, and cells. It supports both row and column spanning, which together allow a widget to occupy a rectangular range of cells that are next to each other.
FrameLayout

The FrameLayout is a placeholder on screen that you can use to display a single view.

AbsoluteLayout

AbsoluteLayout enables you to specify the exact location of its children. Arrange the children views according coordinates x, y.

  • The standard Containers:
Container Description
RadioGroup

 

ListView

 

GridView

 

ExpandableListView

 
ScrollView

 

HorizontalScrollView

 

SearchView

 

TabHost

 

VideoView

 
DialerFilter

 

3- 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.
Consultez l'interface ci- dessous, et vous pouvez la concevoir en utilisant RelativeLayout.
  • SLIDER:

4- 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.
Des attributs:
Attribut Description
android:orientation Cela spécifie la direction de l'arrangement et vous utiliserez "horizontal" pour une ligne, "verticale" pour une colonne. La valeur par défaut est horizontale.
Exemple:
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.
La sous  View se trouve dans  LinearLayout qui a des attributs importants: android:layout_weight.

android:layout_weight

Cet attribut attribue une valeur «d'importance» à une Viewen 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.
Les sous-composants qui ont du poids (weight) remplissent l'espace restant de LinearLayout en proportion de son poids.
Avec  LinearLayout (Vertical), les sous composants de l'attribut  android:width=fill_parent va remplir par la largeur de  LinearLayout (Vertical).
Les sous-composants peuvent également définir une valeur spécifique pour  width, height:
La distinction entre  gravity et  layout_gravity:
  • android:layout_gravity définit la grativité de View ou Layout dans ses composants parentals.
  • android:gravity définit la grativité du contenu de View qu'il utilise (Par exemple le texte). 

5- TableLayout

TableLayout est un  ViewGroup qui affiche des éléments sous View dans des lignes et des colonnes.
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).
Exemple:
Remarque: Si l'élément racine de l'interface n'est pas TableLayout, vous pouvez modifier le nom de l'estiquette sans devoir modifier quoi que ce soit d'autre, de sorte que vous avez une interface avec l'élément racine est TableLayout.
La TableRow  sera automatiquement créée (si cette ligne n'a pas existé) lorsque vous faites glisser Subview vers la cellule du tableau.
Les cellules peuvent traverser (span) horizontalement, mais pas verticalement. Il se peut que ces cellules ne contiennent pas de sous View.
Vous pouvez définir la taille précise pour  View dans la cellule, cela changera la taille de cellule.
Vous pouvez définir des attributs android:layout_gravity et  android:gravity des  view dans la cellule, je vais le détailler dans  LinearLayout.

6- 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.
Des tailles (Size), Des marges (Margin) et Alignement / Gravité (Alignment/Gravity)
 
In GridLayout, specifying sizes and margins is done just as with a LinearLayout. Alignment/gravity also works just like gravity in LinearLayout and uses the same constants: left, top, right, bottom, center_horizontal, center_vertical, center, fill_horizontal, fill_vertical and fill.
Flexibility
Contrairement à la plupart des grilles d'autres outils, Android GridLayout n'associe pas de données avec des lignes ou des colonnes. Au lieu de cela, tout ce qui concerne l'alignement (Aligment) et la flexibilité est associé aux composants eux-mêmes.

La flexibilité des colonnes est déduite de la gravité ( gravity) des composants à l'intérieur de la colonne. Si chaque composant définit une gravity, la colonne est prise comme flexible, sinon la colonne est considérée comme inflexible.
Exemple:
Remarque: Si l'élément racine de l'interface n'est pas  GridLayout, vous pouvez changer le nom de l'étiquette sans devoir modifier quoi que ce soit d'autre, donc vous aurez une interface avec l'élément racine est GridLayout.
Des sous composants détermine ses positions dans la grille selon les attributs  layout_row & layout_column:
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.
Si vous spécifiez une valeur différente de 0 pour layout_columnWeight, vous devez définir la valeur layout_gravity (la gravité de la mise en page) pour l'objet, ceci est obligatoire, sinon spécifier la valeur layout_gravity; l'objet ne peut pas être affiché sur la grille:
  • La valeur pour layout_gravity dans ce cas est:
  • left
  • right
  • center_horizontal
  • center
  • fill_horizontal
  • fill

layout_rowSpan

layout_rowWeight

Dans  GridLayout l'attribut  layout_rowWeight est weight par la ligne (row) de l'objet dans la cellule, il peut affecter l'occupation par ligne, la valeur par défaut est 0.

layout_columnSpan

OK, pouvez vous utiliser  GridLayout pour concevoir l'interface comme dessous?

7- FrameLayout

FrameLayout est un espace réservé sur l'écran que vous pouvez utiliser pour afficher une View unique.
Exemple:
Conception l'interface ci- dessous avec  FrameLayout.
Préparez un fichier image:
  • halong.png
Copiez et collez le fichier image dans le dossier  mipmap.
Faites glisser et déposez ImageView dans l'écran left+top.
De la même façon, faites glisser et déposez 2 autres objets  TextView à l'écran:
La définition des attibuts permet  ImageView de remplir l'écran.
ImageView:
  • layout_width: fill_parent
  • layout_height: fill_parent
  • src: @mipmap/halong
Changez l'attribut pour  TextView 1:
TextView 1:
  • layout_width: fill_parent
  • text: Halong Bay, Vietnam
  • layout_gravity:
    • top
    • left
  • layout_marginTop: 100dp
  • padding: 10dp
  • background: #d7cece
Changez l'attribut pour  TextView 2:
TextView 2:
  • text: Photo by intrepidtravel.com
  • layout_gravity:
    • right
    • bottom
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/imageView"
        android:layout_gravity="top|left"
        android:src="@mipmap/halong" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Halong Bay, Vietnam"
        android:id="@+id/textView"
        android:layout_gravity="top|left|center_vertical"
        android:layout_marginTop="100dp"
        android:background="#d7cece"
        android:padding="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Photo by intrepidtravel.com"
        android:id="@+id/textView2"
        android:layout_gravity="right|bottom" />

</FrameLayout>
Exécution de l'application:

View more categories: