🖼️ Introduction au dimensionnement

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.

Comprendre les quatre options de dimensionnement

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.

Utilisez la taille relative pour presque tout

La taille relative est votre meilleure amie pour presque tous les éléments, car elle adapte automatiquement les éléments à l'écran.

Le cas particulier des images

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.

1. 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).

2. Définissez la hauteur et la largeur en relative size

3. 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.

Utilisez l'option "Fit Contents" pour la hauteur des Labels et des Text Inputs.

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

Quand utiliser la taille absolue

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.