Créer une interface utilisateur responsive avec ConstraintLayout Fait partie d'Android Jetpack.

Bien qu'une contrainte manquante ne provoque pas d'erreur de compilation, l'éditeur de mise en page indique des contraintes manquantes comme une erreur dans la barre d'outils. Pour afficher les erreurs et d'autres avertissements, cliquez sur Afficher les avertissements et les erreurs . Pour vous aider à éviter de manquer des contraintes, l'éditeur de mise en page ajoute automatiquement des contraintes grâce aux fonctionnalités Se connecter automatiquement et déduire des contraintes.

Ajouter ConstraintLayout à votre projet

Pour utiliser ConstraintLayout dans votre projet, procédez comme suit:

1. Assurez-vous que le dépôt maven.google.com est déclaré dans le fichier settings.gradle:

   Groovy

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       )
       

   Kotlin

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       }
       

2. Ajoutez la bibliothèque en tant que dépendance dans le fichier build.gradle au niveau du module, comme illustré dans l'exemple suivant. La dernière version peut être différente de celle présentée dans l'exemple.

   Groovy

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha13"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13"
   }
   

   Kotlin

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha13")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13")
   }
   

3. Dans la barre d'outils ou la notification de synchronisation, cliquez sur Sync Project with Gradle Files (Synchroniser le projet avec les fichiers Gradle).

Vous êtes maintenant prêt à créer votre mise en page avec ConstraintLayout.

Convertir une mise en page

Pour convertir une mise en page existante en mise en page avec contrainte, procédez comme suit:

1. Ouvrez votre mise en page dans Android Studio, puis cliquez sur l'onglet Design (Conception) en bas de la fenêtre de l'éditeur.
2. Dans la fenêtre Component Tree (Arborescence des composants), effectuez un clic droit sur la mise en page, puis cliquez sur Convert LinearLayout to ConstraintLayout (Convertir LinearLayout en ConstraintLayout).

Créer une nouvelle mise en page

Pour démarrer un nouveau fichier de mise en page de contrainte, procédez comme suit:

1. Dans la fenêtre Project (Projet), cliquez sur le dossier du module et sélectionnez File > New > XML > Layout XML (Fichier > Nouveau > XML > Mise en page XML).
2. Saisissez un nom pour le fichier de mise en page, puis "androidx.constraintlayout.widget.ConstraintLayout" pour la balise racine.
3. Cliquez sur Finish (Terminer).

Ajouter ou supprimer une contrainte

Pour ajouter une contrainte, procédez comme suit:

1. Faites glisser une vue de la fenêtre Palette vers l'éditeur.

   Lorsque vous ajoutez une vue dans un élément ConstraintLayout, elle s'affiche dans un cadre de délimitation avec des poignées de redimensionnement carrées à chaque angle et des poignées de contrainte circulaires de chaque côté.

2. Cliquez sur la vue pour la sélectionner.
3. Effectuez l'une des opérations suivantes :
   • Cliquez sur une poignée de contrainte et faites-la glisser vers un point d'ancrage disponible. Ce point peut être le bord d'une autre vue, le bord de la mise en page ou une ligne de repère. Notez que lorsque vous faites glisser la poignée de contrainte, l'éditeur de mise en page affiche des ancres de connexion potentielles et des superpositions bleues.

   • Cliquez sur l'un des boutons Create a connection (Créer une connexion) dans la section Layout (Mise en page) de la fenêtre Attributes, comme illustré dans la figure 4.

     

     Figure 4. La section Mise en page de la fenêtre Attributs vous permet de créer des connexions.

Lorsque la contrainte est créée, l'éditeur lui attribue une marge par défaut pour séparer les deux vues.

Lorsque vous créez des contraintes, tenez compte des règles suivantes:

