Débutez avec le constraintLayout dans Android Studio

Dans ce tutoriel nous allons découvrir le constraintLayout , introduit par Google lors de la conférence Google I/O 2016.Il apporte de nouvelle fonctionnalité et outils vous permettant de construire des vues beaucoup plus facilement.

Table des matières

Le ConstraintLayout

Le ConstraintLayout permet de créer des vues complexes avec une hiérarchie de vue plate (sans créer de groupe de vue imbriqué), cela permet d’améliorer considérablement les performances les fichiers de vues que vous créez. Il vous permet aussi de positionner et de dimensionner des widgets d’une manière flexible

Il est similaire au RelativeLayout en ce sens ou les widgets sont positionner par rapport aux widgets frère ou par rapport au container parent.

Sachez aussi que le contraintLayout fonctionne correctement avec l’éditeur graphique d’ Android Studio.Vous pouvez donc construire entièrement une vue de votre application à partir de l’éditeur graphique d’Android Studio au lieu d’éditer directement le fichier xml de la vue.

Il faut aussi noter que pour la construction de certaines vues , vous serez obligés de faire des aller retour entre l’éditeur graphique et l’édition manuel du fichier xml.

Quelque avantages d’utiliser le constraintLayout

Améliorations des performances des fichiers layout de votre application grâce à l’absence d’utilisation de groupe de vue imbriqué
Possibilité de construire les vue entièrement à partir de l’éditeur graphique d’Android Studio.
Possibilité d’animer facilement les vue positionnées avec le constraintLayout
Dimensionner les vues d’une manière flexible avec l’éditeur graphique d’Android Studio.
Contrôler le comportement d’un groupe de vue positionner avec le constraintLayout.
Disponible dans la bibliothèque de rétrocompatibilité(support librairy), donc vous pourrez toujours utiliser les fonctionnalités récentes du constraintLayout dans les anciennes version d’Android.

Ajouter Le contraintLayout dans votre projet

Le contraintLayout n’est pas disponible dans le cœur d’APIs d’Android.Il est disponible comme librairie de rétrocompatibilité(support librairy) que vous pouvez utiliser sur les système Android à partir de l’Api niveau 9 (Gingerbread).

Ce qui signifie que vous pourrez utiliser les futures fonctionnalité du ConstraintLayout dans les anciennes version d’Android.

Pour utiliser le constraintLayout Dans votre projet, procédez comme suit

Etape 1: Assurez vous de déclarer le dépôt maven de google dans le fichier gradle.build au niveau projet de votre application comme suit

repositories {
    google()
}

Etape 2:Ajouter ensuite la librairie comme dépendance dans le fichier gradle.build au niveau module (Module:app) dans la section dependencies comme suit.

dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
}

Notez que la dernière version du constraintLayout pourrait être différent de celle afficher ici.

Vous pouvez maintenant construire vos vues avec le constraintLayout.

Convertir un conteneur existante en constraintLayout

Pour convertir un conteneur existant en ContraintLayout, procédez comme suit

Etape 1: Dans Android Studio,ouvrez le fichiez layout dont vous souhaitez convertir le conteneur puis cliquez sur l’onglet Design en bas de la fenêtre de l’éditeur graphique.Voir l’image

Etape 2:A gauche de l’éditeur graphique, dans la fenêtre Component Tree,faite un clic droit sur le conteneur que vous souhaitez convertir en constraintLayout puis dans le menu contextuel qui s’affiche cliquez sur Convert LinearLayout to ConstraintLayout.

convertir-un-conteneur-en-constrainlayout-dans-android-studio

Ensuite dans la boite de dialogue qui s’affichera pour vous indiquez comment sera effectuer la conversions, cliquez sur Ok pour que Android studio convertir la vue.

En ouvrant l’éditeur graphique dans l’onglet text, vous devez constater que android studio ne converti pas seulement le conteneur mais applique aussi plusieurs contraintes aux widgets dans le constraintLayout pour les positionner correctement.l

Créer un nouveau layout avec le constraintLayout

Pour créer un nouveau fichier layout avec le contraintLayout, procédez comme suit.

Etape 1:Dans la Fenêtre Project dans Android studio,cliquez sur le dossier du module(app)

puis dans le menu principale d’Android studio sélectionnez File puis New puis XML puis layout xml file .Voir l’image suivante

