Share
Dans le précédent article, j'avais présenté deux principes de conception visant les dispositifs portables, les signaux et les micro-interactions. Dans cet article, nous allons créer un exemple de projet Android Wear pour montrer comment ces principes s'appliquent dans la pratique..
Imaginez que vous êtes dans la dernière heure d'une guerre d'enchères pour un objet très convoité. La dernière chose que vous voulez, et ce qui arrive souvent, est de faire une surenchère juste avant la clôture de la candidature. Dans ce scénario, le fait de disposer d’une smartwatch présente des avantages évidents qui vous permet de surveiller facilement une telle offre et de prendre des mesures rapides sans trop déranger votre utilisateur. Dans notre exemple de projet, nous allons expliquer comment nous pouvons le réaliser sur un appareil Android Wear..
Le site marchand sur lequel nous basons notre exemple s'appelle TradeMe, l'équivalent d'eBay dans mon pays d'origine. Comme avec la majorité des services en ligne performants, TradeMe fournit une API propre et simple qui expose la majorité des fonctionnalités aux développeurs. Comme cet article concerne Android Wear, nous allons nous concentrer uniquement sur le code associé à Android Wear..
Le diagramme ci-dessous montre la logique principale de notre projet.
La majeure partie de la logique est gérée par un service, BidWatcherService, sur l’appareil jumelé, où il tire régulièrement la liste de surveillance de l’utilisateur. Pour chaque élément, le service vérifie si des modifications ont été apportées et si l'utilisateur a été surenchéri. Pour ceux qui répondent à ces critères, le service crée une notification par laquelle l'utilisateur est informé des modifications et lui fournit la possibilité de prendre facilement des mesures, par exemple en augmentant son enchère..
Le code spécifique à Android Wear ne représente que très peu de l’application globale mais, comme nous l’avons souligné dans cet article, le défi consiste à concevoir des expériences contextuelles appropriées plutôt que la mise en œuvre réelle. Bien sûr, vous pouvez créer une interface utilisateur personnalisée et complexe si vous le souhaitez..
Pour utiliser les fonctionnalités spécifiques à Android Wear, vous devez vous assurer que votre projet référence la bibliothèque de support v4. Nous commençons par obtenir une référence au gestionnaire de notifications du système lors de l'initialisation. Pour ce faire, nous utilisons le NotificationManagerCompat classe de la bibliothèque de support plutôt que la NotificationManager classe.
protected NotificationManagerCompat mNotificationManager;… mNotificationManager = NotificationManagerCompat.from (mContext);
Pour chacun des éléments de notre liste de surveillance modifiés et jugés suffisamment importants pour avertir l'utilisateur, nous créons et affichons une notification..
NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder (this) .setSmallIcon (R.drawable.small_icon) .setContentTitle (mContext.getString (R.string.title_auction_update)) .setset ContentText (item.mTitle); mNotificationManager.notify (notificationId, notificationBuilder.build ());
C'est tout. Nous sommes maintenant en mesure d'informer l'utilisateur de tout élément surveillé qui a changé. Ceci est montré dans les captures d'écran ci-dessous.
Les captures d'écran ci-dessus montrent la version émulée de notre notification sur un appareil Android Wear. La capture d'écran la plus à gauche montre un aperçu de la notification. Les captures d'écran au centre et à l'extrême droite montrent les notifications en bref.
Nous pouvons, comme le suggère la documentation Android Wear, rendre ces informations plus lisibles en ajoutant une image d'arrière-plan à la notification pour lui donner plus de contexte. Il y a deux façons d'y parvenir. Nous pouvons définir la notification BigIcon, en utilisant le setBigIcon méthode, ou en étendant la notification avec un WearableExtender objet et définissant son image d'arrière-plan. Parce que nous nous concentrons sur Android Wear, nous allons utiliser le WearableExtender classe.
Comme son nom l'indique, le WearableExtender class est une classe auxiliaire qui encapsule les extensions de notification spécifiques aux périphériques portables. Le code suivant montre comment nous ajoutons une image d'arrière-plan à nos notifications..
NotificationCompat.WearableExtender wearableExtender = new NotificationCompat.WearableExtender (); wearableExtender.setBackground (BitmapFactory.decodeResource (getResources (), R.drawable.notification_background)); NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder (this) .setSmallIcon (R.drawable.small_icon) .setContentTitle (mContext.getString (R.string.title_auction_update)) .setContentTitle (mContext.getString (R.string.title_auction_update)) .setContentTitle (item.mTitle).
Nous créons un WearableExtender objet, définissez son arrière-plan et assignez-le à la notification à l'aide du étendre méthode. La capture d'écran suivante montre la notification mise à jour.
J'ai trois articles sur ma liste de surveillance. Pour le moment, j'ai une carte distincte pour chacun des articles. Lors de la conception des notifications pour un ordinateur de poche, nous utiliserions une notification récapitulative, mais cela ne se traduirait pas bien par les périphériques Android Wear. Pour cette raison, le concept de Empiler a été présenté.
Les piles sont créées en attribuant des notifications associées au même groupe. Cela permet à l'utilisateur de les ignorer ou de les ignorer en tant que groupe ou de les développer pour gérer chaque notification individuellement. Ceci est réalisé en réglant la groupe de chaque notification en utilisant le setGroup méthode comme indiqué dans le bloc de code suivant.
NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder (this) .setSmallIcon (R.drawable.small_icon) .setContentTitle (mContext.getString (R.string.title_auction_update)) .setContentTitle (mContext.getString (R.string.title_auction_update)) .setContentTitle (item.mTal). wearableExtender);
Les captures d'écran suivantes montrent des exemples de notifications empilées et développées.
Les piles remplacent les notifications récapitulatives sur un ordinateur de poche. Les piles ne sont pas affichées sur un ordinateur de poche et vous devez donc explicitement créer une notification récapitulative pour les ordinateurs de poche. Semblable à ce que nous avons fait dans le bloc de code ci-dessus, définissez la notification groupe, en utilisant le setGroup méthode, au groupe de pile, mais définissez également le résumé du groupe sur vrai en invoquant le setGroupSummary méthode.
Dans certains cas, vous voudrez peut-être afficher plus de détails pour l'utilisateur. Cela peut être utile pour donner à l'utilisateur des informations supplémentaires sans qu'il ne soit obligé de sortir son ordinateur de poche. Android Wear a Des pages pour cette raison exacte. Les pages vous permettent d’attribuer des cartes supplémentaires à une notification afin d’exposer davantage d’informations. Celles-ci sont révélées en balayant à gauche.
Pour ajouter une page supplémentaire, nous créons simplement une nouvelle notification et l’ajoutons à notre WearableExtender objet en utilisant le ajouter une page méthode.
BigTextStyle autionDetailsPageStyle = nouvelle NotificationCompat.BigTextYle () .setBigContentTitle (mContext.getString (R.string.title_auction_details)). , item.mBidCount)); Notification detailsPageNotification = new NotificationCompat.Builder (this) .setSmallIcon (R.drawable.small_icon) .setStyle (autionDetailsPageStyle) .build (); NotificationCompat.WearableExtender wearableExtender = new NotificationCompat.WearableExtender (); wearableExtender.setBackground (BitmapFactory.decodeResource (getResources (), R.drawable.notification_background)); wearableExtender.addPage (detailsPageNotification);
Les captures d'écran suivantes montrent une notification avec deux pages. Nous fournissons maintenant à l'utilisateur des informations opportunes et pertinentes.
La dernière étape consiste à rendre cette information exploitable. Pour ce faire, nous ajoutons des actions exactement comme nous l'avions fait précédemment avec les notifications. Les deux actions que nous ajoutons permettent à l'utilisateur d'augmenter automatiquement son enchère ou de le définir explicitement..
Ajoutons d'abord une enchère automatique. L’extrait de code suivant devrait paraître familier à tout développeur Android..
Intention defaultBidIntent = new Intent (DEFAULT_BID_ACTION) .putExtra (EXTRA_WATCHLIST_ITEM, élément) .putExtra (EXTRA_NOTIFICATION_ID, notificationId); PendingIntent waitingDefaultBidIntent = PendingIntent.getBroadcast (mContext, 0, defaultBidIntent, PendingIntent.FLAG_UPDATE_CURRENT); NotificationCompat.Action defaultBidAction = new NotificationCompat.Action.Builder (R.drawable.icon_action_bid, mContext.getString (R.string.label_auto_bid), waitingDefaultBidIntent) .build (); NotificationCompat.WearableExtender wearableExtender = new NotificationCompat.WearableExtender (); wearableExtender.setBackground (BitmapFactory.decodeResource (getResources (), R.drawable.notification_background)); wearableExtender.addPage (detailsPageNotification); wearableExtender.addAction (defaultBidAction);
Les captures d'écran suivantes montrent l'action avec l'état de confirmation.
Avec la deuxième action, nous voulons permettre à l'utilisateur de définir un prix spécifique. En travaillant avec les contraintes du périphérique Android Wear, nos options sont les suivantes:
L'un des aspects attrayants d'Android Wear est son architecture et son design axés sur la voix. Cela a du sens de donner le facteur de forme et le contexte dans lesquels un appareil portable comme une montre intelligente est utilisé.
Cette mise en œuvre est similaire à la précédente, mais, outre un RemoteInput objet, nous instancions et assignons un RemoteInput objecter à l'action. le RemoteInput l'instance s'occupe du reste.
Intention customBidIntent = new Intent (CUSTOM_BID_ACTION) .putExtra (EXTRA_WATCHLIST_ITEM, élément) .putExtra (EXTRA_NOTIFICATION_ID, notificationId); PendingIntent waitingCustomBidIntent = PendingIntent.getBroadcast (mContext, 0, customBidIntent, PendingIntent.FLAG_UPDATE_CURRENT); RemoteInput remoteInput = new RemoteInput. Constructeur (EXTRA_BID_AMOUNT) .setLabel (mContext.getString (R.string.copy_specify_bid)) .build (); NotificationCompat.Action customBidAction = new NotificationCompat.Action .Builder (R.drawable.icon_action_bid, mContext.getString (R.string.label_bid), waitingCustomBidIntent) .addRemoteInput (remoteInput) .build (); NotificationCompat.WearableExtender wearableExtender = new NotificationCompat.WearableExtender (); wearableExtender.setBackground (BitmapFactory.decodeResource (getResources (), R.drawable.notification_background)); wearableExtender.addPage (detailsPageNotification); wearableExtender.addAction (defaultBidAction) .addAction (customBidAction);
le RemoteInput object prend une chaîne dans le constructeur. Cette chaine, EXTRA_BID_AMOUNT, est l'identifiant utilisé par le récepteur de diffusion lors de la récupération du résultat, comme indiqué ci-dessous.
Bundle remoteInput = RemoteInput.getResultsFromIntent (intention); if (remoteInput! = null) CharSequence inputAsCharSequence = remoteInput.getCharSequence (EXTRA_BID_AMOUNT); if (inputAsCharSequence! = null) input = inputAsCharSequence.toString ();
La capture d'écran suivante montre un exemple de RemoteInput exemple en action.
Une extension évidente à cela serait de permettre à l'utilisateur de demander explicitement une mise à jour. Pour implémenter cela, vous devez créer une activité pour le périphérique Android Wear qui écoute les commandes vocales. Une fois reçu, diffusez la demande sur le périphérique mobile couplé et terminez l'activité. Mais c'est pour une autre fois.
Ceci conclut notre exemple de projet dans lequel nous proposons désormais à l'utilisateur des informations pertinentes et exploitables, en leur fournissant le moins de perturbations possible. Comme mentionné dans l'article précédent, Android Wear vous permet d'implémenter tout ce que vous voulez, mais j'espère que cet article a montré à quel point les notifications améliorées constituent un moyen efficace d'élargir votre service aux appareils Android Wear..
Accentsconagua