Présentation des widgets d'application

Les widgets sont un aspect essentiel de la personnalisation de l'écran d'accueil. Vous pouvez penser à les afficher comme « en bref » Les vues des données et fonctionnalités les plus importantes d'une application qui sont accessibles directement sur l'écran d'accueil de l'utilisateur. Les utilisateurs peuvent déplacer les widgets sur l'ensemble de l'écran d'accueil et, si possible, les redimensionner pour adapter la quantité d'informations dans le widget en fonction de ses préférences.

Cette documentation présente les différents types de widgets que vous pouvez créer et les principes de conception à suivre. Créer un widget d'application à l'aide de la vue à distance Pour les API et les mises en page XML, consultez Créer un widget simple. À créer un widget à l'aide des API de style Kotlin et Compose, consultez Jetpack Glance :

Types de widgets

Lorsque vous planifiez votre widget, réfléchissez au type de widget que vous souhaitez créer. Les widgets appartiennent généralement à l'une des catégories suivantes :

Widgets d'information

Exemple de widget météo affichant Tokyo comme la majeure partie
            nuageux, 14 degrés, et la température prévue à partir de
            Entre 16 h et 19 h
Figure 1. Un widget d'informations provenant d'une application météo.

Les widgets d'informations affichent généralement des éléments d'informations cruciaux et suivent l'évolution de ces informations au fil du temps. Exemples de widgets d'information : météo des widgets d'horloge, des widgets d'horloge ou des widgets de suivi des résultats sportifs. Informations sur les tapotements les widgets lancent généralement l'application associée et ouvrent une vue détaillée des informations sur le widget.

Widgets de collection

Les widgets de collection sont spécialisés dans l'affichage de plusieurs éléments du même type. comme une collection de photos à partir d'une application de galerie, une collection d'articles d'une application d'actualités, ou une collection d'e-mails ou de messages d'une application de communication. Les widgets des collections peuvent défiler verticalement.

Les widgets de collection se concentrent généralement sur les cas d'utilisation suivants:

  • Parcourir la collection
  • Ouvrir un élément de la collection à sa vue détaillée dans la l'application.
  • Interagir avec les éléments, par exemple les marquer comme terminés, avec prise en charge de boutons composés dans Android 12 (niveau d'API 31).

Contrôler les widgets

Un widget pour une application appelée 
« Liste légère », afficher des boutons bascule
            étiqueté « Chambre », "Cuisine" et "Salon". avec les deux premières
            bouton bascule désactivé
Figure 4. Exemple de widget de contrôle.

L'objectif principal d'un widget de contrôle est d'afficher les fonctions fréquemment utilisées que l'utilisateur puisse les déclencher depuis l'écran d'accueil sans avoir à ouvrir le l'application. Vous pouvez les considérer comme des télécommandes pour une application. Un exemple de Le widget de contrôle est un widget de contrôle de la maison qui permet aux utilisateurs d'allumer les lumières de la maison. s'active ou se désactive.

Lorsque vous interagissez avec un widget de commande, vous pouvez ouvrir une vue détaillée associée dans la l'application. Cela dépend si la fonction du widget de contrôle génère des données, comme dans le cas d'un widget Recherche.

Widgets hybrides

Application de musique générale affichant des boutons pour les pouces
            vers le bas", retour, lecture/pause, avancer et « pouce vers le haut ». L'artiste et
            la piste sont répertoriées comme "Artiste". et « Exemple de musique », respectivement.
Figure 5 : Exemple de widget d'application musicale.

Certains widgets représentent l'un des types d'informations, de collecte ou de contrôle, de nombreux widgets sont hybrides qui combinent des éléments de différents types. Par exemple, un lecteur de musique est avant tout un widget de contrôle, mais il indique également à l'utilisateur quelle est la piste. en cours de lecture, comme un widget d'information.

Lors de la planification de votre widget, concevez autour de l'un des types de base et ajoutez des éléments d'autres types selon les besoins.

Intégrer des widgets à l'Assistant Google

L'Assistant Google peut afficher n'importe quel type de widget en réponse à l'utilisateur commandes vocales. Vous pouvez configurer vos widgets pour qu'ils répondent aux des actions, qui permettent aux utilisateurs pour recevoir des réponses rapides et profiter d'applications interactives sur des surfaces avec l'Assistant, comme Android et Android Automatique. Pour en savoir plus sur le traitement des widgets pour l'Assistant, consultez Intégrer les actions dans les applications. avec Android widgets

Limites des widgets

Alors que les widgets peuvent être considérés comme des « mini-applications », certaines limites qu'il est important de comprendre avant de concevoir votre widget.

Gestes

Étant donné que les widgets se trouvent sur l'écran d'accueil, ils doivent coexister avec la navigation qui y est établie. Cela limite la prise en charge des gestes disponibles dans un widget par rapport à une application plein écran. Les applications peuvent permettre aux utilisateurs lorsque vous passez d'un écran à l'autre horizontalement, ce geste est déjà effectué sur la page d'accueil pour naviguer entre les écrans d'accueil.

Les seuls gestes disponibles pour les widgets sont l'appui et le balayage vertical.

Éléments

Compte tenu des limites des gestes disponibles pour les widgets, certains composants d'UI qui reposent sur des gestes limités ne sont pas disponibles pour les widgets. Pour obtenir liste des éléments de base compatibles et plus d'informations sur les restrictions de mise en page reportez-vous aux sections Créer une mise en page de widget et Fournir un widget flexible mises en page.

Consignes de conception

Contenu du widget

Les widgets sont un excellent moyen d'attirer un utilisateur vers votre application en "publiant" de nouveaux contenus intéressants qui y sont disponibles.

Tout comme les bandes-annonces de la page d'accueil d'un journal, les widgets regroupent concentrer les informations d'une application et fournir une connexion à des détails plus riches dans l'application. Vous pourriez dire que le widget est l'information « en-cas ». tandis que est le « repas ». Assurez-vous que votre application affiche plus de détails sur une information que celui affiché par le widget.

En plus du contenu purement informatif, envisagez de faire en sorte que votre widget fournisse des liens de navigation vers les zones fréquemment utilisées de votre application. Cela permet aux utilisateurs d'effectuer des tâches plus rapidement et d'étendre la portée fonctionnelle de l'application à l'écran d'accueil.

Voici de bons candidats pour les liens de navigation sur les widgets:

  • Fonctions génératives:fonctions qui permettent à l'utilisateur de créer de nouveaux contenus pour une application, comme la création d'un document ou d'un message.

  • Ouvrez l'application au premier niveau:en général, appuyer sur un élément d'information redirige l'utilisateur vers un écran détaillé de niveau inférieur. L'accès au niveau supérieur de votre application offre une plus grande flexibilité de navigation et peut remplacer un raccourci d'application dédié que les utilisateurs utilisent pour accéder à l'application depuis l'écran d'accueil. Utiliser l'icône de votre application pour cette fonctionnalité peut également donner à votre widget une identité claire si les données que vous afficher est ambiguë.

Redimensionnement du widget

Widget Horloge Google standard
Figure 6 : Widget Horloge Google standard.

Toucher et en maintenant un widget redimensionnable, puis en le relâchant, il est placé dans de redimensionnement. Les utilisateurs peuvent utiliser les poignées de glissement ou les coins du widget pour définir la taille de leur choix.

Le redimensionnement permet aux utilisateurs d'ajuster la hauteur et la largeur d'un widget dans les contraintes de la grille d'emplacement de l'écran d'accueil. Vous pouvez décider widget redimensionnable librement, ou limité à une taille horizontale ou verticale. des modifications. Vous n'avez pas besoin de prendre en charge le redimensionnement si votre widget est intrinsèquement est de taille fixe.

Le fait de laisser les utilisateurs redimensionner les widgets présente des avantages importants:

  • Ils peuvent ajuster la quantité d'informations qu'ils souhaitent voir sur chaque widget.
  • Ils peuvent mieux influencer la disposition des widgets et des raccourcis sur leur maison panneaux.

Planifier une stratégie de redimensionnement pour votre widget en fonction de son type créer. Les widgets de collection basés sur des listes ou des grilles sont généralement simples, car le redimensionnement du widget étend ou réduit la zone de défilement vertical. Quelle que soit la taille du widget, l'utilisateur peut faire défiler toutes les informations les différents éléments.

Les widgets d'information nécessitent une planification plus pratique, car ils ne sont pas que l'on peut faire défiler et que tout le contenu doit s'adapter à une taille donnée. Vous devez dynamiquement ajuster le contenu et la mise en page de votre widget à la taille définie par l'utilisateur via les de redimensionnement.

Dans l'exemple qui suit, l'utilisateur peut redimensionner un widget météo en trois en affichant des informations plus détaillées sur la météo du lieu actuel le widget s'agrandit.

Exemple de widget météo dans la plus petite taille de grille 3x2, indiquant le nom de l'emplacement (Tokyo), la température (14°) et le symbole indiquant un temps partiellement nuageux
Figure 7 : Exemple de widget météo dans une grille 3x2 de taille "petite".


Exemple de widget météo dans une image "medium" de 5 x 2 taille standard, y compris toutes les
            Interface utilisateur avec la taille de grille 3x2 et l'étiquette "presque nuageux" et
            températures prévues de 16h à 19h
Figure 8 : Exemple de widget météo dans une grille "medium" de 5 x 2 la taille de l'image.


Exemple de widget météo de taille "grande" 5x4, incluant l'ensemble de l'interface utilisateur des tailles de grille 3x2 et 5x2, ainsi qu'une prévision météo du mardi au vendredi
Figure 9. Exemple de widget météo dans la grille 5 x 4 "large" la taille de l'image.

Pour chaque taille de widget, déterminez la quantité d'informations sur votre application qui s'affichent. Pour les petites tailles, concentrez-vous sur les informations essentielles et ajoutez du contexte des informations à mesure que le widget s'agrandit horizontalement et verticalement.

Considérations concernant la mise en page

Il est tentant de mettre en page vos widgets en fonction des dimensions de la grille d'emplacement d'un appareil avec lequel vous développez. Cela peut être utile approximative, mais gardez à l'esprit les points suivants:

  • Planifier votre stratégie de redimensionnement de widget pour des "buckets de taille" plutôt que les dimensions variables de la grille offrent les résultats les plus fiables.
  • Le nombre, la taille et l'espacement des cellules peuvent varier considérablement d'un appareil à appareil. Il est donc très important que votre widget soit flexible peuvent accueillir plus ou moins d'espace que prévu.
  • Lorsque l'utilisateur redimensionne un widget, le système répond avec une plage de taille en dp dans laquelle votre widget peut se redessiner.
  • À partir d'Android 12, vous pouvez fournir une taille plus précise des attributs et des mises en page plus flexibles. Par exemple:

Configuration du widget par les utilisateurs

Parfois, l'utilisateur doit configurer le widget pour qu'il puisse devenir utile. Pensez à un widget de messagerie dans lequel l'utilisateur doit sélectionner le dossier de messagerie avant la boîte de réception peut s'afficher ou un widget de photos statique auquel l'utilisateur doit attribuer une image de la galerie à afficher. Les widgets Android affichent ses choix de configuration juste après que l'utilisateur ait déposé le widget sur un écran d'accueil.

Checklist de conception de widgets

  • Concentrez-vous sur de petites portions d'informations lisibles d'un coup d'œil dans votre widget. Développer sur les informations dans votre application.
  • Choisissez le type de widget adapté à vos besoins.
  • Planifiez l'adaptation du contenu de votre widget à différentes tailles.
  • Faites en sorte que la mise en page de votre widget soit indépendante de l'orientation et de l'appareil en vous assurant que la mise en page peut s'étirer et se réduire.
  • Déterminez si votre widget nécessite une configuration supplémentaire.