🖼️ Introduction au dimensionnement
Last updated
Last updated
Pour le développeur d'applications d'aujourd'hui, décider pour quel appareil mobile concevoir est un défi. Rien que sur Android, il existe des milliers d'appareils différents qui sont utilisés aujourd'hui. Sur iOS, il existe encore 8 tailles différentes d'iPhone et 4 tailles différentes d'iPad.
En dimensionnant vos composants de manière optimale, vous pouvez prendre en charge autant de tailles et de résolutions d'écran que nécessaire sur toutes les plateformes dans un seul et même projet.
Les propriétés suivantes sont disponibles pour tous les composants visibles dans les propriétés Height et Width. Dans ces définitions, un composant parent est un écran, une rangée ou une colonne qui contient le composant.
La taille relative est votre meilleure amie pour presque tous les éléments, car elle adapte automatiquement les éléments à l'écran.
Les images dont les dimensions et les résolutions sont fixes peuvent être particulièrement difficiles à dimensionner. Nous recommandons une approche simple qui devrait fonctionner dans la plupart des cas.
Téléchargez ou référencez des images avec une résolution minimale (celle-ci varie en fonction de la taille de l'image et du dispositif).
Définissez la hauteur et la largeur en relative size
Définissez la propriété du mode de redimensionnement comme suit cover ou contain (voir ci-dessous). Cela permettra de redimensionner automatiquement votre image même si les dimensions de l'image changent.
Pour s'assurer que le texte n'est pas coupé à l'écran, il est recommandé, dans la plupart des cas, d'utiliser l'option Fit contents pour définir la hauteur des Labels and Text Inputs
Malgré la simplicité de la taille relative, il existe quelques cas où il est recommandé ou nécessaire de définir des éléments en taille absolue.
Étant donné que la hauteur d'un écran défilant est supérieure à la taille de l'écran, la hauteur des éléments doit être définie comme Absolute size ou fit contents. Vous ne pouvez pas utiliser le dimensionnement relatif ou le fill containerpour les composants dans une fenêtre déroulante Screen or Column.
Vous pouvez voir un exemple d'écran défilant dans les modèles de conception.
