Signale und Mikrointeraktionen für Smartwatches Hands-On

Im vorigen Artikel habe ich zwei Designprinzipien vorgestellt, die auf Wearables, Signale und Mikrointeraktionen abzielen. In diesem Artikel erstellen wir ein Beispielprojekt für Android Wear, um zu zeigen, wie diese Prinzipien in der Praxis angewendet werden.

1. Konzept

Stellen Sie sich vor, Sie befinden sich in der letzten Stunde eines Gebotskrieges für einen begehrten Gegenstand. Das Letzte, was Sie wollen und was oft passiert, ist, kurz vor dem Ende des Gebots zu überbieten. In diesem Szenario gibt es offensichtliche Vorteile, wenn Sie eine Smartwatch haben, mit der Sie ein solches Gebot bequem überwachen und zeitnahe Aktionen durchführen können, ohne Sie als Benutzer zu sehr zu stören. In unserem Beispielprojekt erfahren Sie, wie wir dies auf einem Android Wear-Gerät realisieren können.

Die Handelsseite, auf der wir unser Beispiel aufbauen werden, heißt TradeMe, das Äquivalent zu eBay in meinem Heimatland. Wie bei den meisten erfolgreichen Onlinediensten bietet TradeMe eine saubere und einfache API, die Entwicklern die Mehrheit der Funktionen zur Verfügung stellt. Da es sich bei diesem Artikel um Android Wear handelt, konzentrieren wir uns nur auf den Code, der sich auf Android Wear bezieht.

Das folgende Flussdiagramm zeigt die Hauptlogik unseres Projekts.

Der Großteil der Logik wird von einem Dienst behandelt, BidWatcherService, auf dem gepaarten Handheld, auf dem die Überwachungsliste des Benutzers routinemäßig angezeigt wird. Der Dienst prüft für jedes Element, ob Änderungen vorgenommen wurden und ob der Benutzer überboten wurde. Für diejenigen, die diesen Kriterien entsprechen, erstellt der Dienst eine Benachrichtigung, in der der Benutzer über die Änderungen informiert wird und die Möglichkeit erhält, auf einfache Weise Maßnahmen zu ergreifen, beispielsweise das Angebot zu erhöhen.

Der eigentliche Code von Android Wear macht nur einen geringen Teil der Gesamtanwendung aus, aber wie in diesem Artikel hoffentlich betont, besteht die Herausforderung darin, geeignete kontextuelle Erlebnisse und nicht die tatsächliche Implementierung zu entwerfen. Natürlich können Sie auch eine benutzerdefinierte und komplexe Benutzeroberfläche erstellen, wenn Sie dies wünschen.

2. Benachrichtigungen für Android Wear erweitern

Um spezifische Funktionen für Android Wear zu verwenden, müssen Sie sicherstellen, dass Ihr Projekt auf die v4-Support-Bibliothek verweist. Wir beginnen damit, während der Initialisierung einen Verweis auf den Benachrichtigungsmanager des Systems zu erhalten. Dazu verwenden wir die NotificationManagerCompat Klasse aus der Unterstützungsbibliothek statt aus der NotificationManager Klasse.

protected NotificationManagerCompat mNotificationManager;… mNotificationManager = NotificationManagerCompat.from (mContext);

Für jedes Element unserer Beobachtungsliste, das sich geändert hat und als wichtig genug angesehen wurde, um den Benutzer zu benachrichtigen, erstellen und zeigen wir eine Benachrichtigung an.

NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder (this) .setSmallIcon (R.drawable.small_icon) .setContentTitle (mContext.getString (R.string.title_auction_update)) .setContentText (item.mTitle); mNotificationManager.notify (notificationId, notificationBuilder.build ());

Das ist es. Wir können den Benutzer jetzt über alle beobachteten Elemente informieren, die sich geändert haben. Dies ist in den folgenden Abbildungen dargestellt.

Die obigen Screenshots zeigen die emulierte Version unserer Benachrichtigung auf einem Android Wear-Gerät. Der linke Screenshot zeigt eine Vorschau der Benachrichtigung. Die Screenshots in der Mitte und ganz rechts zeigen Benachrichtigungen im Fokus.

