Share
Nel precedente articolo, ho introdotto due principi di progettazione rivolti a indossabili, segnali e microinteractions. In questo articolo creeremo un progetto Android Wear di esempio per mostrare come questi principi si applicano nella pratica.
Immagina di essere nell'ultima ora di una guerra di offerte per un oggetto molto ambito. L'ultima cosa che vuoi, e quello che succede spesso, viene superata poco prima che l'offerta si chiuda. In questo scenario, ci sono evidenti benefici nell'avere uno smartwatch che ti consente un modo conveniente di essere in grado di monitorare tale offerta e di fare azioni tempestive senza disturbare troppo l'utente. Nel nostro esempio di esempio, vedremo come possiamo realizzarlo su un dispositivo Android Wear.
Il sito di trading su cui baseremo il nostro esempio si chiama TradeMe, l'equivalente del mio paese d'origine a eBay. Come con la maggior parte dei servizi online di successo, TradeMe fornisce un'API pulita e semplice che espone la maggior parte delle funzionalità agli sviluppatori. Poiché questo articolo riguarda Android Wear, ci concentreremo solo sul codice relativo a Android Wear.
Il diagramma di flusso sottostante mostra la logica principale del nostro progetto.
La maggior parte della logica è gestita da un servizio, BidWatcherService, sul palmare accoppiato in cui normalmente fa scorrere la lista di controllo dell'utente. Per ogni articolo, il servizio controlla se sono state apportate modifiche e se l'utente è stato superato. Per coloro che soddisfano questi criteri, il servizio crea una notifica in cui l'utente viene informato delle modifiche e ha la possibilità di agire facilmente, ad esempio aumentando l'offerta.
L'effettivo codice specifico di Android Wear tiene conto di pochissime applicazioni complessive, ma, come si spera enfatizzato in questo articolo, la sfida consiste nel progettare esperienze contestuali appropriate piuttosto che nell'effettiva implementazione. Naturalmente, se lo desideri, puoi creare un'interfaccia utente personalizzata e complessa.
Per utilizzare le funzionalità specifiche di Android Wear, è necessario assicurarsi che il proprio progetto faccia riferimento alla libreria di supporto v4. Iniziamo ottenendo un riferimento al gestore delle notifiche del sistema durante l'inizializzazione. Per fare questo, usiamo il NotificationManagerCompat classe dalla libreria di supporto piuttosto che dal NotificationManager classe.
protected NotificationManagerCompat mNotificationManager; ... mNotificationManager = NotificationManagerCompat.from (mContext);
Per ciascuno degli elementi della nostra lista di controllo che sono stati modificati e considerati sufficientemente importanti da informare l'utente, creiamo e mostriamo una notifica.
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 ());
Questo è tutto. Ora siamo in grado di notificare all'utente tutti gli articoli guardati che sono cambiati. Questo è mostrato negli screenshot qui sotto.
Le schermate sopra mostrano la versione emulata della nostra notifica su un dispositivo Android Wear. Lo screenshot più a sinistra mostra un'anteprima della notifica. Gli screenshot centrali e più a destra mostrano le notifiche a fuoco.
Come suggerito dalla documentazione di Android Wear, possiamo rendere più visibili queste informazioni aggiungendo un'immagine di sfondo alla notifica per dare più contesto. Ci sono due modi per raggiungere questo obiettivo. Possiamo impostare la notifica BigIcon, usando il setBigIcon metodo, o estendendo la notifica con a WearableExtender oggetto e impostando la sua immagine di sfondo. Poiché ci stiamo concentrando su Android Wear, utilizzeremo il WearableExtender classe.
Come suggerisce il nome, il WearableExtender class è una classe helper che include le estensioni di notifica specifiche per i dispositivi indossabili. Il seguente codice dimostra come aggiungiamo un'immagine di sfondo alle nostre notifiche.
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) .extend (wearableExtender);
Creiamo a WearableExtender oggetto, impostare lo sfondo e assegnarlo alla notifica utilizzando il estendere metodo. La seguente schermata mostra la notifica aggiornata.
Ho tre articoli sulla mia lista di controllo. Al momento, ho una carta separata per ciascuno degli articoli. Quando progettiamo le notifiche per un palmare, utilizzeremmo una notifica di riepilogo, ma questo non si traduce bene con i dispositivi Android Wear. Per questo motivo, il concetto di a Pila è stato presentato.
Gli stack vengono creati assegnando notifiche correlate allo stesso gruppo. Ciò consente all'utente di scartarli o ignorarli come gruppo o di espanderli per gestire singolarmente ciascuna notifica. Questo si ottiene impostando il gruppo di ogni notifica utilizzando il setGroup metodo come mostrato nel prossimo blocco di codice.
NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder (this) .setSmallIcon (R.drawable.small_icon) .setContentTitle (mContext.getString (R.string.title_auction_update)) .setContentText (item.mTitle) .setGroup (NOTIFICATION_GROUP_KEY) .extend ( wearableExtender);
I seguenti screenshot mostrano esempi di notifiche che vengono raggruppate ed espanse.
Le pile sostituiscono le notifiche di riepilogo su un palmare. Le pile non vengono visualizzate su un palmare e pertanto è necessario creare esplicitamente una notifica di riepilogo per i palmari. Simile a quello che abbiamo fatto nel blocco di codice sopra, impostare la notifica gruppo, usando il setGroup metodo, al gruppo di stack, ma anche impostare il riepilogo di gruppo su vero invocando il setGroupSummary metodo.
In alcuni casi, potresti voler mostrare più dettagli all'utente. Questo può essere utile per dare all'utente informazioni aggiuntive senza richiedere che estraggono il palmare. Android Wear ha pagine per questa esatta ragione. Le pagine ti consentono di assegnare carte aggiuntive a una notifica per esporre ulteriori informazioni. Questi vengono rivelati facendo scorrere verso sinistra.
Per aggiungere una pagina aggiuntiva, creiamo semplicemente una nuova notifica e la aggiungiamo alla nostra WearableExtender oggetto usando il Aggiungi pagina metodo.
BigTextStyle autionDetailsPageStyle = new NotificationCompat.BigTextStyle () .setBigContentTitle (mContext.getString (R.string.title_auction_details)) .bigText (String.format (this.getString (R.string.copy_notification_details), item.mMaxBidAmount, item.getTimeRemainingAsString () , 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);
I seguenti screenshot mostrano una notifica con due pagine. Ora forniamo all'utente informazioni tempestive e pertinenti.
Il passo finale è rendere queste informazioni fruibili. Per fare ciò, aggiungiamo azioni proprio come facevamo prima con le notifiche. Le due azioni che aggiungiamo consentono all'utente di aumentare automaticamente la propria offerta o impostare esplicitamente la propria offerta.
Aggiungiamo innanzitutto un'offerta automatica. Il seguente frammento di codice dovrebbe sembrare familiare a qualsiasi sviluppatore Android.
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);
I seguenti screenshot mostrano l'azione insieme allo stato di conferma.
Con la seconda azione, vogliamo consentire all'utente di impostare un prezzo specifico. Lavorando con i vincoli del dispositivo Android Wear le nostre opzioni sono:
Uno degli aspetti interessanti di Android Wear è la sua architettura e il design verso la voce. Questo ha senso dare il fattore di forma e il contesto in cui viene utilizzato un dispositivo indossabile come uno smartwatch.
L'implementazione di questo è simile a quanto sopra, ma, oltre a a RemoteInput oggetto, istanziamo e assegniamo a RemoteInput oggetto all'azione. Il RemoteInput istanza si prende cura del resto.
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);
Il RemoteInput oggetto prende una stringa nel costruttore. Questa stringa, EXTRA_BID_AMOUNT, è l'identificatore utilizzato dal ricevitore di trasmissione quando si recupera il risultato come mostrato di seguito.
Bundle remoteInput = RemoteInput.getResultsFromIntent (intent); if (remoteInput! = null) CharSequence inputAsCharSequence = remoteInput.getCharSequence (EXTRA_BID_AMOUNT); if (inputAsCharSequence! = null) input = inputAsCharSequence.toString ();
La seguente schermata mostra un esempio di a RemoteInput istanza in azione.
Un'ovvia estensione a questo sarebbe consentire all'utente di richiedere esplicitamente un aggiornamento. Per implementarlo, devi creare un'attività per il dispositivo Android Wear che ascolta i comandi vocali. Una volta ricevuto, trasmetti la richiesta al dispositivo mobile associato e termina l'attività. Ma questo è per un'altra volta.
Questo conclude il nostro esempio di progetto in cui ora offriamo all'utente informazioni rilevanti e utilizzabili, consegnandole a loro con interruzioni minime. Come menzionato nel precedente articolo, Android Wear ti consente di implementare tutto ciò che desideri, ma spero che questo articolo abbia mostrato come le notifiche avanzate sono un modo efficace ed efficiente per estendere il tuo servizio ai dispositivi Android Wear.
Accentsconagua