Dans la fenêtre qui s’affiche saisissez le nom du fichier layout, entrez » androidx.constraintlayout.widget.ConstraintLayout « pour le champ Root Tag puis cliquez sur le bouton Finish.Voir l’image

Introduction au positionnement avec le constraintLayout

Pour définir la position d’un widget avec le constraintlayout, vous devez au moins ajouter une contrainte horizontal et une contrainte vertical au widget.

Chaque contrainte représente une connexion, un alignement avec un autre widget,un conteneur parent, une ligne directrice invisible.

Et chaque contrainte définit la position de la vue sur l’axe vertical et horizontal.Donc chaque vue doit donc avoir au moins une contrainte sur chaque axe mais souvent plus de contraintes sont nécessaire.

Lorsque vous ajoutez un widget dans l’éditeur graphique d’Android Studio, il reste où vous l’avez déposé même s’il n’a aucune contraintes.Voir l’image(Ajout d’un bouton sans contrainte définie)

Voici la vue correspondante

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        tools:layout_editor_absoluteX="160dp"
        tools:layout_editor_absoluteY="168dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Si un widget reste à la position où vous l’avez déposé sans que vous n’ayez définissez de contrainte,c’est uniquement pour facilité l’édition dans l’éditeur graphique. Android studio utilise les attributs layout_editor_absoluteX et layout_editor_absoluteY pour positionner le widget où vous l’avez déposer lorsque vous n’avez pas encore ajouté de contrainte au widget.

Note:Si un widget n’a pas de contrainte lorsque vous exécutez votre application sur un appareil,le widget sera dessiner à la position [0,0] dans le coin haut gauche comme suit. Voir l’image suivant.

positionnement-du-bouton-dans-lapplication

Ajouter un widget dans l’éditeur graphique

Comme nous l’avons déjà dit, avec le constraintLayoutr, vous pouvez entièrement construire une vue dans l’éditeur graphique d’Android Studio.

Pour ajouter une widget, sélectionnez et glissez un widget de la fenêtre Palette dans l’éditeur graphique d’Android Studio. Voir l’image

ajouter un widget dans le constraintlayout

Dès que le widget est affiché dans l’éditeur graphique d’Android Studio,une notification s’affiche à droite du widget pour vous indiquez que vous n »avez pas encore ajouté de contrainte de positionnement au widget.Voir l’image

notification d'absense de contrainte du constraintlayout

Les Point d’Ancrage, les contraintes et les prises de dimensionnement

Lorsque vous ajoutez un widget dans un constraintLayout, il affiche un cadre pour indiquer qu’il est sélectionné avec une prise de redimensionnement carré à chaque coin et des points d’ancrage circulaire de chaque coté du widget.Voir l’image suivante

Pour sélectionner un widget, il suffit de cliquer sur lui.

Les Points d’Ancrage:Ce sont les cercles situés au centre de chaque coté du widget qui servent à créer une contrainte.Chaque contrainte a un sens défini par le point d’ancrage source qui constitue le point de départ de la contrainte et le point d’ancrage cible qui constitue le point d’arrivé de la contrainte

Les widget textuel ont un deuxième point d’ancrage qui est la ligne de base qui sert à créer un contrainte à partir d’une ligne de base.Voir l’image qui vous montre une ligne de base

points-dancrage-avec-ligne-de-base dans le constraintlayout

Pour afficher la ligne de base d’un widget textuel dans la version d’Android studio(3.4.2) que j’utilise actuellement, vous devez :

Sélectionner le widget
Puis faire un clic droit pour afficher un menu contextuel,puis cliquer sur show baseline

Une contrainte: Une contrainte défini la relation entre deux widget dans une vue ou défini comment les widget seront positionner dans une vue.

Les prises de redimensionnement Ce sont les carrés situés à chaque coin d’un widget dans le constraintLayout. que vous pouvez utiliser pour redimensionner un widget

redimensionner un widget dans le constraintlayout

Ajouter une contrainte

Ajouter une contrainte a un widget en glissant un point d’ancrage

Pour ajouter une contrainte,sélectionnez un widget puis,cliquez sur un de ces point d’ancrage puis faite le glisser vers un autre point d’ancrage cible.ce point d’ancrage cible peut être le bord d’un autre widget,ou le bord de la vue ou une ligne directrice.

Voir l’image

creer-une-contrainte-avec-le-constraintlayout