• Chaque vue doit avoir au moins deux contraintes: une horizontale et une verticale.
• Vous ne pouvez créer des contraintes qu'entre une poignée de contrainte et un point d'ancrage qui partagent le même plan. Un plan vertical (les côtés gauche et droit) d'une vue ne peut être contraint qu'à un autre plan vertical, et les références ne peuvent être contraints qu'à d'autres lignes de base.
• Chaque handle de contrainte peut être utilisé pour une seule contrainte, mais vous pouvez créer plusieurs contraintes à partir de différentes vues sur le même point d'ancrage.

Vous pouvez supprimer une contrainte de l'une des manières suivantes:

• Cliquez sur une contrainte pour la sélectionner, puis sur Supprimer.

• Cliquez sur une ancre de contrainte en maintenant la touche Ctrl enfoncée (Commande tout en cliquant sous macOS). La contrainte devient rouge pour indiquer que vous pouvez cliquer dessus pour la supprimer, comme illustré dans la figure 5.

  

  Figure 5 : Une contrainte rouge indique que vous pouvez cliquer dessus pour la supprimer.

• Dans la section Layout (Mise en page) de la fenêtre Attributes (Attributs), cliquez sur une ancre de contrainte, comme illustré dans la figure 6.

  

  Figure 6. Cliquez sur une ancre de contrainte pour la supprimer.

Si vous ajoutez des contraintes opposées à une vue, les lignes de contrainte s'enroulent comme un ressort pour indiquer les forces opposées, comme illustré dans la vidéo 2. L'effet est particulièrement visible lorsque la taille de la vue est définie sur "fixe" ou "encapsuler le contenu", auquel cas la vue est centrée entre les contraintes. Si vous souhaitez plutôt que la vue s'étire pour respecter les contraintes, modifiez la taille pour qu'elle corresponde aux contraintes. Si vous souhaitez conserver la taille actuelle, mais déplacer la vue pour qu'elle ne soit pas centrée, ajustez le biais de contrainte.

Vous pouvez utiliser des contraintes pour obtenir différents types de comportement de mise en page, comme décrit dans les sections suivantes.

Position du parent

Position de la commande

Emplacement D

Alignement de la ligne de base

Appliquez une contrainte à une consigne

Contrainte à une barrière

Ajuster le biais de contrainte

Lorsque vous ajoutez une contrainte des deux côtés d'une vue et que la taille de la vue pour la même dimension est "fixe" ou "encapsuler le contenu", la vue est centrée entre les deux contraintes avec un biais de 50% par défaut. Vous pouvez ajuster le biais en faisant glisser le curseur dans la fenêtre Attributes (Attributs) ou en faisant glisser la vue, comme illustré dans la vidéo 3.

Si vous souhaitez plutôt que la vue s'étire pour respecter les contraintes, modifiez la taille pour qu'elle corresponde aux contraintes.

Ajuster la taille de la vue

Vous pouvez utiliser les poignées d'angle pour redimensionner une vue, mais cela code en dur la taille : la vue ne se redimensionne pas pour différents contenus ou tailles d'écran. Pour sélectionner un autre mode de dimensionnement, cliquez sur une vue et ouvrez la fenêtre Attributes (Attributs) à droite de l'éditeur.

Vers le haut de la fenêtre Attributes (Attributs) se trouve l'inspecteur de vue, qui inclut des commandes pour plusieurs attributs de mise en page, comme illustré dans la figure 14. Cette option n'est disponible que pour les vues avec une mise en page de contrainte.

Vous pouvez modifier la façon dont la hauteur et la largeur sont calculées en cliquant sur les symboles indiqués par l'icône 3 de la figure 14. Ces symboles représentent le mode Taille, comme suit. Cliquez sur le symbole pour passer d'un paramètre à l'autre:

• Fixe: spécifiez une dimension spécifique dans la zone de texte suivante ou redimensionnez la vue dans l'éditeur.
• Encapsuler le contenu: la vue ne se développe que si nécessaire pour s'adapter à son contenu.
• layout_restrictedWidth

Définissez cette valeur sur true pour permettre à la dimension horizontale de changer afin de respecter les contraintes. Par défaut, un widget défini sur WRAP_CONTENT n'est pas limité par des contraintes.

