Créer une UI responsive avec ConstraintLayout Inclus dans Android Jetpack.
ConstraintLayout
vous permet de créer de grandes mises en page complexes avec une hiérarchie des vues plate,
des groupes de vues imbriqués. Il est similaire à
RelativeLayout
en ce sens que toutes les vues sont présentées en fonction des relations entre les points de vue frères
et la mise en page parent, mais il est plus flexible que RelativeLayout
et plus facile à utiliser avec l'éditeur de mise en page d'Android Studio.
Toute la puissance de ConstraintLayout
est directement accessible depuis la
Les outils visuels de l'éditeur de mise en page, car l'API de mise en page et l'éditeur de mise en page
spécialement conçus les uns pour les autres. Vous pouvez créer votre mise en page avec
ConstraintLayout
en la faisant glisser au lieu de la modifier
XML.
Cette page explique comment créer une mise en page avec ConstraintLayout
dans
Android Studio 3.0 ou version ultérieure Pour en savoir plus sur l'éditeur de mise en page,
consultez Créer une UI avec l'éditeur de mise en page.
Pour voir les diverses mises en page que vous pouvez créer avec ConstraintLayout
, procédez comme suit :
consultez les
Projet d'exemples de mise en page avec contrainte sur GitHub
Présentation des contraintes
Pour définir la position d'une vue dans ConstraintLayout
, ajoutez au
au moins une contrainte horizontale et une contrainte verticale pour la vue. Chaque contrainte
représente une connexion ou un alignement avec une autre vue, la mise en page parente ou une
et invisible. Chaque contrainte définit la position de la vue le long de la
l'axe vertical ou horizontal. Chaque vue doit comporter au moins une contrainte pour
chaque axe, mais souvent plus
sont nécessaires.
Lorsque vous déposez une vue dans l'éditeur de mise en page, elle reste là où vous la quittez, même en l'absence de contraintes. L'objectif est de faciliter les modifications. Si aucune vue n'est associée lorsque vous exécutez votre mise en page sur un appareil, elle est dessinée en position [0,0] (dans l'angle supérieur gauche).
Dans la figure 1, la mise en page s'affiche correctement dans l'éditeur, mais il n'y a pas de orientation verticale. sur la vue C. Lorsque cette mise en page s'affiche sur un appareil, afficher C horizontalement est aligné sur les bords gauche et droit de la vue A, mais il apparaît en haut de la à l'écran, car il n'a pas de contrainte verticale.
Bien qu'une contrainte manquante ne provoque pas d'erreur de compilation, la mise en page Editor indique les contraintes manquantes en tant qu'erreur dans la barre d'outils. Pour afficher les erreurs et 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 ces contraintes avec la Contraintes de connexion automatique et de inférence caractéristiques.
Ajouter ConstraintLayout à votre projet
Pour utiliser ConstraintLayout
dans votre projet, procédez comme suit:
- Assurez-vous que le dépôt
maven.google.com
est déclaré dans votre fichiersettings.gradle
:Groovy
dependencyResolutionManagement { ... repositories { google() } )
Kotlin
dependencyResolutionManagement { ... repositories { google() } }
- Ajouter la bibliothèque en tant que dépendance au niveau du module
build.gradle
, comme illustré dans l'exemple suivant. Nouveautés peut être différente de celle présentée dans l'exemple.Groovy
dependencies { implementation "androidx.constraintlayout:constraintlayout:2.2.0-beta01" // To use constraintlayout in compose implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01" }
Kotlin
dependencies { implementation("androidx.constraintlayout:constraintlayout:2.2.0-beta01") // To use constraintlayout in compose implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01") }
- Dans la barre d'outils ou la notification de synchronisation, cliquez sur Sync Project with Gradle" (Synchroniser le projet avec Gradle). Fichiers.
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:
- Ouvrez votre mise en page dans Android Studio et cliquez sur l'onglet Design (Conception) en bas de la fenêtre de l'éditeur.
- Dans la fenêtre Component Tree (Arborescence des composants), effectuez un clic droit sur la mise en page, puis cliquez sur 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:
- Dans la fenêtre Project (Projet), cliquez sur le dossier du module, puis sélectionnez Fichier > Nouveau > XML > XML de mise en page :
- Saisissez un nom pour le fichier de mise en page, puis saisissez "androidx.constraintlayout.widget.ConstraintLayout" pour le paramètre Root Tag.
- Cliquez sur Terminer.
Ajouter ou supprimer une contrainte
Pour ajouter une contrainte, procédez comme suit:
Faites glisser une vue de la fenêtre Palette vers l'éditeur.
Lorsque vous ajoutez une vue dans un
ConstraintLayout
, elle s'affiche dans une cadre de délimitation avec des poignées de redimensionnement carrées à chaque angle et des poignées arrondies et les poignées de contrainte de chaque côté.- Cliquez sur la vue pour la sélectionner.
- Effectuez l'une des opérations suivantes:
<ph type="x-smartling-placeholder">
- </ph>
- 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, celui de la mise en page consignes. Notez que lorsque vous faites glisser la poignée de contrainte, Editor affiche les ancres de connexion potentielles et les superpositions bleues.
Cliquez sur l'un des liens Create a connection (Créer une connexion). dans la section Mise en page de la fenêtre Attributs, comme illustré ici. comme illustré dans la figure 4.
Lorsque la contrainte est créée, l'éditeur lui attribue 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 le secteur d'activité.
- Vous ne pouvez créer des contraintes qu'entre une poignée de contrainte et une ancre qui partagent le même plan. Un plan vertical : le côté gauche et le côté droit les côtés) d'une vue ne peuvent être contraints qu'à un autre plan vertical ; références ne peuvent se limiter qu'à d'autres références.
- Chaque handle de contrainte peut être utilisé pour une seule contrainte, mais vous pouvez créer plusieurs contraintes à partir de différentes vues vers 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.
Ctrl+clic (Cmd-clic sous macOS) de contrainte. La contrainte devient rouge pour indiquer que vous pouvez cliquer sur supprimez-la, comme illustré dans la figure 5.
Dans la section Mise en page de la fenêtre Attributs, cliquez sur une ancre de contrainte, comme illustré dans la figure 6.
Si vous ajoutez des contraintes opposées à une vue, les lignes de contrainte deviennent enroulés comme un ressort pour indiquer les forces opposées, comme illustré dans la vidéo 2. La l'effet est plus visible lorsque la taille d'affichage est définie sur "fixe" ou « encapsuler le contenu », auquel cas la vue est centrée entre les contraintes. Si vous préférez la vue pour étirer sa taille afin de répondre aux contraintes, changer la taille pour qu'elle corresponde aux contraintes. Si vous voulez conserver la taille actuelle et déplacer la vue pour qu'elle ne soit pas centrée. ajuster le biais de contrainte.
Vous pouvez utiliser des contraintes pour obtenir différents types de comportements de mise en page, décrites dans les sections suivantes.
Position du parent
Appliquez une contrainte au côté d'une vue par rapport au bord correspondant de la mise en page.
Sur la figure 7, le côté gauche de la vue est relié au bord gauche mise en page parent. Vous pouvez définir la distance par rapport au bord à l'aide d'une marge.
Position de la commande
Définir l'ordre d'apparition de deux vues, verticalement ou horizontalement.
Dans la figure 8, B est contraint de toujours se trouver à droite de A, et C est est inférieure à A. Cependant, ces contraintes n'impliquent pas d'alignement, de sorte que B peut de monter et de descendre.
Emplacement D
Alignez le bord d'une vue sur le même bord d'une autre vue.
Dans la figure 9, le côté gauche de B est aligné sur le côté gauche de A. Si vous voulez pour aligner les centres d'affichage, créez une contrainte des deux côtés.
Vous pouvez décaler l'alignement en faisant glisser la vue vers l'intérieur à partir de la contrainte. Par exemple, la figure 10 montre B avec un décalage de 24 dp. Le décalage est de définie par la marge de la vue contrainte.
Vous pouvez également sélectionner toutes les vues à aligner, puis cliquer sur Aligner dans la barre d'outils pour sélectionner le type d'alignement.
Alignement de la ligne de base
Alignez la ligne de base du texte d'une vue sur celle d'une autre vue.
Dans la figure 11, la première ligne de B est alignée sur le texte de A.
Pour créer une contrainte de référence, effectuez un clic droit sur l'affichage de texte que vous souhaitez puis cliquez sur Show Baseline (Afficher la référence). Cliquez ensuite sur le texte base de référence et faites glisser la ligne vers une autre ligne de base.
Appliquez une contrainte à une consigne
Vous pouvez ajouter un guide vertical ou horizontal qui vous permet de contraindre et ne sont pas visibles par les utilisateurs de votre application. Vous pouvez placer les consignes dans la mise en page en fonction d'unités dp ou d'un pourcentage par rapport le bord de la mise en page.
Pour créer une consigne, cliquez sur Consignes. dans la barre d'outils, puis cliquez sur Ajouter une consigne verticale ou sur Ajouter Consignes horizontales.
repositionnez la ligne en pointillés et cliquez sur le cercle pour changer de mode de mesure.
Contrainte à une barrière
Tout comme une ligne de conduite, une barrière est une ligne invisible que vous pouvez contraindre sauf qu'une barrière ne définit pas sa propre position. Au lieu de cela, l’obstacle se déplace en fonction de la position des vues qu'elle contient. C'est utile lorsque vous souhaitez limiter une vue à un ensemble de vues plutôt qu'à une une vue spécifique.
Par exemple, dans la figure 13, la vue C est contrainte du côté droit d'une de sécurité. La barrière est définie sur la "fin" (ou le côté droit, dans un sens mise en page) des vues A et B. La barrière évolue selon que la le côté droit de la vue A ou de la vue B est le plus à droite.
Pour créer une barrière, procédez comme suit:
- Cliquez sur Consignes. dans la barre d'outils, puis cliquez sur Ajouter une barrière verticale ou Ajoutez une barrière horizontale.
- Dans la fenêtre Component Tree (Arborescence des composants), sélectionnez les vues souhaitées dans les et faites-les glisser dans le composant Barrier.
- Sélectionnez la barrière dans l'arborescence des composants, puis ouvrez le Attributs puis définissez barrierDirection.
Vous pouvez maintenant créer une contrainte à partir d'une autre vue de la barrière.
Vous pouvez également limiter les vues qui se trouvent à l'intérieur de la barrière de de sécurité. De cette façon, vous pouvez aligner toutes les vues de la barrière les unes par rapport aux autres, même si vous ne savez pas quelle vue est la plus longue ou la plus haute.
Vous pouvez également inclure une ligne directrice à l'intérieur d'une barrière pour garantir un "minimum" la position de la barrière.
Ajuster le biais de contrainte
Lorsque vous ajoutez une contrainte des deux côtés d'une vue et la taille de la vue pour la la même dimension est soit "fixe" ou "encapsuler le contenu", la vue est centrée entre les deux contraintes avec un biais par défaut de 50 %. Vous pouvez ajuster le paramètre un biais en faisant glisser le curseur dans la fenêtre Attributs ou en faisant glisser la vue, comme illustré dans la vidéo 3.
Si vous souhaitez que la vue s'étire pour respecter les contraintes, changer 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 taille : la vue n'est pas redimensionnée en fonction du contenu ou de la taille de l'écran. À sélectionnez un autre mode de dimensionnement, cliquez sur une vue et ouvrez la page Attributs sur le côté droit 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. C'est n'est disponible que pour les vues avec une mise en page de contrainte.
Vous pouvez modifier le calcul de la hauteur et de la largeur en cliquant sur indiqués par la légende 3 de la figure 14. Ces symboles représentent le mode Taille, comme suit. Cliquez sur le symbole pour activer/désactiver entre ces paramètres:
- Fixe: spécifiez une dimension spécifique dans la zone de texte suivante ou en redimensionner la vue dans l'éditeur.
- Encapsuler le contenu: la vue s'agrandit selon les besoins contenus.
- layout_restrictedWidth
-
Match Constraints (Contraintes de correspondance) : la vue s'élargit autant que possible pour respecter les
des contraintes de chaque côté, après avoir pris en compte les marges de la vue. Cependant, vous
pouvez modifier ce comportement avec les attributs et valeurs ci-dessous. Ces
ne prennent effet que lorsque vous définissez la largeur d'affichage sur "correspondre aux contraintes" :
<ph type="x-smartling-placeholder">
- </ph>
- 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 se développe pour s'adapter à son contenu. L'utilisation de ce mode pour la hauteur ou la largeur permet de définir un ratio de taille.
- layout_constraintWidth_min
Définissez cette valeur sur true
pour que la dimension horizontale passe à
respecter les contraintes. Par défaut, un widget défini sur WRAP_CONTENT
n'est pas limitée
par des contraintes.
Définir la taille en tant que ratio
Vous pouvez définir la taille d'affichage selon un format tel que 16:9 si au moins l'un des
les dimensions de la vue sont définies sur "Respecter les contraintes" (0dp
). Pour activer le paramètre
cliquez sur Toggle Aspect Constraint (Activer/Désactiver la contrainte de format)
1 sur la figure 14), puis saisissez
ratio width:height dans l'entrée qui s'affiche.
Si la largeur et la hauteur sont toutes deux définies sur "respecter les contraintes", cliquez sur Activez/Désactivez la contrainte de format pour sélectionner la dimension basée sur un le ratio de l'autre. L'inspecteur de vue indique quelle dimension est définie en tant que en reliant les arêtes correspondantes par une ligne continue.
Par exemple, si vous définissez les deux côtés sur « correspondre aux contraintes », cliquez sur Activer/Désactiver "Contrainte de format" deux fois 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 dans quelle qu'elle soit, comme illustré dans la figure 15.
Ajuster les marges de la vue
Pour que vos vues soient espacées uniformément, cliquez sur Marge. dans la barre d'outils pour sélectionner la marge par défaut de chaque vue que vous ajoutez à la mise en page. Toute modification apportée à la marge par défaut ne s'applique qu'aux vues ajouter à partir de ce moment-là.
Vous pouvez contrôler la marge de chaque vue dans la fenêtre Attributes en procédant comme suit : en cliquant sur le numéro sur la ligne qui représente chaque contrainte. Dans la figure 14, L'icône 4 indique que la marge inférieure est définie sur 16dp.
Toutes les marges proposées par l'outil sont des facteurs de 8 dp pour vous aider à aligner vos vues. aux 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 vues bidirectionnelles les contraintes de position. Les vues d'une chaîne peuvent être distribuées verticalement ou horizontalement.
Les chaînes peuvent être stylisées de l'une des manières suivantes:
- Répartition:les vues sont réparties uniformément après avoir pris en compte. Il s'agit de l'option par défaut.
- Répartir à l'intérieur:la première et la dernière vue sont fixées au à chaque extrémité de la chaîne, les autres étant uniformément distribué.
- Pondérée:lorsque la chaîne est définie sur spread ou
répartir à l'intérieur, vous pouvez remplir l'espace restant en définissant un ou plusieurs
des vues pour "respecter les contraintes" (
0dp
). Par défaut, l'espace est sont réparties uniformément entre chaque vue définie pour « correspondre aux contraintes », mais vous pouvez attribuer une pondération d'importance à chaque vue à l'aide de la méthodelayout_constraintHorizontal_weight
etlayout_constraintVertical_weight
. Cela fonctionne de la même manière quelayout_weight
dans un mise en page linéaire: la vue ayant la pondération la plus élevée bénéficie du plus d'espace ; les vues ayant la même pondération obtiennent le même espace. - Empaquetée:les vues sont regroupées une fois les marges prises en compte. . Vous pouvez ajuster le biais de toute la chaîne : à gauche ou à droite, ou en haut ou en changeant la "tête" de la chaîne les vues.
La "tête" de la chaîne vue : la vue la plus à gauche dans une chaîne horizontale (dans une mise en page de gauche à droite) et vue supérieure d'une chaîne verticale : définit le style de la chaîne au format XML. Cependant, vous pouvez basculer entre Répartition, Répartition à l'intérieur et empaquetées en sélectionnant une vue de la chaîne, puis en cliquant sur le bouton correspondant qui apparaît sous la vue.
Pour créer une chaîne, procédez comme suit, comme illustré dans la vidéo 4:
- Sélectionnez toutes les vues à inclure dans la chaîne.
- Effectuez un clic droit sur l'une des vues.
- Sélectionnez Chaînes.
- 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 créer des mises en page en grille flexible.
- Une chaîne ne fonctionne correctement que si chaque extrémité de la chaîne est contrainte un autre objet sur le 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 n'aligne pas les vues dans cette direction. Pour obtenir la bonne position pour chaque vue de la chaîne, incluez d'autres contraintes, comme 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 à l'emplacement souhaité dans l'éditeur de mise en page Cliquez ensuite sur Infer Constraints (Déduire les contraintes) pour créer automatiquement des contraintes.
Infer Constraints (Contraintes inférées) analyse la mise en page pour déterminer l'ensemble le plus efficace de contraintes pour toutes les vues. Les vues sont contraintes à leur position actuelle tout en offrant de la flexibilité. Vous devrez peut-être faire des ajustements pour différentes tailles et orientations d'écran.
La connexion automatique au parent est une fonctionnalité distincte que vous pouvez activer. Quand ? est activée et que vous ajoutez des vues enfants à un parent, cette fonctionnalité crée deux contraintes ou plus pour chaque vue à mesure que vous les ajoutez au mise en page, mais uniquement lorsqu'il est approprié de limiter la vue à la vue parent mise en page. 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 Activer Connexion automatique au parent dans la barre d'outils de l'éditeur de mise en page.
Animations d'images clés
Dans un élément ConstraintLayout
, vous pouvez animer les changements de taille
et la position des éléments en utilisant
ConstraintSet
et
TransitionManager
Un ConstraintSet
est un objet léger qui représente
les contraintes, les marges et le remplissage de tous les éléments enfants dans une
ConstraintLayout
Lorsque vous appliquez un ConstraintSet
à un
affiché ConstraintLayout
, la mise en page met à jour les contraintes
tous ses enfants.
Pour créer une animation à l'aide de ConstraintSet
, spécifiez deux mises en page
qui servent d'images clés de début et de fin pour l'animation. Vous pouvez ensuite charger
une ConstraintSet
à partir du deuxième fichier d'image clé et appliquez-la à la
a affiché ConstraintLayout
.
L'exemple de code suivant montre comment animer le déplacement d'un bouton vers la 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 le
Tournesol
application de démonstration.