Notez que lorsque vous glissez le point d’ancrage,l’éditeur graphique affiche les potentiels connexions de point d’ancrage superposé avec un cercle avec une couleur bleu qui clignote.

Voir l’image suivante

Ajouter un contrainte depuis la section layout de la fenêtre des attribut d’un widget

Lorsque vous survolez sur l’un des boutons bleus,Android studio affiche une info bulles create a connexion to the + le nom du coté ou se trouve le bouton.

Pour le coté droit:c’est l’info bulles create connexion to the right qui s’affiche

Pour créer une contrainte, cliquez sur l’un des boutons bleu. Vous devez constatez que le constraintlayout applique une contrainte au widget en le maintenant à sa position initial.Le constraintlayout utilise les marges pour maintenir le widget à sa position en appliquant une marge correspond à sa position.Voir l’image suivante

Vous devez constatez que le constraintLayout applique une marge de 185 dp pour continuer à positionner le widget à sa position initial.

Notez que lorsque vous appliquez une contrainte à un des bord d’un widget, le bouton bleu permettant d’ajouter une contrainte ne s’affiche plus.

Supprimer une contrainte

Supprimer une contrainte depuis les points d’ancrage

Cliquez simplement sur un point d’ancrage du widget possédant une contrainte pour supprimer la contrainte.

Notez que lorsque vous survolez sur un point d’ancrage possédant une contrainte, la contrainte s’affiche en rouge pour vous indiquez que vous pouvez supprimer la contrainte en cliquant sur le point d’ancrage.Voir l’image

supprimer une contrainte sur les point d'ancrage dans le constraintlayout

Supprimer une contrainte depuis la section layout de la fenêtre des attributs d’un widget

Pour supprimer une contrainte il suffit de cliquer sur le point d’ancrage dans la section layout de la fenêtre des attributs d’un widget.

Vous devez constater que lorsque vous survoler sur un point d’ancrage,un cercle bleu avec une croit se superpose sur le point d’ancrage pour vous indiquez que vous devez cliquez pour supprimer la contrainte.Voir l’image ci-dessus

Ajouté une contrainte opposée

Si vous ajoutez des contraintes opposées à une vue ,les lignes de contraintes deviennent ondulées comme un ressort pour indiquer les forces opposées.Voir l’image suivante

cet effet est plus visible lorsque la taille de la vue est définie à une valeur fixe ou à « wrap_content » auquel cas la vue est centré entre les contraintes.

Notez que lorsque vous ajoutez une contrainte opposée, vous pouvez ajuster le bias de la contrainte .Si vous ajoutez une contrainte opposée horizontal, vous pouvez ajuster le bias horizontal et si ajoutez une contrainte opposée vertical, vous pouvez ajuster le bias vertical.

Notez que la valeur par défaut du bias est à 50% et que la valeur du bias est compris en 0% et 100%.

ajuster le bias dans le constraintlayout

Les outils du constraintlayout

L’editeur graphique d’android studio met à disposition plusieurs outils pour facilement travailler avec le constrainLayout;Voir l’image

L’outile 1: Cet outils vous permet d’ajouter une contrainte automatiquement lorsque le widget est ajouté dans l’editeur graphique.Il est déactivé lorsqu’il est barré avec une barre oblique comme dans l’image précédente.

L’outil 2:Cet outils permet de définir la marge par défaut qui sera appliqué lorsque vous ajoutez un widget dans l’éditeur graphique.Pour voir son fonctionnement, cliquez sur lui puis changez la valeur de la marge par défaut puis ajoutez un nouveau widget.

L’outil 3:Cet outil permet de supprimer toutes les contraintes sur tous les widgets ajoutés dans l’éditeur graphique.

L’outil 4:cet outils permet ajouter des contraintes à tous les widgets dans le constraintlayout. Vous devez constater aussi que les contraintes ajouté permet de maintenir chaque widget à sa position initial.

L’outil 5:Cet outil permet d’augment la largeur et la longueur d’un widget dans le constraintLayout

L’outil 6:Cet outils permet d’ajouter une contrainte horizontal ou une contrainte vertical sur le widget avec un autre widget ou la vue, ou une contrainte horizontal et vertical par rapport au conteneur parent.

L’outil 7: Cet outil permet d’ajouter une ligne directrice (Guideline) vertical ou horizontal,ou une barrière( barrier) vertical ou horizontal, ou un de créer un groupe(group).

