Le RelativeLayout en Kotlin

Posted onAuthorErwan MachefauxLaisser un commentaire

Bonjour à tous ! Aujourd’hui je vais vous présenter une nouvelle notion qui va vous permettre de créer vos applications d’une manière différente en utilisant le RelativeLayout. Dans cet article j’expliquerai ce qu’est un RelativeLayout, je montrerai un petit exemple, avant de finir par vous lister les paramètres principaux qui peuvent vous êtes utiles dans un RelativeLayout.

Qu’est ce qu’un RelativeLayout ?

C’est une couche qui permet de disposer nos éléments graphiques les uns par rapport aux autres. Cela s’apparente à la création d’une relation entre un élément graphique et un autre élément graphique (relation entre un bouton et une image par exemple). Si vous avez lu mon précédent article sur “Comment créer vos premiers composants graphiques ?” vous remarquerez qu’il y a une différence entre un LinearLayout et un RelativeLayout. La différence se base sur le point de référence, un LinearLayout se base sur qu’un seul point de référence à savoir sa couche principale (en bas, en haut, à gauche, à droite). Un RelativeLayout lui au contraire se base sur une multitude de points de référence car pour lui chaque élément graphique est un point de référence. Par exemple je veux placer un bouton en dessous d’une image, avec le Relativelayout je viens créer une relation entre mon bouton et mon image. Mon bouton a donc une position relative à l’image.

exemple relativeLayout

Un design simple

design relativeLayout
Code XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" app:srcCompat="@android:drawable/arrow_up_float"
            android:id="@+id/imageButton" android:layout_alignParentEnd="true" android:layout_alignParentRight="true"
            android:layout_marginRight="186dp" android:layout_marginEnd="186dp" android:layout_marginTop="268dp"
            android:layout_alignParentTop="true"/>
    <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" app:srcCompat="@android:drawable/arrow_down_float"
            android:id="@+id/imageButton2" android:layout_marginTop="50dp" android:layout_below="@+id/imageButton"
            android:layout_alignParentBottom="true" android:layout_marginBottom="353dp"
            android:layout_alignParentEnd="true" android:layout_alignParentRight="true"
            android:layout_marginRight="185dp" android:layout_marginEnd="185dp"/>
    <ImageButton
            android:layout_width="40dp"
            android:layout_height="wrap_content" app:srcCompat="@android:drawable/arrow_down_float"
            android:id="@+id/imageButton3" android:layout_alignParentStart="true" android:layout_marginLeft="133dp"
            android:layout_marginStart="133dp" android:layout_alignParentLeft="true" android:layout_marginTop="308dp"
            android:layout_alignParentTop="true"
            android:layout_marginRight="66dp" android:layout_marginEnd="66dp"
            android:layout_toStartOf="@+id/imageButton4" android:layout_toLeftOf="@+id/imageButton4"/>
    <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" app:srcCompat="@android:drawable/arrow_up_float"
            android:id="@+id/imageButton4" android:layout_alignParentBottom="true" android:layout_marginBottom="392dp"
            android:layout_alignParentEnd="true" android:layout_alignParentRight="true"
            android:layout_marginRight="133dp" android:layout_marginEnd="133dp"/>
    <TextView
            android:text="RelativeLayout"
            android:textSize="24dp"
            android:layout_width="wrap_content"
            android:textAlignment="center"
            android:layout_height="wrap_content" android:id="@+id/textView" android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true" android:layout_marginRight="141dp" android:layout_marginEnd="141dp"/>
    

</RelativeLayout>

Les paramètres qui peuvent vous êtes utiles

Paramètres Descriptions
android:gravityIl définit comment l’élément peut-être défini par rapport au bord de l’écran (centrer, a droite, ect…).
android:layout_belowIl place votre élément graphique sous l’élément que vous avec indiquer en valeur du paramètre.
android:layout_centerHorizontale Il centre votre élément horizontalement dans votre RelativeLayout si sa valeur est à “true” .
android:layout_centerInParent  Il centre votre l’élément au centre de l’écran si sa valeur est à “true”.
android:layout_centerVertical Il centre votre l’élément verticalement dans votre RelativeLayout, si sa valeur est à “true” .
android:layout_toEndOf Il positionne l’élément vers la droite en fonction de la distance que pointe sa référence passée en paramètre. Ce paramètre est déprécié , le paramètre “layout_toRightOf” tent à le remplacer.
android:layout_toLeftOfIl positionne l’élément vers la gauche en fonction de la distance que pointe sa référence passée en paramètre.
android:layout_toRightOf Il positionne l’élément vers la droite en fonction de la distance que pointe sa référence passée en paramètre.
android:layout_toStartOfIl positionne l’élément vers la gauche en fonction de la distance que pointe sa référence passée en paramètre. Ce paramètre est déprécié, le paramètre “layout_toLeftOf” tent à le remplacer.
android:layout_alignParentRight Il positionne l’élément à droite du relativeLayout, si sa valeur est à “true”.
android:layout_alignParentLeft   Il positionne l’élément à gauche du relativeLayout, si sa valeur est à “true”.
android:layout_alignParentTop Il positionne l’élément en haut du relativeLayout, si sa valeur est à “true”.
android:layout_alignParentBottom   Il positionne l’élément en bas du relativeLayout, si sa valeur est à “true”.
android:layout_alignParentEnd   Il positionne l’élément à droite du relativeLayout, si sa valeur est à “true”. Cet élément est déprécié vis-à-vis du paramètre “android:layout_alignParentRight “.
android:layout_alignParentStart   Il positionne l’élément à gauche du relativeLayout, si sa valeur est à “true”. Cet élément est déprécié vis-à-vis du paramètre “android:layout_alignParentRight ”
android:layout_alignBaseline Il positionne la ligne de base de l’élément sur la ligne de base de sa référence donnée.
android:layout_alignBottom   Il positionne l’élément sur la même ligne que son élément passé en paramètre (le bord inférieur de l’élément correspond au bord inférieur de sa référence).
android:layout_alignStart  Il positionne l’élément à gauche de sa référence. Les éléments peuvent se chevaucher. Cet élément est déprécié vis-à-vis du paramètre “android:layout_alignLeft” .
android:layout_alignEnd  Il positionne l’élément à droite de sa référence. Les éléments peuvent se chevaucher. Cet élément est déprécié vis-à-vis du paramètre “android:layout_alignRight”
android:layout_alignTop  Il positionne l’élément sur la même ligne que son élément passé en paramètre (le bord supérieur de l’élément correspond au bord supérieur de sa référence).
android:layout_alignRight Il positionne l’élément à droite de sa référence. Les éléments peuvent se chevaucher.
android:layout_alignLeft Il positionne l’élément à gauche de sa référence. Les éléments peuvent se chevaucher.

Merci d’avoir lu ! Maintenant, si vous avez aimé le contenu de l’article, si  vous connaissez une personne à qui cet article peut intéresser, n’hésitez pas à le liker et à le partager sur les réseaux sociaux. Si vous souhaitez me faire part de vos remarques, de vos problèmes, de vos suggestions de prochain article ou tout simplement de votre soutien n’hésitez pas à m’en faire part dans les commentaires, je vous en remercie.

Partager l'article :
  •  
  •  
  •  
  •  

Laisser un commentaire

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