Une contrainte définit les règles de positionnement et de redimensionnement d’un élément enfant par rapport à son conteneur parent.
Elle détermine comment l’élément se comporte lorsque le parent change de taille (redimensionnement, adaptation responsive), en conservant ou en ajustant ses distances, alignements ou dimensions.
Contrainte de positionnement relatif
Paramètre de contrainte qui ancre un élément à une distance fixe du bord inférieur (Bottom) ou supérieur (Top) de son conteneur parent. Lorsque le conteneur est redimensionné (par exemple, lors d’un changement de format d’écran ou d’orientation), l’élément conserve cette distance relative au bord choisi, garantissant ainsi une stabilité visuelle et une cohérence spatiale dans la mise en page.
- Cas d’usage typiques : barres de navigation fixes en bas, en-têtes persistants en haut, boutons d’action flottants.
- Accessibilité : Ce type de contrainte facilite la prévisibilité du placement des éléments interactifs, ce qui est crucial pour les utilisateurs de technologies d’assistance ou ceux naviguant via clavier/touches directionnelles.
- Limites : Ne gère pas automatiquement les espacements internes ni les relations entre frères ; il s’applique uniquement à la relation enfant–parent.
À ne pas confondre avec Auto Layout : les contraintes classiques ne réagissent pas aux contenus internes ni aux modifications de taille des enfants. Elles ne répondent qu’aux variations de taille du parent.
Auto Layout vs. Contraintes classiques
| Critère | Contraintes (Constraints) | Auto Layout |
|---|---|---|
| Portée | Relation enfant → parent uniquement | Gestion interne du conteneur (enfants + espacement) |
| Comportement au redimensionnement | Position fixe ou relative aux bords | Adaptation dynamique selon contenu, padding, gap |
| Responsive | Basique (ancre à un bord) | Avancé (flexible, élastique, empilement) |
| Maintenabilité | Moins scalable sur composants complexes | Idéal pour systèmes de design évolutifs |
| Accessibilité implicite | Faible (pas de gestion du flux) | Forte (respect du sens de lecture, ordre DOM-like) |
En anglais : constraints