A présent nous allons aborder le positionnement et l’alignement des widgets.Et vous devez garder en tête qu’une contrainte à un sens qui est déterminé par le point d’ancrage source et et le point d’ancrage cible.

Positionnement relative

Le positionnement relatif est l’un des éléments de base de la création de disposition dans le constraintLayout. Les contraintes du positionnement relatif vous permet de positionner un widget par rapport à un autre widget ou par rapport au conteneur parent horizontalement ou verticalement.

Sur l’axe horizontal,vous pouvez définir le positionnement d’un widget sur les cotés gauche, droit, debut et fin.

Sur l’axe vertical vous pouvez définir le positionnement sur les coté haut,base et sur la ligne de base des widgets textuel.

Position relative par rapport au parent

Ce positionnement consiste à contraindre le bord d’un widget au bord du conteneur parent.

Nous allons ajouter un bouton et le positionner relativement au conteneur parent.

position relative avec le parent avec le constraintlayout

Position relative par rapport à un autre widget

Ce positionnement consiste à positionner un widget par rapport à un autre widget.

Nous allons ajouter deux boutons, bouton 1 et bouton 2 où le bouton 2 sera position au dessus du bouton 1. Voir l’image

Position relative et ordre de position

Avec le positionnement relatif, vous pouvez ordonnez l’apparence de deux widgets verticalement ou horizontalement.

Nous allons créer trois boutons ,bouton 1, bouton 2, bouton 3 où le bouton 2 sera toujours en dessous du bouton 1 et le bouton 3 toujours contraint à droite du bouton 1.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        tools:layout_editor_absoluteX="52dp"
        tools:layout_editor_absoluteY="135dp" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"
        tools:layout_editor_absoluteX="150dp"
        tools:layout_editor_absoluteY="79dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Position relative et alignement

Vous pouvez aligner la droite de deux widgets ,aligner la gauche de deux widgets, le bas de deux widgets ou la haut de deux widgets.

Nous allons aligner la gauche de deux boutons , bouton 1 bouton 2

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        tools:layout_editor_absoluteX="161dp"
        tools:layout_editor_absoluteY="74dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:text="Button 2"
        app:layout_constraintStart_toStartOf="@+id/button"
        tools:layout_editor_absoluteY="168dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Vous pouvez décaler l’alignement de deux ou plusieurs widgets avec une marge.Voir l’exemple suivant

decaler l'alignement de deux boutons avec le constraintlayout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        tools:layout_editor_absoluteX="161dp"
        tools:layout_editor_absoluteY="74dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginLeft="24dp"
        android:text="Button 2"
        app:layout_constraintStart_toStartOf="@+id/button"
        tools:layout_editor_absoluteY="168dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Alignement de base de widget textuel.

L’alignement de base concerne uniquement les widgets textuel.

Vous pouvez aligner le ligne de base d’un widget textuel à la ligne de base d’un autre widget textuel.

Nous allons ajouter deux boutons bouton A et boutons B qui sont des widgets textuel et aligner leurs ligne de base.

Pour afficher la ligne de base d’un widget,cliquez sur le widget textuel que vous souhaitez contrainte puis faite un clique droit de la souris pour afficher le menu contextuel puis cliquez sur show baseline.

Sélectionnez sur la ligne de base du premier widget puis glisser le vers une autre ligne de base. Voir l’image

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button A"
        app:layout_constraintBaseline_toBaselineOf="@+id/button2"
        tools:layout_editor_absoluteX="58dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button B"
        tools:layout_editor_absoluteX="255dp"
        tools:layout_editor_absoluteY="168dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Vous devez constater que à chaque fois nous devons définir au moins une contrainte horizontal et vertical pour bien positionner un widget dans la vue.

Positionnement relatif des widget et les marges

Lorsque nous positionnons deux boutons, bouton A et bouton B où le bouton B est positionné à droit du boutons A. si les marges sont définies, elle serviront d’espace entre les widget.Vous pouvez changer la valeur des marges dans section layout des attributs des widgets.

Voir l’image

ajuster la marge avec le constraintlayout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button A"
        tools:layout_editor_absoluteX="70dp"
        tools:layout_editor_absoluteY="167dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:text="Button B"
        app:layout_constraintStart_toEndOf="@+id/button"
        tools:layout_editor_absoluteY="167dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Les marges lorsque qu’un widget est connecté à un autre widget invisible

Lorsqu’un widget est positionné relativement à un autre widget,Vous pouvez utiliser une marge pour définir un espace entre les deux widgets.

Mais vous pouvez encore définir une autre marge lorsqu’un widget devient invisible appelée marge invisible du widget en utilisant les attributs suivant.

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

Voirci le code de qui affiche les deux boutons

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button A"
        tools:layout_editor_absoluteX="70dp"
        tools:layout_editor_absoluteY="167dp"
        tools:visibility="visible" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:text="Button B"
      

        app:layout_constraintStart_toEndOf="@+id/button"
        tools:layout_editor_absoluteY="167dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Voir le code qui affiche le bouton B quand le boutons A est invisible et le bouton B défini une marge invisible de 100 dp quand le bouton A est invisible

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button A"
        tools:layout_editor_absoluteX="70dp"
        tools:layout_editor_absoluteY="167dp"
        tools:visibility="gone" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:text="Button B"
        app:layout_goneMarginLeft="100dp"

        app:layout_constraintStart_toEndOf="@+id/button"
        tools:layout_editor_absoluteY="167dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Le positionnement circulaire.

Vous pouvez contraindre un centre de widget au centre d’un autre widget selon un angle et une distance donnée.

layout_constraintCircle: Référence l’id d »un autre widget.
layout_constraintCircleRadius :la distance à l’autre centre de widget
layout_constraintCircleAngle : A quel angle le widget doit etre( en dégré de 0 à 360°)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="70dp"
        android:layout_marginLeft="70dp"
        android:layout_marginTop="116dp"
        android:text="Button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintCircle="@+id/button"
        app:layout_constraintCircleAngle="50"
        app:layout_constraintCircleRadius="100dp"
       />
</androidx.constraintlayout.widget.ConstraintLayout>

Les contraintes de dimension

Les dimensions minimales sur le constraintLayout

Vous pouvez définir une taille minimum et maximum pour le constraintLayout lui même.Ces tailles sont utilisées lorsque la largeur ou la hauteur de la vue sont définit à « wrap_content »

android:minWidth : définit la largeur mininum de la vue.
android:minHeight : définit la hauteur minimal de la vue
android:maxWidth : définitla largeur maximun de la vue
android:maxHeight :définit la hauteur maximal de la vue

Ajuster la taille de la vue

Les dimensions d’un widget peuvent être spécifié en définissant les attributs android:layout_width et android:layout_height de trois manière différente.Vous pouvez définir ces dimensions directement dans le fichier xml ou sur l’éditeur graphique.

Sur l’éditeur graphique vous pouvez changer la largeur et la hauteur d’un widget en cliquant sur le symboles présenté dans l’image suivante.Vous devez aussi constatez qu’il existe trois symbole.A chaque fois que vous cliquez sur un symbole ,un autre symbole s’affiche.

Ces symboles représentent le mode de taille utilisé pour définir la taille d’un widget.

:Fixée( Fixed ) Vous spécifiez une dimension spécifique dans la zone de texte ci-dessous.Vous pouvez redimensionner la vue à une autre taille en changeant les valeur définit par défaut.

:égal au contenu( Wrap Content );La vue s’etend autant que nécéssaire pour s’adapter à son contenue.

Lorsque la largeur ou la hauteur de la vue est definie à Wrap Content , il arrive que nous voulons que ce soit les contrainte de la vue qui défini la hauteur ou la largeur du widget au lieu que ce soit le contenu widget.Pour cela vous pouvez utiliser les attributs

app:layout_constrainedWidth=”true|false” pour dire si oui ou non ce sont les contraintes en largeur du widget qui vont définir la largeur du widget.
app:layout_constrainedHeight=”true|false” pour dire si oui ou non ce sont les contraintes en hauteur qui vont définir la hauteur du widget

Il faut noter que lorsque les contraintes définissent la largeur ou la hauteur du widget, ces dernier peuvent être plus petit que le contenu et donc restreinte le contenu.

: s’tend à la lime des contraintes( Match Constraints ).Le widget s’étend autant que possible pour atteindre les contraintes de chaque coté(après prise en charge des marges du widget).

Cependant vous pouvez modifier ce comportement avec les attributs et les valeurs suivants.Notez que ces valeurs ne prennent effet que lorsque la largeur du widget est définie à Match Constraints .

