Dans Compose, vous pouvez enchaîner plusieurs modificateurs pour modifier l'apparence et d'un composable. Ces chaînes de modificateur peuvent affecter les contraintes transmises aux composables, qui définissent des limites de largeur et de hauteur.
Cette page décrit l'impact des modificateurs en chaîne sur les contraintes. la mesure et le placement des composables.
Modificateurs dans l'arborescence de l'interface utilisateur
Pour comprendre comment les modificateurs s'influencent les uns les autres, il est utile de visualiser comment elles apparaissent dans l'arborescence de l'UI, qui est générée lors de la phase de composition. Pour Pour en savoir plus, consultez la section Composition.
Dans l'arborescence de l'UI, vous pouvez visualiser les modificateurs en tant que nœuds wrapper pour la mise en page. nœuds:
![Code des composables et des modificateurs, et leur représentation visuelle sous la forme d'une arborescence d'UI.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/modifier-wrapping.png?authuser=6&hl=fr)
L'ajout de plusieurs modificateurs à un composable crée une chaîne de modificateurs. Quand ?
vous enchaînez plusieurs modificateurs, chaque nœud de modificateur encapsule le reste de la chaîne
et le nœud de mise en page qu'il contient. Par exemple, lorsque vous associez un clip
et un
modificateur size
, le nœud de modificateur clip
encapsule le nœud de modificateur size
,
qui encapsule ensuite le nœud de mise en page Image
.
Dans la phase de mise en page, l'algorithme qui parcourt l'arbre reste le même, mais chaque nœud de modificateur est également visité. Ainsi, un modificateur peut modifier la taille les exigences et l'emplacement du modificateur ou du nœud de mise en page qu'il encapsule.
Comme le montre la figure 2, l'implémentation des composables Image
et Text
.
se composent d'une chaîne de modificateurs encapsulant un seul nœud de mise en page. La
les implémentations de Row
et Column
sont simplement des nœuds de mise en page qui décrivent comment
de mettre ses enfants.
![Arborescence d'origine, mais à présent, chaque nœud n'est qu'une mise en page simple avec de nombreux modificateurs encapsulant des nœuds autour.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/composables-modifiers.png?authuser=6&hl=fr)
En résumé :
- Les modificateurs encapsulent un seul modificateur ou nœud de mise en page.
- Les nœuds de mise en page peuvent disposer plusieurs nœuds enfants.
Les sections suivantes décrivent comment utiliser ce modèle mental pour raisonner le chaînage de modificateurs et son influence sur la taille des composables.
Contraintes lors de la phase de mise en page
La phase de mise en page suit un algorithme en trois étapes pour identifier chaque mise en page. la largeur, la hauteur et les coordonnées x et y du nœud:
- Mesurer les enfants: un nœud mesure ses enfants, le cas échéant.
- Choisir sa propre taille: sur la base de ces mesures, un nœud choisit lui-même la taille de l'image.
- Placer les enfants: chaque nœud enfant est placé par rapport au propre la position de votre annonce.
Constraints
permet de trouver les tailles appropriées pour les nœuds lors des deux premières
les étapes de l'algorithme. Les contraintes définissent les limites minimale et maximale d'une
la largeur et la hauteur du nœud. Lorsque le nœud décide de sa taille, sa taille mesurée
doit être comprise dans cette plage de tailles.
Types de contraintes
Une contrainte peut être l'une des suivantes:
- Limité: le nœud a une largeur et une hauteur maximales et minimales.
![Contraintes liées de différentes tailles dans un conteneur.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/bounded-constraints.png?authuser=6&hl=fr)
- Illimité: le nœud n'est soumis à aucune limite de taille. La largeur maximale et les limites de hauteur sont définies sur l'infini.
![Contraintes illimitées dont la largeur et la hauteur sont définies sur l'infini. Les contraintes s'étendent au-delà du conteneur.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/unbounded-constraints.png?authuser=6&hl=fr)
- Exact: le nœud doit respecter une taille exacte. Le minimum et les limites maximales sont définies sur la même valeur.
![Contraintes exactes qui respectent une exigence exacte de taille au sein du conteneur.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/exact-constraints.png?authuser=6&hl=fr)
- Combinaison: le nœud suit une combinaison des types de contraintes ci-dessus. Par exemple, une contrainte peut limiter la largeur tout en autorisant une hauteur maximale illimitée, ou bien définir une largeur exacte, mais indiquer une hauteur limitée.
![Deux conteneurs qui montrent des combinaisons de contraintes limitées et illimitées, et de largeurs et de hauteurs exactes.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/combination-constraints.png?authuser=6&hl=fr)
La section suivante décrit comment ces contraintes sont transmises d'un parent à un enfant.
Comment les contraintes sont transmises du parent à l'enfant
Lors de la première étape de l'algorithme décrit dans Contraintes de la mise en page , les contraintes sont transmises du parent à l'enfant. dans l'arborescence de l'UI.
Lorsqu'un nœud parent mesure ses enfants, il applique ces contraintes enfant pour lui faire savoir quelle taille il est autorisé à faire. Ensuite, lorsqu'il décide de sa propre taille, il respecte également les contraintes transmises par ses propres parents.
De manière générale, l'algorithme fonctionne comme suit:
- Pour décider de la taille qu'il souhaite réellement occuper, le nœud racine de l'arborescence de l'UI mesure ses enfants et transmet les mêmes contraintes à son premier enfant.
- Si l'enfant est un modificateur qui n'a aucune incidence sur la mesure, il transfère le au modificateur suivant. Les contraintes sont transmises au modificateur la chaîne telle quelle, sauf si un modificateur ayant un impact sur la mesure est atteint. La les contraintes sont ensuite redimensionnées en conséquence.
- Une fois atteint un nœud qui n'a pas d'enfants (appelés du nœud"), il décide de sa taille en fonction des contraintes qui ont été transmises. renvoie cette taille résolue à son parent.
- Le parent adapte ses contraintes en fonction des mesures de cet enfant. appelle son enfant suivant avec ces contraintes ajustées.
- Une fois que tous les enfants d'un parent ont été mesurés, le nœud parent décide et la communique à son propre parent.
- De cette façon, l'ensemble de l'arborescence est balayé d'abord en profondeur. Finalement, tous les nœuds ont décidé de leur taille et l'étape de mesure est terminée.
Pour obtenir un exemple détaillé, consultez la section Contraintes et ordre des modificateurs. vidéo.
Modificateurs affectant les contraintes
Dans la section précédente, vous avez appris que certains modificateurs peuvent affecter la contrainte la taille de l'image. Les sections suivantes décrivent les modificateurs spécifiques ayant un impact de contraintes.
Modificateur size
Le modificateur size
déclare la taille souhaitée pour le contenu.
Par exemple, l'arborescence d'interface utilisateur suivante doit être affichée dans un conteneur de 300dp
.
par 200dp
. Les contraintes sont limitées, ce qui permet des largeurs comprises entre 100dp
et
300dp
, et des hauteurs comprises entre 100dp
et 200dp
:
![Partie d'une arborescence d'interface utilisateur avec le modificateur de taille encapsulant un nœud de mise en page et le paramètre
Représentation des contraintes limitées définies par le modificateur de taille dans un conteneur.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier.png?authuser=6&hl=fr)
Le modificateur size
adapte les contraintes entrantes pour qu'elles correspondent à la valeur qui lui est transmise.
Dans cet exemple, la valeur est 150dp
:
![Identique à la figure 7, sauf que le modificateur de taille adapte les contraintes entrantes pour qu'elles correspondent à la valeur qui lui est transmise.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-2.png?authuser=6&hl=fr)
size
ajuste les contraintes à 150dp
.Si la largeur et la hauteur sont inférieures à la plus petite limite de contrainte, ou dépasse la limite de contrainte la plus grande, le modificateur correspond à la valeur les contraintes transmises de manière aussi précise que possible, tout en respectant les contraintes transmises dans:
![Deux arborescences d'UI et leurs représentations correspondantes dans des conteneurs. Dans la première, la
le modificateur de taille accepte les contraintes d'augmentation. Dans la seconde, le modificateur de taille s'adapte
des contraintes trop importantes aussi près que possible, ce qui entraîne des contraintes qui remplissent le conteneur.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-3.png?authuser=6&hl=fr)
size
respecte de manière aussi fidèle la contrainte transmise
que possible.Notez que l'association de plusieurs modificateurs size
ne fonctionne pas. Les premiers size
définit les contraintes minimales et maximales sur une valeur fixe. Même si
le deuxième modificateur demande une taille plus petite ou plus grande, il doit quand même
respectent les limites exactes transmises et ne remplaceront donc pas ces valeurs:
![Chaîne de deux modificateurs de taille dans l'arborescence de l'interface utilisateur et sa représentation dans un conteneur
qui est le résultat de la première valeur
transmise et non de la deuxième valeur.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-4.png?authuser=6&hl=fr)
size
, dans laquelle la deuxième valeur est transmise
dans (50dp
) ne remplace pas la première valeur (100dp
).Modificateur requiredSize
Utilisez le modificateur requiredSize
au lieu de size
si vous avez besoin de votre
pour remplacer les contraintes entrantes. Le modificateur requiredSize
remplace
les contraintes entrantes et transmet la taille
que vous spécifiez en tant que limites exactes.
Lorsque la taille est retransmise dans l'arborescence, le nœud enfant est centré dans le d'espace disponible:
![Le modificateur size et requiredSize sont enchaînés dans une arborescence d'UI, et le rôle
dans un conteneur. Les contraintes du modificateur requiredSize remplacent le modificateur de taille
de contraintes.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/requiredsize-modifier.png?authuser=6&hl=fr)
requiredSize
ignore les contraintes entrantes de
le modificateur size
.Modificateurs width
et height
Le modificateur size
adapte à la fois la largeur et la hauteur des contraintes. Avec
le modificateur width
, vous pouvez définir une largeur fixe, mais laisser la hauteur indécis.
De même, avec le modificateur height
, vous pouvez définir une hauteur fixe, mais conserver le paramètre
largeur indéterminée:
![Deux arborescences d'UI, l'une avec le modificateur de largeur et sa représentation de conteneur, et l'autre
avec le modificateur de hauteur et sa représentation.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/width-height-modifier.png?authuser=6&hl=fr)
width
et height
définissent une largeur fixe.
et la hauteur, respectivement.Modificateur sizeIn
Le modificateur sizeIn
vous permet de définir des contraintes minimales et maximales exactes
pour la largeur et la hauteur. Utilisez le modificateur sizeIn
si vous avez besoin d'un contrôle précis
sur les contraintes.
![Arborescence d'UI avec le modificateur sizeIn, avec des largeurs et des hauteurs minimales et maximales définies
et sa représentation dans un conteneur.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/sizein-modifier.png?authuser=6&hl=fr)
sizeIn
avec minWidth
, maxWidth
, minHeight
et
maxHeight
défini.Exemples
Cette section montre et explique le résultat de plusieurs extraits de code avec ou des modificateurs enchaînés.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .size(50.dp) )
Cet extrait de code produit le résultat suivant:
- Le modificateur
fillMaxSize
modifie les contraintes pour définir à la fois la largeur et la hauteur minimales à la valeur maximale (300dp
en largeur et200dp
) ; en hauteur. - Même si le modificateur
size
souhaite utiliser une taille de50dp
, il doit toujours pour respecter les contraintes minimales entrantes. Le modificateursize
génère également les limites de contrainte exactes de300
par200
, en ignorant la valeur fournie dans le modificateursize
. - Le
Image
respecte ces limites et enregistre une taille de300
par200
, ce qui est transmise tout au long de l'arbre.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) )
Cet extrait de code produit le résultat suivant:
- Le modificateur
fillMaxSize
adapte les contraintes pour définir à la fois les valeurs minimales de largeur et de hauteur à la valeur maximale :300dp
en largeur et200dp
en hauteur. - Le modificateur
wrapContentSize
réinitialise les contraintes minimales. Alors quefillMaxSize
a entraîné des contraintes fixes,wrapContentSize
le réinitialise. à des contraintes limitées. Le nœud suivant peut désormais occuper tout l'espace ou être plus petite que l'ensemble de l'espace. - Le modificateur
size
définit les contraintes sur les limites minimale et maximale de50
Image
renvoie une taille de50
par50
, et le modificateursize
est converti transmet cette information.- Le modificateur
wrapContentSize
possède une propriété spéciale. Il utilise ses enfant et le place au centre des limites minimales disponibles qui ont été lui sont transmises. La taille qu'il communique à ses parents est donc égal à les limites minimales qui lui ont été transmises.
En combinant seulement trois modificateurs, vous pouvez définir une taille pour le composable et centrez-la dans son parent.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .clip(CircleShape) .padding(10.dp) .size(100.dp) )
Cet extrait de code produit le résultat suivant:
- Le modificateur
clip
ne modifie pas les contraintes.- Le modificateur
padding
réduit les contraintes maximales. - Le modificateur
size
définit toutes les contraintes sur100dp
. - Le
Image
respecte ces contraintes et indique une taille de100
par100dp
- Le modificateur
padding
ajoute10dp
pour toutes les tailles, ce qui augmente les valeurs rapportées la largeur et la hauteur par20dp
. - À présent, dans la phase de dessin, le modificateur
clip
agit sur un canevas de120
en120dp
Elle crée ainsi un masque circulaire de cette taille. - Le modificateur
padding
insère ensuite son contenu de10dp
sur toutes les tailles. réduit la taille de la toile de100dp
à100
. - Le
Image
est dessiné dans ce canevas. L'image est rognée en fonction cercle d'origine de120dp
, la sortie est donc un résultat non circulaire.
- Le modificateur