Introduction aux layouts

Les layouts, organisons nos vues

Le pré-requis pour ce tutoriel est la connaissance des ressources layouts, permettants de décrire nos vues sous Android. Si vous n’êtes pas encore à l’aise avec ce concept, je vous renvoie vers Vos premiers pas en Android Partie 1

Commençons à voir maintenant les principaux composantes, aussi nommés Widgets, qui vont nous permettre d’organiser nos vues de différentes façons.

LinearLayout

Ce conteneur va organiser ses éléments en ligne, horizontale ou verticale. Pour cela, il faudra préciser dans le layout le paramètre orientation, avec comme valeur vertical ou horizontal

android:orientation:"vertical"

Voici une liste des fonctions importantes que vous aurez besoin dans un Linearlayout :

  • gravity : permet de préciser comment se place les vues dans le container (ici c’est le parent qui décrit le comportement des fils)
  • layout_gravity : permet de préciser comment la vue se place dans son container (ici c’est le fils qui décrit son comportement dans le parent)
  • layout_weight : permet de donner un poids à une vue, plus le poids sera grand plus sa priorité d’affichage sera grande

Voici un exemple qui résume l’ensemble de ses fonctions

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <View
            android:layout_width="0dp"
            android:layout_height="50dip"
            android:layout_weight="1"
            android:background="@android:color/holo_red_dark" />

        <View
            android:id="@+id/blue"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="50dip"
            android:background="@android:color/holo_blue_dark" />

    </LinearLayout>

    <View
        android:layout_marginTop="16dip"
        android:id="@+id/green"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:background="@android:color/holo_green_dark" />

    <View
        android:id="@+id/orange"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:background="@android:color/holo_orange_dark" />

</LinearLayout>

linear_layout

RelativeLayout

Ce conteneur va nous permettre de placer ses éléments les uns par rapport aux autres. Il peux aussi leur attribuer une position relative par rapport à lui même (il sera ici nommé parent). Pour les placer, nous allons utiliser les identifiants :

android:id="@+id/identifiantVue"

Voici une liste des fonctions importantes que vous aurez besoin dans un RelativeLayout :

  • layout_centerInParent : permet de centrer l’élément dans son parent
  • layout_centerHorizontal : permet de centrer l’élément horizontalement dans son parent
  • layout_centerVertical : permet de centrer l’élément verticalement dans son parent
  •  layout_alignParentLeft : permet de mettre l’élément à la gauche de son parent
  •  layout_alignParentRight : permet de mettre l’élément à la droite de son parent
  •  layout_alignParentTop : permet de mettre l’élément en haut de son parent
  •  layout_alignParentBottom : permet de mettre l’élément en bas de son parent
  • layout_toLeftOf : permet de placer un élément à gauche d’une vue (désignée par son id)
  • layout_toRightOf : permet de placer un élément à droite d’une vue (désignée par son id)
  • layout_alignBottom : permet d’aligner le bas de cette vue avec le bas d’un autre élément (désignée par son id)
  • layout_alignTop : permet d’aligner le haut de cette vue avec le haut d’un autre élément (désignée par son id)
  • layout_alignRight : permet d’aligner le coté droite de cette vue avec le coté droit d’un autre élément (désignée par son id)
  • layout_alignLeft : permet d’aligner le coté gauche de cette vue avec le coté gauche d’un autre élément (désignée par son id)

 

Voici un exemple complet qui vous faciliteras peut être la compréhension

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/red"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_centerInParent="true"
        android:background="@android:color/holo_red_dark" />

    <View
        android:id="@+id/blue"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_alignTop="@+id/red"
        android:layout_marginLeft="16dip"
        android:layout_toRightOf="@+id/red"
        android:background="@android:color/holo_blue_dark" />

    <View
        android:id="@+id/green"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_below="@+id/red"
        android:layout_marginLeft="16dip"
        android:layout_marginTop="16dip"
        android:layout_toRightOf="@+id/red"
        android:background="@android:color/holo_green_dark" />

    <View
        android:id="@+id/orange"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_above="@+id/red"
        android:layout_marginBottom="16dip"
        android:layout_marginLeft="16dip"
        android:layout_toLeftOf="@+id/red"
        android:background="@android:color/holo_orange_dark" />

</RelativeLayout>

Et voici le résultat en image

relative_layout

Frame Layout

Le FrameLayout est généralement utilisé pour afficher une seule vue (un seul item) car il est difficile d’organiser les vues avec celui-ci. Les vues sont dessiner dans un pile, dont le plus récent se retrouve au dessus. Cependant, vous pouvez quand même utilisez l’attribut layout_gravity.

L’attribut le plus utilisé dans ce genre de layout et le setVisibility qui permet d’afficher/cacher une vue. Vous pouvez donc avoir plusieurs vues superposée et affichée celle que vous souhaitais à l’aide du setVisibility. Celui a trois valeurs possibles :

  • View.GONE, permet de cacher la vue et de ne prendre aucune place
  • View.VISIBLE, permet de rendre la vue visible
  • View.INVISIBLE, permet de cacher la vue tout en gardant la place prise par celle-ci

 

Pour plus d’infos sur les layouts, je vous laisse regarder le lien suivant Layouts | Android

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *