Adapter les mises en page

La conception adaptative consiste à concevoir des mises en page qui s'adaptent à des points d'arrêt et appareils spécifiques.

Pour implémenter efficacement des mises en page adaptatives :

  • Commencez par tenir compte de la largeur de la classe de fenêtre de l'appareil pour déterminer les modifications de mise en page, puis ajustez la hauteur.
  • Android s'appuie sur des concepts de conception réactive, semblables à ceux du développement Web, en utilisant des grilles et des images flexibles pour créer des mises en page qui s'adaptent efficacement à leur contexte.

Écran d'une application de productivité sur un appareil mobile et une tablette.

Pour obtenir des consignes de conception sur l'adaptation des mises en page aux tailles d'écran étendues, consultez le guide du développeur Compatibilité avec différentes tailles d'écran dans Compose et la page Appliquer une mise en page de M3. Vous pouvez également consulter la galerie Android Canonical pour grand écran pour trouver l'inspiration et découvrir comment implémenter des mises en page pour grand écran.

Pensez adaptatif

La conception de votre application doit être adaptative par défaut. Le marché mobile Android est en constante évolution. Vous ne pouvez donc pas considérer le mobile uniquement comme un téléphone portable. Il doit inclure tous les appareils, des téléphones portables aux pliables, en passant par les tablettes et tout ce qui se trouve entre les deux.

Certaines fonctionnalités et certains cas d'utilisation peuvent ne pas être adaptés à toutes les tailles d'écran ou à tous les facteurs de forme. La conception adaptative offre à vos utilisateurs une plus grande liberté en termes d'ergonomie, de facilité d'utilisation et de qualité de l'application.

Méthodes et qualité

Vous pouvez commencer par concevoir des écrans clés (communiquer les concepts essentiels ou votre application) avec des tailles de classe comme points d'arrêt pour servir de guide pour le reste de votre application. Ces expériences héroïques peuvent mettre en évidence les qualités adaptatives et de facteur de forme différenciées. Vous pouvez également concevoir du contenu réactif au niveau fondamental en indiquant comment le contenu doit être contraint, développé ou redistribué.

Définissez une largeur maximale pour le contenu et les composants afin d'éviter qu'ils ne s'étirent sur toute la largeur.

Autorisez le contenu à s'étendre sur toute la largeur.

Pensez en termes de confinement ou de volets.

Utilisez des conteneurs intrinsèques et visuels pour regrouper des éléments. Les volets peuvent se déplacer, se masquer, se développer, être contraints ou apparaître. Penser en termes de volets facilite la conception sur tous les appareils mobiles.

Autorisez les éléments à se déplacer et à se réorganiser en vous concentrant sur la façon dont ils s'adaptent à la grille. Envisagez un changement vertical pour les éléments et combinez-le avec des contraintes et des changements de présentation.

Une application de haute qualité doit répondre aux critères du niveau différencié des consignes relatives à la qualité essentielle des applications et à la qualité sur grand écran.

Pour en savoir plus sur les mises en page, consultez la page Comprendre la mise en page de Material Design 3 (M3).