• Faire correspondre les contraintes: la vue se développe autant que possible pour respecter les contraintes de chaque côté, en tenant compte de ses marges. Toutefois, vous pouvez modifier ce comportement avec les attributs et valeurs suivants. Ces attributs ne prennent effet que lorsque vous définissez la largeur d'affichage sur "correspondre aux contraintes" :
  • layout_constraintWidth_min

    La largeur minimale de la vue est de dp.

  • layout_constraintWidth_max

    La largeur maximale de la vue est définie sur dp.

  Toutefois, si la dimension donnée ne comporte qu'une seule contrainte, la vue s'agrandit pour s'adapter à son contenu. L'utilisation de ce mode sur la hauteur ou la largeur vous permet également de définir un ratio de taille.

Définir la taille en tant que ratio

Vous pouvez définir la taille de la vue sur un format, par exemple 16:9, si au moins l'une des dimensions de la vue est définie sur "correspondre aux contraintes" (0dp). Pour activer le ratio, cliquez sur Activer/Désactiver la contrainte de format (accroche 1 sur la figure 14), puis saisissez le ratio width:height dans l'entrée qui s'affiche.

Si la largeur et la hauteur sont toutes deux définies sur "correspondre aux contraintes", vous pouvez cliquer sur Activer/Désactiver la contrainte de format pour sélectionner la dimension basée sur la proportion de l'autre. L'inspecteur de vue indique quelle dimension est définie en tant que ratio en connectant les arêtes correspondantes par une ligne continue.

Par exemple, si vous définissez les deux côtés sur "correspondre aux contraintes", cliquez deux fois sur Activer/Désactiver la contrainte de format pour définir la largeur sur un rapport de la hauteur. La taille totale est déterminée par la hauteur de la vue, qui peut être définie de n'importe quelle manière, comme illustré dans la figure 15.

Ajuster les marges de la vue

Pour que vos vues soient espacées uniformément, cliquez sur Margin (Marge) dans la barre d'outils afin de sélectionner la marge par défaut pour chaque vue que vous ajoutez à la mise en page. Toute modification apportée à la marge par défaut ne s'applique qu'aux vues que vous ajoutez par la suite.

Vous pouvez contrôler la marge de chaque vue dans la fenêtre Attributes (Attributs) en cliquant sur le numéro de la ligne qui représente chaque contrainte. Dans la figure 14, l'accroche 4 montre que la marge inférieure est définie sur 16 dp.

Figure 16. Le bouton Margin (Marge) de la barre d'outils

Toutes les marges proposées par l'outil sont des facteurs de 8 dp pour que vos vues s'alignent sur les recommandations de grille carrée de 8 dp de Material Design.

Contrôler des groupes linéaires avec une chaîne

Une chaîne est un groupe de vues liées les unes aux autres par des contraintes de position bidirectionnelles. Les vues d'une chaîne peuvent être réparties verticalement ou horizontalement.

Les chaînes peuvent être stylisées de l'une des manières suivantes:

1. Répartition:les vues sont réparties uniformément après la prise en compte des marges. Il s'agit de l'option par défaut.
2. Réparti à l'intérieur:les première et dernière vues sont fixées aux contraintes à chaque extrémité de la chaîne, et les autres sont réparties uniformément.
3. Pondéré:lorsque la chaîne est définie sur étaler ou répartir à l'intérieur, vous pouvez remplir l'espace restant en définissant une ou plusieurs vues pour qu'elles "correspondent aux contraintes" (0dp). Par défaut, l'espace est réparti uniformément entre chaque vue définie sur "correspondre aux contraintes", mais vous pouvez attribuer une pondération de l'importance à chaque vue à l'aide des attributs layout_constraintHorizontal_weight et layout_constraintVertical_weight. Cela fonctionne de la même manière que layout_weight dans une mise en page linéaire : la vue avec la valeur de pondération la plus élevée obtient le plus d'espace, et les vues ayant la même pondération reçoivent le même espace.
4. Empaqueté:les vues sont regroupées après la prise en compte des marges. Vous pouvez ajuster le biais de toute la chaîne (à gauche ou à droite, ou en haut ou en bas) en modifiant le biais de vue "head" de la chaîne.

