Semnale și microinterații pentru inteligente Hands-On

În articolul precedent, am introdus două principii de proiectare care vizează purtarea, semnalele și microinterațiile. În acest articol, vom crea un exemplu de proiect Android Wear pentru a arăta modul în care aceste principii se aplică în practică.

1. Concept

Imaginați-vă că sunteți în ultima oră a unui război de licitare pentru un articol mult râvnit. Ultimul lucru pe care îl doriți și ceea ce se întâmplă adesea este supradimensionat chiar înainte ca oferta să se închidă. În acest scenariu, există beneficii evidente în a avea un smartwatch care vă permite o modalitate convenabilă de a putea monitoriza o astfel de ofertă și de a face acțiuni la timp, fără a vă deranja prea mult pe dvs., utilizatorul. În exemplul nostru de proiect, vom trece prin modul în care putem realiza acest lucru pe un dispozitiv Android Wear.

Site-ul de tranzacționare pe care îl vom baza pe exemplul nostru se numește TradeMe, echivalentul țării mele de origine eBay. Ca și în majoritatea serviciilor online de succes, TradeMe oferă un API curat și simplu, care expune majoritatea funcționalității dezvoltatorilor. Deoarece acest articol este despre Android Wear, ne vom concentra doar pe codul legat de Android Wear.

Diagrama fluxului de mai jos prezintă principala logică a proiectului nostru.

Cea mai mare parte a logicii este gestionată de un serviciu, BidWatcherService, pe handheld-ul asociat, în cazul în care în mod curent trage în jos lista de urmărire a utilizatorului. Pentru fiecare element, serviciul verifică dacă au existat modificări și dacă utilizatorul a fost supradimensionat. Pentru cei care se potrivesc cu aceste criterii, serviciul creează o notificare prin care utilizatorul este notificat cu privire la modificări și oferă posibilitatea de a acționa cu ușurință, de exemplu, creșterea ofertei.

Actualul cod specific Android Wear reprezintă foarte puțin din aplicația generală, dar, după cum sperăm să subliniem în acest articol, provocarea constă în conceperea unor experiențe contextuale adecvate, mai degrabă decât în ​​implementarea reală. Desigur, puteți crea o interfață personalizată și complexă, dacă doriți.

2. Extindeți notificările pentru Android Wear

Pentru a utiliza funcții specifice pentru Android Wear, trebuie să vă asigurați că proiectul dvs. se referă la Biblioteca de suport v4. Începem prin a obține o referință la managerul de notificări al sistemului în timpul inițializării. Pentru a face acest lucru, folosim NotificationManagerCompat clasa de la biblioteca de suport, mai degrabă decât NotificationManager clasă.

protejat NotificationManagerCompat mNotificationManager; ... mNotificationManager = NotificationManagerCompat.from (mContext);

Pentru fiecare dintre elementele din lista noastră de vizionări care s-au modificat și au considerat suficient de importante pentru a notifica utilizatorul, vom crea și afișa o notificare.

NotificareCompat.Builder notificationBuilder = Notificare nouăCompat.Builder (aceasta) .setSmallIcon (R.drawable.small_icon) .setContentTitle (mContext.getString (R.string.title_auction_update)) .setContentText (item.mTitle); mNotificationManager.notify (notificationId, notificationBuilder.build ());

Asta e. Acum suntem în măsură să notifice utilizatorul despre orice articole urmărite care s-au schimbat. Acest lucru este afișat în capturile de ecran de mai jos.

Imaginile de ecran de mai sus arată versiunea emulată a notificării noastre pe un dispozitiv Android Wear. Imaginea de ecran din stânga arată o previzualizare a notificării. Captările de ecran din centru și din dreapta afișează focalizările.

Putem, așa cum sugerează documentația Android Wear, să facă aceste informații mai vizibile prin adăugarea unei imagini de fundal la notificare pentru a le oferi mai mult context. Există două modalități de a realiza acest lucru. Putem seta notificarea BigIcon, folosind setBigIcon , sau prin extinderea notificării cu o WearableExtender obiect și setarea imaginii de fundal. Pentru că ne concentrăm pe Android Wear, vom folosi WearableExtender clasă.

