Les mises en page standards sur grand écran sont éprouvées et polyvalentes. Elles offrent une expérience utilisateur optimale sur les appareils à grand écran.
Ces mises en page sont responsives et adaptatives. Elles sont compatibles avec les petits écrans de téléphone, les tablettes, les appareils pliables et les appareils ChromeOS. Inspirées des consignes Material Design, ces mises en page sont à la fois esthétiques et fonctionnelles.
Le framework Android inclut des composants spécialisés qui permettent d'implémenter ces mises en page de manière simple et fiable, à l'aide de vues ou de Jetpack Compose.
Les mises en page standards permettent de créer des interfaces utilisateur attrayantes et qui favorisent la productivité, ce qui est la base d'une application de qualité.
Si vous connaissez déjà les mises en page standards sur grand écran, mais que vous ne savez pas quelles API Android utiliser pour votre application, passez à la section Applicabilité ci-dessous pour savoir quelle mise en page est adaptée aux cas d'utilisation de votre application.
Conceptions UX pour les écrans de grande taille
Découvrez toutes les possibilités offertes par votre application sur les grands écrans.
Visitez la galerie pour découvrir une sélection de mises en page adaptées aux écrans de grande taille.
Visite guidée
Liste et vue détaillée
Cette mise en page permet aux utilisateurs d'explorer une liste d'éléments ainsi que des informations descriptives, explicatives ou complémentaires sur ces derniers sous forme de vue détaillée.
La mise en page divise la fenêtre de l'application en deux volets côte à côte : un pour la liste et un pour la vue détaillée. Les utilisateurs doivent sélectionner un élément dans la liste pour en afficher le détail. Le contenu supplémentaire de la vue détaillée est généré à l'aide de liens profonds.
Les écrans larges (voir les classes de taille de fenêtre) affichent en même temps la liste et la vue détaillée. Quand l'utilisateur sélectionne un élément dans la liste, la vue détaillée est mise à jour avec le détail de cet élément.
Les petits et moyens écrans affichent soit la liste, soit la vue détaillée, selon ce que l'utilisateur est en train de faire. Si la liste est affichée au départ et que l'utilisateur sélectionne un élément, la vue détaillée de cet élément s'affichera à la place de la liste. Lorsque seule la vue détaillée est visible, l'utilisateur peut appuyer sur le bouton "Retour" pour afficher de nouveau la liste.
Les changements de configuration, tels que les changements d'orientation de l'appareil ou de la taille de fenêtre de l'application, peuvent modifier la classe de taille de la fenêtre de l'écran. Une mise en page de type "Liste et vue détaillée" se comporte en conséquence, en préservant l'état de l'application :
- Si un grand écran affiche au départ à la fois la liste et la vue détaillée, puis que cet écran est rétréci et ne fait plus qu'une taille moyenne ou petite, la vue détaillée restera visible tandis que la liste sera masquée.
- Si un petit ou moyen écran n'affiche au départ que la vue détaillée, puis que cet écran est élargi, la liste et la vue détaillée seront affichées. De plus, l'élément sélectionné dans la liste sera mis en avant.
- Si un petit ou moyen écran n'affiche au départ que la liste, puis que cet écran est élargi, la liste et un espace réservé pour la vue détaillée seront affichés.
La mise en page "Liste et vue détaillée" est idéale pour les applications de messagerie, les gestionnaires de contacts, les explorateurs de fichiers et toute application dont le contenu peut être organisé sous la forme d'une liste d'éléments et d'une vue détaillée avec des informations supplémentaires.
Implémentation
Vous pouvez créer une mise en page de type "Liste et vue détaillée" avec différentes technologies, y compris Compose, des vues et l'intégration d'activités (pour les anciennes applications). Consultez la section Applicabilité ci-dessous pour déterminer la technologie la plus adaptée à votre application.
Compose
Le paradigme déclaratif de Compose est compatible avec la logique de classe de taille de fenêtre qui détermine si les volets de liste et de vue détaillée peuvent être affichés en même temps (lorsque la largeur de la classe de taille de fenêtre est suffisamment grande) ou uniquement la liste ou le volet de détails (lorsque la largeur de la classe de taille de fenêtre est moyenne ou petite).
Pour garantir un flux de données unidirectionnel, hissez tous les états, y compris la classe de taille de fenêtre actuelle et les détails de l'élément actuellement sélectionné, afin que tous les composables aient accès aux données et puissent s'afficher correctement.
Lorsque vous affichez uniquement la vue détaillée sur des fenêtres de petite taille, ajoutez un BackHandler pour supprimer le volet Détails et afficher uniquement le volet Liste. BackHandler ne fait pas partie de la navigation globale de l'application, car le gestionnaire dépend de la classe de taille de fenêtre et de l'état de détail sélectionné.
Pour obtenir un exemple d'implémentation, consultez l'exemple Mise en page de type "Liste et vue détaillée" avec Compose.
Vues et fragments
La bibliothèque SlidingPaneLayout est conçue pour faciliter l'implémentation d'une mise en page de type "Liste et vue détaillée" à partir de vues ou de fragments.
Tout d'abord, déclarez un SlidingPaneLayout comme élément racine de votre mise en page XML. Ajoutez ensuite les deux éléments enfants (vues ou fragments) qui représentent la liste et le contenu détaillé.
Implémentez une méthodologie de communication pour transmettre les données entre les vues ou les fragments de la mise en page. ViewModel est recommandé, car il peut stocker la logique métier et survivre aux changements de configuration.
SlidingPaneLayout détermine si la liste et la vue détaillée doivent être affichées ensemble ou individuellement. Dans une fenêtre disposant d'une largeur suffisante pour accueillir les deux, la liste et la vue détaillée s'affichent côte à côte. Si l'espace est insuffisant, la liste ou la vue détaillée s'affiche, en fonction de ce que l'utilisateur est en train de faire.
Pour obtenir un exemple de mise en œuvre, consultez l'exemple Mise en page de type "Liste et vue détaillée" avec des vues.
Intégration d'activités
Utilisez l'intégration d'activités pour permettre aux anciennes applications multi-activités d'afficher deux activités côte à côte sur le même écran ou de les empiler les unes sur les autres. Si votre application implémente la liste et la vue détaillée d'une mise en page "Liste et vue détaillée" dans des activités distinctes, l'intégration d'activités vous permet de créer facilement une mise en page de ce type avec peu de, voire aucune refactorisation du code.
Implémentez l'intégration d'activités en spécifiant un fractionnement de la fenêtre de tâche à l'aide d'un fichier de configuration XML. Le fractionnement distingue l'activité principale, qui en est à l'origine, de l'activité secondaire. Spécifiez une largeur d'écran minimale pour le fractionnement à l'aide des points d'arrêt de classe de taille de fenêtre. Lorsque la largeur d'écran est inférieure au point d'arrêt minimal, les activités sont affichées les unes sur les autres. Par exemple, si la largeur d'écran minimale est de 600 dp, les activités s'afficheront l'une au-dessus de l'autre sur les écrans compacts, mais côte à côte sur les écrans moyens et grands.
L'intégration d'activités est compatible avec Android 12L (niveau d'API 32) ou version ultérieure, mais peut également être disponible à des niveaux d'API inférieurs si les fabricants des appareils l'ont configurée. Lorsque l'intégration d'activités n'est pas disponible sur un appareil, la solution de remplacement consiste à afficher soit la liste, soit la vue détaillée dans l'intégralité de la fenêtre d'application, selon ce que l'utilisateur est en train de faire.
Pour en savoir plus, consultez Intégration d'activités.
Pour obtenir un exemple d'implémentation, consultez l'exemple Mise en page de type "Liste et vue détaillée" avec intégration d'activités.
Flux
Une mise en page de type "Flux" organise des éléments de contenu équivalents dans une grille configurable afin d'afficher rapidement et facilement une grande quantité de contenu.
La taille et la position établissent les relations entre les éléments de contenu.
Pour créer des groupes de contenu, vous devez créer des éléments de la même taille et les positionner ensemble. Vous pouvez attirer l'attention sur certains éléments en les créant plus grands que ceux qui se trouvent à côté.
Les cartes et les listes sont des composants courants des mises en page de type "Flux".
Une mise en page de type "Flux" est compatible avec presque tous les formats d'écran, car la grille peut occuper une ou plusieurs colonnes selon les besoins, et l'utilisateur peut faire défiler le contenu.
Cette mise en page est particulièrement adaptée aux applications d'actualités et de réseaux sociaux.
Implémentation
Compose
Une mise en page de type "Flux" est constituée d'un grand nombre d'éléments de contenu dans un conteneur à défilement vertical disposé dans une grille. Les listes "lazy" permettent d'afficher efficacement un grand nombre d'éléments dans des colonnes ou des lignes. Les grilles "lazy" permettent d'afficher les éléments dans des grilles, et sont compatibles avec la configuration de la taille et du chevauchement des éléments.
Configurez les colonnes de la grille en fonction de l'espace disponible à l'écran pour définir la largeur minimale autorisée des éléments de la grille. Lorsque vous définissez des éléments de grille, vous pouvez faire en sorte que certains chevauchent plusieurs colonnes afin de les mettre en valeur.
Pour les en-têtes de section, les séparateurs ou d'autres éléments destinés à occuper toute la largeur, utilisez maxLineSpan.
Sur les petits écrans où l'espace est insuffisant pour afficher plusieurs colonnes, LazyVerticalGrid se comporte comme LazyColumn.
Pour obtenir un exemple d'implémentation, consultez l'exemple Mise en page de type "Flux" avec Compose.
Vues et fragments
Une RecyclerView permet d'afficher efficacement un grand nombre d'éléments dans une seule colonne. Un GridLayoutManager présente les éléments dans une grille, ce qui permet de configurer la taille des éléments et leur chevauchement.
Configurez les colonnes de la grille en fonction de la taille disponible à l'écran pour définir la largeur minimale autorisée des éléments.
Vous pouvez remplacer la stratégie de chevauchement GridLayoutManager par défaut (soit une colonne par élément) en créant un élément SpanSizeLookup personnalisé. Ajustez le chevauchement pour faire ressortir certains éléments.
Pour les écrans de petite taille qui ne peuvent afficher qu'une seule colonne, utilisez LinearLayoutManager au lieu de GridLayoutManager.
Pour un exemple d'implémentation, consultez l'exemple Mise en page de type "Flux" avec des vues.
Volet secondaire
La mise en page de type "Volet secondaire" organise le contenu de l'application en deux zones d'affichage : une principale et une secondaire.
La zone d'affichage principale occupe la majeure partie de la fenêtre de l'application (généralement environ les deux tiers) et contient le contenu principal. La zone d'affichage secondaire est un volet qui occupe le reste de la fenêtre de l'application et qui vient en renfort du contenu principal.
Cette mise en page convient aux grands écrans (voir les classes de taille de fenêtre) en mode paysage. Elle fonctionne également sur les petits et moyens écrans à condition que le contenu puisse s'adapter à des espaces plus étroits, ou si le contenu supplémentaire peut d'abord être caché dans une bottom sheet ou un espace latéral accessible via une commande, comme un menu ou un bouton.
Cette mise en page diffère de la mise en page "Liste et vue détaillée" à cause de la relation entre le contenu principal et le contenu secondaire. Le contenu du volet secondaire n'a de sens qu'en relation avec le contenu principal. Par exemple, un volet secondaire pour un outil ne peut pas être utilisé seul. En revanche, le contenu supplémentaire qui se trouve dans le volet des détails d'une mise en page "Liste et vue détaillée" est utile même sans le contenu principal (par exemple la description d'un produit sélectionné dans une liste).
Voici quelques cas d'utilisation du volet secondaire :
- Applications de productivité : document ou feuille de calcul en contenu principal, avec les commentaires du relecteur dans un volet secondaire
- Applications multimédias : vidéo en streaming en contenu principal, et liste de vidéos similaires dans un panneau secondaire ; description d'un album de musique en contenu principal, et playlist dans un volet secondaire
- Applications de recherche et de documentation : formulaire de saisie de requête en contenu principal, résultats dans un volet secondaire
Implémentation
Compose
Compose est compatible avec la logique de classe de taille de fenêtre, ce qui vous permet de déterminer si le contenu principal et le contenu secondaire peuvent être affichés en même temps, ou si vous devez placer le contenu secondaire ailleurs.
Hissez tous les états, y compris la classe de taille de fenêtre actuelle et les informations liées aux données dans le contenu principal et le contenu complémentaire.
Pour les écrans de petite taille, placez le contenu secondaire sous le contenu principal ou dans une bottom sheet. Pour les moyens et grands écrans, positionnez le contenu secondaire à côté du contenu principal, en le redimensionnant selon l'importance du contenu et l'espace disponible. Sur les écrans moyens, divisez l'espace d'affichage de manière égale entre le contenu principal et le contenu secondaire. Sur les écrans plus grands, allouez 70 % de l'espace au contenu principal et 30 % au contenu secondaire.
Pour obtenir un exemple d'implémentation, consultez l'exemple Volet secondaire avec Compose.
Vues et fragments
Vous pouvez implémenter la mise en page d'un volet secondaire à l'aide d'un helper comme LinearLayout ou ConstraintLayout. Définissez les classes de taille de fenêtre qui répartissent l'espace horizontal en trois catégories : petit écran (< 600 dp), écran moyen (>= 600 dp) et grand écran (>= 840 dp).
Pour chaque classe de taille de fenêtre, définissez les mises en page comme suit :
- Petit écran : dans le dossier de ressources d'application
layout, placez le contenu qui affiche le volet secondaire sous le contenu principal ou dans une bottom sheet. - Écran moyen : dans le dossier
layout-w600dp, fournissez le contenu du volet secondaire. Ce volet s'affichera côte à côte avec le contenu principal, chacun utilisant la moitié de la largeur disponible. - Grand écran : dans le dossier
layout-w840dp, incluez le contenu du volet secondaire. Ce volet s'affichera côte à côte avec le contenu principal, à raison de 30 % et 70 % de la largeur disponible, respectivement.
Utilisez un ViewModel pour la communication entre le contenu principal et le volet secondaire, que ce soit en utilisant des vues, des fragments ou une combinaison des deux.
Pour obtenir des exemples d'implémentation, consultez les exemples suivants :
Applicabilité
Les mises en page standards permettent de présenter le contenu de plusieurs manières pour en faciliter l'accès et l'exploration. L'organigramme suivant vous permet de déterminer la mise en page et la stratégie d'implémentation les plus adaptées aux cas d'utilisation de votre application.
Pour obtenir des exemples de mises en page standards mises en œuvre dans différents types d'applications, consultez la galerie sur grand écran.
Ressources supplémentaires
- Liste et vue détaillée
- Volet secondaire
- Flux
- Material Design — Mises en page standards
- Adopter des mises en page responsives pour votre UI
- Navigation pour les interfaces utilisateur responsives