Pour créer des mises en page de widgets efficaces, commencez par identifier votre contenu principal. Votre mise en page détermine la façon dont les informations et les éléments interactifs sont organisés dans votre widget. Android propose plusieurs mises en page prédéfinies pour les barres d'outils, le texte, les widgets de type liste et grille afin de simplifier ce processus.
Texte
Les mises en page de texte sont idéales pour afficher des informations concises. Améliorez l'attrait visuel de votre widget en incluant éventuellement une image à côté du texte.
Idéal pour les titres, les mises à jour de statut, les brèves descriptions ou tout scénario dans lequel une seule ligne de texte transmet efficacement le message.
Incluez une image pour un impact visuel accru. Pour en savoir plus, consultez Points d'arrêt afin de découvrir comment adapter cette mise en page à différentes tailles d'écran.
Barres d'outils
Utilisez des mises en page de barre d'outils pour permettre aux utilisateurs d'accéder rapidement aux tâches fréquemment utilisées dans votre application, dans une mise en page flexible qui s'adapte à toutes les tailles de widget.
La mise en page de la barre d'outils de recherche est intentionnellement conçue pour attirer l'attention sur la recherche en tant qu'action principale dans la barre d'outils. Des boutons pratiques supplémentaires peuvent permettre d'accéder rapidement aux fonctions fréquemment utilisées.
Les barres d'outils présentent la marque de l'application, suivie de boutons pour les tâches les plus courantes, qui sont idéaux pour les paramètres activables/désactivables ou les liens vers des tâches. Lors du redimensionnement, les options les moins courantes peuvent être masquées au profit des actions les plus courantes. Utilisez des points d'arrêt pour ajouter un nouveau bouton cliquable de 48 dp minimum lorsqu'il y a de la place.
Listes
Utilisez des mises en page en liste pour organiser plusieurs éléments dans un format clair et facile à parcourir. C'est idéal pour les titres d'actualités, les listes de tâches ou les messages. Organisez le contenu dans une liste structurée et facile à parcourir. Choisissez entre une présentation avec ou sans conteneur en fonction de vos besoins en contenu.
Les listes de texte et d'images lisibles sont idéales pour présenter plusieurs types de contenus, comme des titres d'actualités, des playlists avec des pochettes d'album ou des messages.
La mise en page de la checklist est idéale pour afficher des tâches, en fournissant des cibles tactiles claires permettant aux utilisateurs de marquer rapidement des éléments comme terminés.
Regroupez les commandes de manière intuitive avec des listes d'actions, où les états visuels activé/désactivé fournissent un retour immédiat sur l'état des éléments.
Grille
Présentez des images dans une grille compacte, flexible et visuellement riche avec des libellés facultatifs. Utilisez des colonnes et des lignes qui s'adaptent à différentes tailles d'écran.
Créez des galeries d'images défilables et visuellement percutantes à l'aide de grilles d'images uniquement. Les lignes et les colonnes s'adaptent automatiquement à différentes tailles d'écran pour une présentation optimale.
Vous pouvez également ajouter des libellés et des descriptions textuels pour enrichir le contenu de votre grille d'images avec du contexte et des informations supplémentaires.
Exemples de code
Le tableau suivant mappe chaque mise en page canonique à son implémentation Jetpack Glance correspondante dans le dépôt GitHub des exemples de plate-forme Android.
| Mise en page canonique | Catégorie de mise en page | Exemple de fichier d'implémentation |
|---|---|---|
| Texte uniquement | Texte | LongTextAppWidget.kt |
| Textes et images | Texte | TextWithImageAppWidget.kt |
| Barre d'outils de recherche | Barres d'outils | SearchToolBarAppWidget.kt |
| Barre d'outils (Standard) | Barres d'outils | ToolBarAppWidget.kt |
| Liste de texte et d'images | Listes | ImageTextListAppWidget.kt |
| Checklist | Listes | CheckListAppWidget.kt |
| Liste des actions | Listes | ActionListAppWidget.kt |
| Image uniquement | Grille | ImageGridAppWidget.kt |
| Image et texte | Grille | ImageGridAppWidget.kt |