După cum sugerează și numele, WearableExtender clasa este o clasă de ajutor care împachetează extensiile de notificare specifice dispozitivelor care pot fi purtate. Următorul cod demonstrează modul în care adăugăm o imagine de fundal la notificările noastre.

NotificareCompat.WearableExtender wearableExtender = Notificare nouăCompat.WearableExtender (); portabilExtender.setBackground (BitmapFactory.decodeResource (getResources (), R.drawable.notification_background)); NotificareCompat.Builder notificationBuilder = Notificare nouăComputer.Builder (acest) .setSmallIcon (R.drawable.small_icon) .setContentTitle (mContext.getString (R.string.title_auction_update)) .setContentText (item.mTitle) .extend (wearableExtender);

Creăm a WearableExtender obiect, setați fundalul acestuia și alocați-l notificării folosind extinde metodă. Următoarea captura de ecran afișează notificarea actualizată.

Am trei articole pe lista mea de ceasuri. În prezent, am un Card separat pentru fiecare dintre ele. La proiectarea notificărilor pentru un dispozitiv handheld, am folosi o notificare sumară, dar acest lucru nu se traduce bine dispozitivelor Android Wear. Din acest motiv, conceptul de a Grămadă a fost introdus.

Stivele sunt create prin atribuirea de notificări aferente aceluiași grup. Acest lucru permite utilizatorului să le elimine sau să le ignore ca grup sau să le extindă pentru a gestiona fiecare notificare individual. Acest lucru este realizat prin setarea grup din fiecare notificare utilizând setGroup așa cum se arată în următorul bloc de coduri.

NotificareCompat.Builder notificationBuilder = Notificare nouăCompat.Builder (acest) .setSmallIcon (R.drawable.small_icon) .setContentTitle (mContext.getString (R.string.title_auction_update)) .setContentText (item.mTitle) .setGrup (NOTIFICATION_GROUP_KEY) .extend ( wearableExtender);

Următoarele capturi de ecran prezintă exemple de notificări care sunt stivuite și extinse.

Stivele reprezintă un substitut pentru notificările sumare pe handheld. Stivele nu sunt afișate pe dispozitive portabile și, prin urmare, trebuie să creați în mod explicit o notificare sumară pentru handheld-uri. Similar cu ceea ce am făcut în blocul de cod de mai sus, setați notificările grup, folosind setGroup metoda, pentru grupul de stivă, dar de asemenea setați rezumatul grupului la Adevărat invocând setGroupSummary metodă.

În unele cazuri, este posibil să doriți să afișați mai multe detalii utilizatorului. Acest lucru poate fi util pentru a oferi utilizatorului informații suplimentare fără a le cere să-și scoată mâinile. Android Wear a Pagini pentru acest motiv exact. Paginile vă permit să alocați carduri suplimentare unei notificări pentru a expune mai multe informații. Acestea sunt dezvăluite prin deplasarea spre stânga.

Pentru a adăuga o pagină suplimentară, vom crea o notificare nouă și o vom adăuga la pagina noastră WearableExtender obiect folosind adauga pagina metodă.

BigTextStyle autionDetailsPageStyle = noua NotificareCompat.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)); Notificare detaliiPageNotification = Notificare nouăCompat.Builder (acest) .setSmallIcon (R.drawable.small_icon) .setStyle (autionDetailsPageStyle) .build (); NotificareCompat.WearableExtender wearableExtender = Notificare nouăCompat.WearableExtender (); portabilExtender.setBackground (BitmapFactory.decodeResource (getResources (), R.drawable.notification_background)); wearableExtender.addPage (detailsPageNotification);

Următoarele capturi de ecran afișează o notificare cu două pagini. Acum oferim utilizatorilor informații în timp util și relevante.

Ultimul pas este ca această informație să fie acționabilă. Pentru a face acest lucru, adăugăm acțiuni la fel ca în cazul în care am făcut notificări mai devreme. Cele două acțiuni pe care le adăugăm permit utilizatorului să mărească automat suma licitată sau să își fixeze în mod explicit oferta.

Să adăugăm mai întâi o ofertă automată. Următorul fragment de cod ar trebui să pară familiar cu orice dezvoltator Android.