Wir können, wie die Dokumentation von Android Wear vorschlägt, diese Informationen strahlender machen, indem wir der Benachrichtigung ein Hintergrundbild hinzufügen, um mehr Kontext zu schaffen. Es gibt zwei Möglichkeiten, dies zu erreichen. Wir können die Benachrichtigung einstellen BigIcon, Verwendung der setBigIcon oder mit einer Erweiterung der Benachrichtigung WearableExtender Objekt und Einstellung des Hintergrundbildes. Da wir uns auf Android Wear konzentrieren, verwenden wir die WearableExtender Klasse.

Wie der Name schon sagt, die WearableExtender class ist eine Hilfsklasse, in der die Benachrichtigungserweiterungen für tragbare Geräte zusammengefasst werden. Der folgende Code veranschaulicht, wie wir unseren Benachrichtigungen ein Hintergrundbild hinzufügen.

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)) .setContentText (item.mTitle).

Wir schaffen ein WearableExtender setzen Sie den Hintergrund und ordnen Sie es der Benachrichtigung über das Symbol zu erweitern Methode. Der folgende Screenshot zeigt die aktualisierte Benachrichtigung.

Ich habe drei Artikel auf meiner Beobachtungsliste. Im Moment habe ich für jeden Artikel eine eigene Karte. Beim Entwerfen von Benachrichtigungen für einen Handheld würden wir eine zusammenfassende Benachrichtigung verwenden, was sich jedoch nicht gut auf Android Wear-Geräte überträgt. Aus diesem Grund ist das Konzept von a Stapel wurde vorgestellt.

Stapel werden erstellt, indem verwandte Benachrichtigungen derselben Gruppe zugewiesen werden. Auf diese Weise kann der Benutzer sie als Gruppe löschen oder ignorieren oder sie erweitern, um jede Benachrichtigung einzeln zu behandeln. Dies wird durch die Einstellung von erreicht Gruppe von jeder Benachrichtigung mit der setGroup Methode wie im nächsten Codeblock gezeigt.

NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder (this) .setSmallIcon (R.drawable.small_icon) .setContentTitle (mContext.getString (R.string.title_auction_update)) .setContentText (item.mTitle). WearableExtender);

Die folgenden Screenshots zeigen Beispiele für Benachrichtigungen, die gestapelt und erweitert werden.

Stapel sind ein Ersatz für zusammenfassende Benachrichtigungen auf einem Handheld. Stacks werden nicht auf einem Handheld angezeigt. Sie müssen daher explizit eine Zusammenfassungsbenachrichtigung für Handhelds erstellen. Setzen Sie die Benachrichtigung ähnlich wie in dem obigen Codeblock Gruppe, Verwendung der setGroup Methode, zur Stack-Gruppe, aber auch Gruppenzusammenfassung auf setzen wahr durch Aufruf der setGroupSummary Methode.

In einigen Fällen möchten Sie dem Benutzer möglicherweise mehr Details anzeigen. Dies kann hilfreich sein, um dem Benutzer zusätzliche Informationen zu geben, ohne dass er den Handheld herausziehen muss. Android Wear hat Seiten aus genau diesem grund. Mit Pages können Sie einer Benachrichtigung zusätzliche Karten zuweisen, um weitere Informationen anzuzeigen. Diese werden durch Wischen nach links sichtbar.

Um eine zusätzliche Seite hinzuzufügen, erstellen wir einfach eine neue Benachrichtigung und fügen sie unserer hinzu WearableExtender Objekt mit der Seite hinzufügen Methode.

BigTextStyle autionDetailsPageStyle = new NotificationCompat.BigTextStyle () .setBigContentTitle (mRext.getString (R.string.title_auction_details)). .BigText (String.format (this.getString (R.string.copy_notification_name), item. item.mBidCount)); BenachrichtigungsdetailsPageNotification = 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);

Die folgenden Screenshots zeigen eine Benachrichtigung mit zwei Seiten. Wir stellen dem Benutzer jetzt aktuelle und relevante Informationen zur Verfügung.

Der letzte Schritt besteht darin, diese Informationen umsetzbar zu machen. Dazu fügen wir Aktionen hinzu, wie wir es bereits bei Benachrichtigungen gemacht haben. Durch die beiden von uns hinzugefügten Aktionen kann der Benutzer sein Gebot automatisch erhöhen oder sein Gebot explizit festlegen.

Fügen wir zunächst ein automatisches Gebot hinzu. Das folgende Code-Snippet sollte jedem Android-Entwickler bekannt sein.

Intent defaultBidIntent = new Intent (DEFAULT_BID_ACTION) .putExtra (EXTRA_WATCHLIST_ITEM, item) .putExtra (EXTRA_NOTIFICATION_ID, notificationId); PendingIntent pendingDefaultBidIntent = 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), pendingDefaultBidIntent) .build (); NotificationCompat.WearableExtender wearableExtender = new NotificationCompat.WearableExtender (); wearableExtender.setBackground (BitmapFactory.decodeResource (getResources (), R.drawable.notification_background)); wearableExtender.addPage (detailsPageNotification); wearableExtender.addAction (defaultBidAction);

Die folgenden Screenshots zeigen die Aktion zusammen mit dem Bestätigungsstatus.

Mit der zweiten Aktion möchten wir dem Benutzer ermöglichen, einen bestimmten Preis festzulegen. Wenn Sie mit den Einschränkungen des Android Wear-Geräts arbeiten, stehen Ihnen folgende Optionen zur Verfügung:

  • Starten Sie den entsprechenden Bildschirm auf dem Handheld
  • Stellen Sie eine Stepper-Steuerung bereit, mit der der Benutzer das aktuelle Gebot erhöhen kann
  • stellen Sie dem Benutzer einige vordefinierte Optionen zur Verfügung
  • Erlauben Sie dem Benutzer, seine Stimme zu verwenden

Ein attraktiver Aspekt von Android Wear ist die Architektur und das Design der Stimme. Dies ist sinnvoll, um den Formfaktor und den Kontext anzugeben, in dem ein tragbares Gerät wie eine Smartwatch verwendet wird.

Die Implementierung ist ähnlich wie oben, jedoch zusätzlich zu a RemoteInput Objekt, wir instanziieren und vergeben eine RemoteInput Einwände gegen die Aktion. Das RemoteInput Den Rest erledigt die Instanz.

Intent customBidIntent = new Intent (CUSTOM_BID_ACTION) .putExtra (EXTRA_WATCHLIST_ITEM, item) .putExtra (EXTRA_NOTIFICATION_ID, notificationId); PendingIntent pendingCustomBidIntent = PendingIntent.getBroadcast (mContext, 0, customBidIntent, PendingIntent.FLAG_UPDATE_CURRENT); RemoteInput remoteInput = new RemoteInput .Builder (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), pendingCustomBidIntent) .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);

Das RemoteInput object nimmt einen String im Konstruktor an. Diese Zeichenfolge, EXTRA_BID_AMOUNT, ist die Kennung, die vom Rundfunkempfänger beim Abrufen des Ergebnisses verwendet wird (siehe unten).

Bundle remoteInput = RemoteInput.getResultsFromIntent (intent); if (remoteInput! = null) CharSequence inputAsCharSequence = remoteInput.getCharSequence (EXTRA_BID_AMOUNT); if (inputAsCharSequence! = null) input = inputAsCharSequence.toString (); 

Der folgende Screenshot zeigt ein Beispiel von a RemoteInput Instanz in Aktion.

Eine naheliegende Erweiterung wäre, wenn der Benutzer explizit ein Update anfordern kann. Um dies zu implementieren, erstellen Sie eine Aktivität für das Android Wear-Gerät, die auf Sprachbefehle wartet. Senden Sie nach dem Empfang die Anfrage an das gekoppelte mobile Gerät und beenden Sie die Aktivität. Aber das ist ein anderes Mal.

Fazit

Damit ist unser Beispielprojekt abgeschlossen, in dem wir dem Benutzer jetzt relevante und umsetzbare Informationen zur Verfügung stellen, die er mit minimaler Unterbrechung zur Verfügung stellt. Wie bereits im vorigen Artikel erwähnt, können Sie mit Android Wear alles implementieren, was Sie möchten. Ich hoffe jedoch, dass dieser Artikel gezeigt hat, wie erweiterte Benachrichtigungen Ihren Dienst auf Android Wear-Geräte effizient und effektiv ausweiten können.