layout_constraintWidth_default: Ce attribut peut prendre les deux valeurs suivantes.
- spread: Étend le widget autant que possible pour atteindre les contraintes de chaque coté.Ceci est le comportement par défaut.
- wrap: Ajuste la vue autant que possible pour l’adapter à son contenu mais impose au widget d’être plus petit que le contenu si les contraintes l’exige.

layout_constraintWidth_min:Permet de définir une dimension en dp pour la largeur minimal du widget.
layout_constraintWidth_max: Permet de définir une dimension en dp pour la largeur maximal du widget.

Définir la taille en tant que ratio

Vous pouvez aussi définir une dimension en tant que ratio d’une autre.Pour ce faire, vous devez avoir au moins une dimension du widget contrainte défini à 0 dp ( MATCH_CONSTRAINT ) et définir l’attribut layout_constraintDimensionRatio à un ratio donné.Vous pouvez par exemple définir cette valeur à 16:9 ,1:1.

Nous allons ajouter un bouton nommée bouton 1,auquel nous allons définir la largeur à MATCH_CONSTRAINT(0dp) comme suit.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="66dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Vous devez voir afficher le symbole triangulaire suivant pour définir le ratio.

Pour activer ou déactiver la contrainte de ratio cliquez sur le symbole.

Dès que la contrainte de ratio est activé ,vous devez voir afficher un champ qui vous permet de définir un ratio.Définissez la contrainte du ratio à 16:9 par exemple.Voir l’image

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:text="Button"
        app:layout_constraintDimensionRatio="w,16:9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="66dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Vous pouvez aussi faire le contraire de ce que nous venons de faire:c’est dire définir la hauteur à MATCH_CONSTRAINT et définir la une contrainte de ratio pour la hauteur.

Mais lorsque les deux dimensions sont définies à MATCH_CONSTRAINT , vous pouvez cliquez sur le symboles de contraint de ratio qui s’affiche pour indiquer quel dimension est basé sur le ratio de l’autre.

L’inspecteur du widget indique quel dimension est basé sur le ratio de l’autre avec une ligne pleine horizontal (La largeur est le ratio de la hauteur) ou vertical(la hauteur est le ratio de la largeur) qui passe au centre du carré. Voir l’image

Contraindre à une ligne directrice(GuideLine)

Vous pouvez ajouter une ligne directrice horizontal ou vertical à la quel vous pouvez contraintes les vues.C’est à dire lorsque vous glissez la ligne directrice horizontalement ou verticalement.les widget se déplace aussi pour suivre le mouvement de cette ligne.

Notez que la ligne directrice sera invisible pour les utilisateurs de l’application.

Pour créer une ligne directrice cliquez sur le symbole (guidelines) dans le barre d’outil(toolbar) et cliquez ensuite sur Add Vertical Guideline ou sur Add Horizontal Guideline .Voir l’image

Vous pouvez positionner la ligne directrice dans l’éditeur graphique en dp ou en pourcentage par rapport au bord de la vue.

Glissez la ligne pointillé pour la repositionner et cliquez sur le cercle au bord haut de la ligne directrice pour basculer le mode de mesure(en dp ou en pourcentage) voir l’image

changement du mode de mesure avec le constraintlayout

Contraindre à une barrière (barrier)

Semblable à une ligne directrice,une barrière est une ligne invisible à laquelle vous pouvez contraindre des widgets.Sauf que la barrière ne produit pas sa propre position;à la place la position de la barrière se déplace en fonction de la position des widgets qu’elle contient.

Ceci est utile lorsque vous souhaitez contraindre un ou plusieurs widgets à un ensemble de widgets plutôt qu’à une widget spécifique.

Ajoutez un bouton dans l’éditeur graphique.

Pour créer une barrière suivez les étape suivante

Cliquez sur le symbole de ligne directrice (Guidelines) dans la barre d’outil puis cliquez sur Add Vertical Barrier ou sur Add Horizontal Barrier .
Dans la fenêtre nommée Component Tree, sélectionnez les widgets que vous souhaitez avoir dans la barrière et glissez les dans le le composant barrière.
Sélectionnez la barrière dans la fenêtre Component Tree,puis définissez la direction de la barrière Voir l’image

Vous pouvez maintenant créer une contrainte d’un autre widget à la barrière, pour cela ajouté un nouveau bouton à l’extérieur de la barrière. Voir l’image.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="button"
        tools:layout_editor_absoluteY="731dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:text="Button"
        app:layout_constraintStart_toEndOf="@+id/barrier"
        tools:layout_editor_absoluteY="110dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Créer une chaine avec le constraintLayout