Intent defaultBidIntent = nou intenție (DEFAULT_BID_ACTION) .putExtra (EXTRA_WATCHLIST_ITEM, element) .putExtra (EXTRA_NOTIFICATION_ID, notificationId); PendingIntent pendingDefaultBidIntent = PendingIntent.getBroadcast (mContext, 0, implicitBidIntent, PendingIntent.FLAG_UPDATE_CURRENT); NotificareCompat.Action defaultBidAction = Notificare nouăCompat.Action.Builder (R.drawable.icon_action_bid, mContext.getString (R.string.label_auto_bid), pendingDefaultBidIntent) .build (); NotificareCompat.WearableExtender wearableExtender = Notificare nouăCompat.WearableExtender (); portabilExtender.setBackground (BitmapFactory.decodeResource (getResources (), R.drawable.notification_background)); wearableExtender.addPage (detailsPageNotification); wearableExtender.addAction (defaultBidAction);

Următoarele capturi de ecran afișează acțiunea împreună cu starea de confirmare.

Cu a doua acțiune, vrem să permitem utilizatorului să stabilească un preț specific. Lucrând cu constrângerile dispozitivului Android Wear, opțiunile noastre sunt:

  • lansați ecranul corespunzător pe dispozitivul handheld
  • oferă un control pas cu pas pe care utilizatorul îl poate utiliza pentru a crește oferta curentă
  • furnizați utilizatorului anumite opțiuni predefinite
  • permite utilizatorului să-și folosească vocea

Unul dintre aspectele atractive ale Android Wear este arhitectura și designul spre voce. Acest lucru are sens, oferind factorul de formă și contextul în care se folosește un dispozitiv care poate fi purtat ca un smartwatch.

Implementarea acestui lucru este similară celor de mai sus, dar, pe lângă a RemoteInput obiect, instanțiăm și atribuim o RemoteInput obiectează acțiunea. RemoteInput instanța are grijă de restul.

Intenție customBidIntent = intenție nouă (CUSTOM_BID_ACTION) .putExtra (EXTRA_WATCHLIST_ITEM, element) .putExtra (EXTRA_NOTIFICATION_ID, notificationId); PendingIntent pendingCustomBidIntent = PendingIntent.getBroadcast (mContext, 0, customBidIntent, PendingIntent.FLAG_UPDATE_CURRENT); RemoteInput remoteInput = nou RemoteInput .Builder (EXTRA_BID_AMOUNT) .setLabel (mContext.getString (R.string.copy_specify_bid)) .build (); NotificareCompact.Action customBidAction = nou NotificareCompat.Action .Builder (R.drawable.icon_action_bid, mContext.getString (R.string.label_bid), pendingCustomBidIntent) .addRemoteInput (remoteInput) .build (); NotificareCompat.WearableExtender wearableExtender = Notificare nouăCompat.WearableExtender (); portabilExtender.setBackground (BitmapFactory.decodeResource (getResources (), R.drawable.notification_background)); wearableExtender.addPage (detailsPageNotification); wearableExtender.addAction (defaultBidAction) .addAction (customBidAction);

RemoteInput obiect ia un șir în constructor. Acest șir, EXTRA_BID_AMOUNT, este identificatorul utilizat de receptorul de transmisie la extragerea rezultatului, după cum se arată mai jos.

Bundle remoteInput = RemoteInput.getResultsFromIntent (intenție); dacă (remoteInput! = null) CharSequence inputAsCharSequence = remoteInput.getCharSequence (EXTRA_BID_AMOUNT); dacă (inputAsCharSequence! = null) input = inputAsCharSequence.toString (); 

Următoarea imagine de ecran prezintă un exemplu de RemoteInput instanță în acțiune.

O extensie evidentă a acestui lucru ar fi să permită utilizatorului să solicite în mod explicit o actualizare. Pentru a implementa acest lucru, veți crea o activitate pentru dispozitivul Android Wear care asculta comenzi vocale. După primire, transmiteți solicitarea către dispozitivul mobil asociat și finalizați activitatea. Dar asta e pentru un alt moment.

Concluzie

Asta incheie exemplul nostru de exemplu, in care oferim utilizatorilor informatii relevante si actionabile, oferindu-le acestora cu o intrerupere minima. După cum sa menționat în articolul precedent, Android Wear vă permite să implementați orice doriți, dar sper că acest articol a arătat modul în care notificările îmbunătățite reprezintă o modalitate eficientă și eficientă de a vă extinde serviciul la dispozitive Android Wear.

Cod