Les pixels indépendants de la densité (dp) et les pixels indépendants de l'échelle (sp) sont essentiels pour créer des mises en page et présenter des polices qui répondent de manière uniforme à la large gamme de densités d'écran, de classes de taille, de facteurs de forme et de formats qui composent les appareils Android.
Points à retenir
- Si vous utilisez une grille de référence, respectez les mesures de 4 et 8.
- Indiquez les spécifications en dp et sp, au lieu de pixels.
- Exportez des graphiques bitmap (raster) pour tous les buckets.
- Concevez en gardant à l'esprit la réactivité, avec différentes classes de taille, résolutions et formats.
- Pixels indépendants de la densité (dp) : les pixels indépendants de la densité sont des unités flexibles qui s'adaptent pour avoir des dimensions uniformes sur n'importe quel écran. Ils sont basés sur la densité physique de l'écran. Ces unités sont relatives à un écran de 160 dpi (points par pouce), sur lequel 1 dp est égal à 1 px.
- Pixels indépendants de l'échelle (sp) : les pixels indépendants de l'échelle ont la même fonction que les dp, mais pour les polices. La valeur par défaut d'un sp est la même que celle d'un dp. Le système Android calcule la taille de police réelle à utiliser en fonction de l'appareil et des préférences de l'utilisateur définies dans les paramètres de l'appareil.
La principale différence entre ces unités de mesure est que les pixels indépendants de l'échelle conservent les paramètres de police d'un utilisateur. Les utilisateurs qui ont des paramètres de texte plus grands pour l'accessibilité voient les tailles de police correspondre à leurs préférences de taille de texte. Découvrez comment modifier la taille de la police dans Compose.
Android utilise ces unités pour faciliter la mise à l'échelle et la traduction sur la gamme d'appareils et de résolutions.
Buckets de densité
Les écrans haute densité ont plus de pixels par pouce que les écrans basse densité. Par conséquent, les éléments d'interface utilisateur de mêmes dimensions en pixels apparaissent plus grands sur les écrans basse densité et plus petits sur les écrans haute densité. C'est pourquoi vous ne devez pas déclarer les mesures en pixels.
Android regroupe les plages de densités d'écran en "buckets" et les utilise pour fournir l'ensemble optimal d'éléments à votre appareil. Les buckets de densité les plus couramment utilisés sont mdpi, hdpi, xhdpi, xxhdpi, et xxxhdpi (nodpi et anydpi font référence à un bucket qui ne s'adapte pas à la résolution de l'appareil, généralement utilisé pour les éléments vectoriels). Chacun correspond à un fichier de ressources de votre application.
Pour calculer les dp :
dp = (largeur en pixels * 160) / densité de l'écran
Grille de référence
La création avec une grille sous-jacente permet de créer un espacement et un alignement cohérents dans votre interface utilisateur. L'interface utilisateur Android utilise une grille de 8 dp pour la mise en page, les composants et l'espacement.
Les éléments plus petits tels que les icônes, le texte et certains éléments des composants sont mieux alignés sur une grille de 4 dp.
Grilles de mise en page
Les grilles sont l'épine dorsale de toute mise en page. Tenez compte de la hiérarchie, de la quantité et même du message du contenu.
Grille hiérarchique
Une grille hiérarchique est créée en tenant compte de la hiérarchie ou de l'importance du contenu. Pensez à la mise en page d'un journal : un article de première page cohérent occupe la majeure partie de la mise en page, tandis qu'une colonne plus petite affiche les articles précédents.
Lors de l'adaptation à différentes tailles d'écran, une mise en page hiérarchique peut être ajustée, redimensionnée et révéler des cellules de grille.
Grille modulaire
Une grille modulaire est configurée en colonnes et en lignes cohérentes, créant ainsi un système de grille rectangulaire pour aligner le contenu. Les grilles modulaires fonctionnent bien pour les contenus d'importance et de taille similaires, comme une galerie de cartes.
Une grille modulaire adaptative peut ajouter d'autres cellules de grille, et le contenu peut s'aligner ou s'adapter à différentes cellules de grille. Les cellules de grille peuvent rester cohérentes sur différentes tailles ou être redimensionnées en fonction des besoins du contenu.
Grille de colonnes
Les colonnes créent une structure de grille pour fournir une définition verticale à une mise en page en divisant le contenu dans la zone de corps. Le contenu est placé dans les zones de l'écran qui contiennent des colonnes. Alignez-vous sur une grille sous-jacente pour aligner le contenu, mais conservez une taille flexible.
Découvrez les bases de la configuration d'une grille de colonnes et de l'application de contenu dans les bases de la mise en page. La grille de colonnes peut s'adapter à différents facteurs de forme en modifiant la taille et le nombre de colonnes en fonction des besoins de la taille de l'écran à certains moments, tout en permettant également au contenu de s'adapter.
Classes de taille
Les classes de taille de fenêtre sont un ensemble de points d'arrêt de fenêtre d'affichage définis qui permettent de concevoir, de développer et de tester des mises en page d'applications responsives et adaptatives. Android divise les classes de taille de fenêtre en trois catégories : compacte, moyenne et agrandie. En savoir plus sur les classes de taille de fenêtre.
Formats
Un format est la proportion de la largeur d'un élément par rapport à sa hauteur. Les formats sont écrits sous la forme largeur:hauteur.
Pour assurer la cohérence de votre mise en page, utilisez un format cohérent sur des éléments tels que les images, les surfaces et la taille de l'écran.
Les formats suivants sont recommandés pour une utilisation dans votre interface utilisateur :
- 16:9
- 3:2
- 4:3
- 1:1
- 3:4
- 2:3