La vue principale de la chaîne, c'est-à-dire la vue la plus à gauche dans une chaîne horizontale (dans une mise en page de gauche à droite) et la vue la plus en haut dans une chaîne verticale, définit le style de la chaîne en XML. Toutefois, vous pouvez basculer entre à répartition, à répartir à l'intérieur et empaqueté en sélectionnant n'importe quelle vue de la chaîne, puis en cliquant sur le bouton de chaîne qui apparaît sous la vue.

Pour créer une chaîne, procédez comme suit, comme illustré dans la vidéo 4:

1. Sélectionnez toutes les vues à inclure dans la chaîne.
2. Effectuez un clic droit sur l'une des vues.
3. Sélectionnez Chaînes.
4. Sélectionnez Centrer horizontalement ou Centrer verticalement.

Voici quelques points à prendre en compte lorsque vous utilisez des chaînes:

• Une vue peut faire partie d'une chaîne horizontale et verticale, ce qui vous permet de créer des mises en page flexibles sous forme de grille.
• Une chaîne ne fonctionne correctement que si chacune de ses extrémités est contrainte par rapport à un autre objet du même axe, comme illustré dans la figure 14.
• Bien que l'orientation d'une chaîne soit verticale ou horizontale, l'utilisation d'une chaîne n'aligne pas les vues dans cette direction. Pour obtenir la position appropriée pour chaque vue de la chaîne, incluez d'autres contraintes, telles que des contraintes d'alignement.

Créer automatiquement des contraintes

Au lieu d'ajouter des contraintes à chaque vue lorsque vous les placez dans la mise en page, vous pouvez déplacer chaque vue aux positions de votre choix dans l'éditeur de mise en page, puis cliquer sur Infer Constraints (Contraintes inférées) pour créer automatiquement des contraintes.

Infer Constraints (Contraintes inférées) analyse la mise en page pour déterminer l'ensemble de contraintes le plus efficace pour toutes les vues. Il contraint les vues à leur position actuelle tout en offrant de la flexibilité. Vous devrez peut-être effectuer des ajustements pour que la mise en page réponde selon vos besoins en fonction de la taille et de l'orientation de l'écran.

La connexion automatique au parent est une fonctionnalité distincte que vous pouvez activer. Lorsqu'elle est activée et que vous ajoutez des vues enfants à un parent, cette fonctionnalité crée automatiquement au moins deux contraintes pour chaque vue à mesure que vous les ajoutez à la mise en page, mais uniquement lorsqu'il est approprié de limiter la vue à la mise en page parente. La connexion automatique ne crée aucune contrainte sur les autres vues de la mise en page.

La connexion automatique est désactivée par défaut. Pour l'activer, cliquez sur Enable Autoconnection to Parent (Activer la connexion automatique au parent) dans la barre d'outils de l'éditeur de mise en page.

Animations d'images clés

Dans un ConstraintLayout, vous pouvez animer les modifications de la taille et de la position des éléments à l'aide de ConstraintSet et TransitionManager.

Un ConstraintSet est un objet léger qui représente les contraintes, les marges et la marge intérieure de tous les éléments enfants d'un ConstraintLayout. Lorsque vous appliquez un ConstraintSet à un ConstraintLayout affiché, la mise en page met à jour les contraintes de tous ses enfants.

Pour créer une animation à l'aide de ConstraintSet, spécifiez deux fichiers de mise en page qui servent d'images clés de début et de fin pour l'animation. Vous pouvez ensuite charger un ConstraintSet à partir du deuxième fichier d'image clé et l'appliquer à la ConstraintLayout affichée.

L'exemple de code suivant montre comment animer le déplacement d'un seul bouton en bas de l'écran.

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Ressources supplémentaires

ConstraintLayout est utilisé dans l'application de démonstration Sunflower.