Une chaîne est un groupe de widget qui sont liées les uns aux autres avec une contrainte de position bidirectionnelles.Les widgets au sein d’une chaîne peuvent être réparties verticalement ou horizontalement. Voir l’image

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="153dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button"
        tools:layout_editor_absoluteY="153dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Tete de la chaine(Chain heads):c’est le premier widget à gauche dans une chaîne horizontale et le premier widget en haut dans une chaîne verticale.Les chaînes sont contrôlées par des attributs définis sur le premier élément de la chaîne

Les chaines peuvent être stylées de l’une des manière suivante:

Réparti(Spread):Les widgets sont réparties uniformément horizontalement ou verticalement après prise en compte des marges.C’est la valeur par défaut utilisé pour les style de chaîne.

Réparti uniquement à l’interrieur(Spread inside):le premier et le dernier widget sont fixés aux contraintes des extrémité de la chaines et les autres widgets sont répartis uniformément entre le premier et le dernier widget de la chaîne.

Weighted: Lorsqu’une chaîne est défini sur Spread ou sur Spread inside , vous pouvez remplir l’espace restant dans la chaîne en définissant une ou plusieurs vue à match constraints(0dp).

Par défaut l’espace est répartie équitablement entre chaque widget qui est défini à match constraints. Mais vous pouvez attribuer un poids d’importance à chaque widget à l’aide des attributs layout_constraintHorizontal_weight et layout_constraintVertical_weight. Ces attribut fonctionne de la même manière que l’attribut layout_weight du LinearLayout.

Ainsi, le widget avec la valeur de poids la plus élevée obtient le plus d’espace; les widgets qui ont le même poids obtiennent la même quantité d’espace.

Packed: Les widgets sont regroupés après prise en compte des marges.Vous pouvez ensuite ajuster le biais de la chaîne entière (gauche / droite ou haut / bas) en modifiant le biais du widget de tête de la chaîne.

Créer une chaine: Pour créer une chaîne, sélectionnez tous les widgets à inclure dans la chaîne, puis faites un clique droit sur l’un des widgets, sélectionnez Chaînes, puis sélectionnez Centrer horizontalement ou Centrer verticalement.

Cependant, vous pouvez basculer entre Spread , Spread inside en sélectionnant n’importe quelle vue de la chaîne, puis en faisant un clic droit du bouton de la souris puis en sélectionnant sur Cyle chain mode dans le menu contextuel.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="153dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button"
        tools:layout_editor_absoluteY="153dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Créer dun groupe avec le constraintLayout

Vous pouvez créer un groupe de widget avec le constraintLayout. Les groupes servent à appliquer un actions à tous les éléments du groupe.

Vous pouvez créer un groupe de widget de la manière suivante.

Ajouter deux boutons dans l’éditeur graphique
Cliquez sur le symbole de ligne directrice (Guidelines) dans la barre d’outil puis cliquez Add Group
Sélectionnez les widgets que vous souhaitez ajoutez dans un groupe dans la fenêtre Component Tree puis glissez les dans le groupe que vous venez de créer. Voir l’image suivante

Vous pouvez par exemple changer la visibilité des éléments du groupe dans l’éditeur graphique comme suit.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        tools:layout_editor_absoluteX="57dp"
        tools:layout_editor_absoluteY="107dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        tools:layout_editor_absoluteX="188dp"
        tools:layout_editor_absoluteY="96dp" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="button,button2"
        tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>

Conclusion.

Nous somme à la fin de ce tutoriel sur le constraintLayout..j’espère que ce tutoriel vous aidera à démarrer avec le constraintLayout. A bientôt pour un nouveau tutoriel.

Vous pouvez lire aussi mon tutoriel sur Kotlin Ici

Autres ressources

https://developer.android.com/training/constraint-layout

https://developer.android.com/reference/android/support/constraint/ConstraintLayout#Chains

https://constraintlayout.com/basics/create_chains.html

Noé Joel VIGAN

Noe Joel Vigan, auteur de ce blog, est passionné par la programmation Android. Il a créé ce blog pour partager ses connaissances sur le développement d’application android. Il est Développeur Android Fullstack, ce qui lui permet de complètement mettre en place le Backend de ses applications sur Google Cloud à défaut d’utiliser FireBase.

ConstraintLayout