Signals og Microinteractions for Smartwatches: Hands-On
23
Del
6
Del
Dette Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I forrige artikkel, har jeg introdusert to designprinsipper rettet mot Wearables, signaler og microinteractions. I denne artikkelen vil vi lage et eksempel Android Wear prosjekt for å vise hvordan disse prinsippene gjelder i praksis.

1
Concept

. Forestill deg at du i den siste timen av en budkrig for en ettertraktet element. Det siste du ønsker, og det som ofte skjer, blir overbydd rett før budet stenger. I dette scenariet, det er åpenbare fordeler i å ha en Smartwatch som tillater deg en praktisk måte å være i stand til å overvåke et slikt bud og foreta rettidig handlinger uten å forstyrre deg, brukeren, for mye. I vårt eksempel prosjektet, vil vi gå gjennom hvordan vi kan realisere dette på en Android Wear-enhet.

Handels stedet vi skal basere vårt eksempel på kalles TradeMe, mitt hjemland motstykke til eBay. Som med de fleste vellykkede elektroniske tjenester, gir TradeMe en ren og enkel API som eksponerer de fleste av funksjonaliteten til utviklere. Fordi denne artikkelen handler om Android Wear, vi vil være å fokusere bare på koden relatert til Android Wear.

Flytdiagrammet nedenfor viser hoved logikken i vårt prosjekt.

Hovedtyngden av logikk håndteres av en tjeneste, BidWatcherService, på den sammenkoblede håndholdt hvor det trekker rutinemessig ned brukerens overvåkingsliste. For hvert element, service sjekker om det har vært noen endringer, og hvis brukeren har blitt overbydd. For de som passer disse kriteriene, skaper tjenesten en melding der brukeren blir varslet om endringene og gitt mulighet til enkelt å iverksette tiltak, for eksempel å øke sitt bud.

Den faktiske Android Wear spesifikk kode står for svært lite av den samlede søknaden, men som forhåpentligvis understreket i denne artikkelen, er utfordringen i å utforme passende kontekstuelle erfaringer snarere enn den faktiske gjennomføringen. Selvfølgelig kan du opprette en tilpasset og komplekse brukergrensesnitt hvis du ønsker det.

2. Strekker Varsler for Android Wear

Hvis du vil bruke funksjoner som er spesifikke for Android Wear, må du sikre at prosjektet er å registrere den v4 Support Library. Vi starter med å skaffe en henvisning til systemets varslings leder under initialisering. For å gjøre dette, bruker vi NotificationManagerCompat klasse fra støtten biblioteket i stedet for NotificationManager klassen
beskyttet NotificationManagerCompat mNotificationManager;. ... MNotificationManager = NotificationManagerCompat.from (mContext);

For hver av våre vaktlisteelementer som har endret, og anses som viktig nok til å varsle brukeren, skaper vi og vise en melding.
NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder (denne) .setSmallIcon (R.drawable.small_icon) .setContentTitle (mContext.getString (R.string.title_auction_update)) .setContentText (item.mTitle); mNotificationManager.notify (notificationId, notificationBuilder.build ());

Det var det. Vi er nå i stand til å varsle brukeren om eventuelle overvåkningslista som er endret. Dette er vist i skjermbildene nedenfor.

De ovennevnte skjermbilder viser emulert versjonen av vår varsling på en Android Wear-enhet. Lengst til venstre skjermbilde viser en forhåndsvisning av meldingen. Senteret og lengst til høyre skjerm vise varsler i fokus.

Vi kan, som Android Wear dokumentasjon antyder, gjøre denne informasjonen mer glanceable ved å legge til et bakgrunnsbilde til meldingen å gi det mer sammenheng. Det er to måter å oppnå dette. Vi kan sette varselet er BigIcon, ved hjelp av setBigIcon metoden eller ved å utvide varslings med en WearableExtender objekt og sette sin bakgrunnsbilde. Fordi vi fokuserer på Android Wear, vil vi bruke den WearableExtender klassen.

Som navnet antyder, er WearableExtender klassen en hjelper klasse som brytes opp varslings utvidelser som er spesifikke for bærbare enheter. . Følgende kode viser hvordan vi legger til et bakgrunnsbilde til våre varslinger
NotificationCompat.WearableExtender wearableExtender = new NotificationCompat.WearableExtender (); wearableExtender.setBackground (BitmapFactory.decodeResource (getResources (), R.drawable.notification_background)); NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder (denne) .setSmallIcon (R.drawable.small_icon) .setContentTitle (mContext.getString (R.string.title_auction_update)) .setContentText (item.mTitle) .extend (wearableExtender);

Vi skaper en WearableExtender objekt, setter sin bakgrunn, og tilordne den til varsling ved hjelp av forlenge metoden. Følgende skjermbilde viser oppdatert varsel.

Jeg har tre elementer på min observasjonsliste. For øyeblikket har jeg et eget kort for hvert av elementene. Når du utformer varsler for en håndholdt, ville vi bruke en oppsummering varsel, men dette ikke oversette godt til Android-Wear-enheter. Av denne grunn, konseptet med en Stable
ble innført.

Stakk er skapt ved å tildele relaterte meldinger til den samme gruppen. Dette gjør det mulig for brukeren å forkaste eller ignorere dem som en gruppe eller utvide dem til å håndtere hver varslings individuelt. Dette oppnås ved å sette gruppen av hver varslings bruke setGroup metoden som vist i neste kodeblokken.
NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder (denne) .setSmallIcon (R.drawable.small_icon). setContentTitle (mContext.getString (R.string.title_auction_update)) .setContentText (item.mTitle) .setGroup (NOTIFICATION_GROUP_KEY) .extend (wearableExtender);.

Følgende skjermbilder viser eksempler på varslinger blir stablet og utvidet
< p> Stacks er en erstatning for sammendrag varsler på en håndholdt. Stabler vises ikke på en håndholdt, og du trenger derfor å eksplisitt lage et sammendrag varsling for håndholdte. I likhet med hva vi gjorde i koden ovenfor blokken, sette varslings gruppe, bruker setGroup metoden, å stabelen gruppen, men også satt gruppe oppsummering til virkelighet ved å påberope seg setGroupSummary metoden.

I noen tilfeller, du kan være lurt å se mer detaljer for brukeren. Dette kan være nyttig for å gi brukeren tilleggsinformasjon uten at de trenger å trekke ut sine håndholdte. Android Wear har Sider
for denne eksakte årsaken. -Sidene kan du tildele flere kort til en varsling for å eksponere mer informasjon. Disse er avslørt av dra fingeren mot høyre.

For å legge til en ekstra side, oppretter vi en ny melding og legge den til vår WearableExtender objekt med addPage metoden.
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)); Varsling detailsPageNotification = new NotificationCompat.Builder (denne) .setSmallIcon (R.drawable.small_icon) .setStyle (autionDetailsPageStyle) att bygga (); NotificationCompat.WearableExtender wearableExtender = new NotificationCompat.WearableExtender (); wearableExtender.setBackground (BitmapFactory.decodeResource (getResources (), R.drawable.notification_background)); wearableExtender.addPage (detailsPageNotification);

Følgende skjermbilder viser en melding med to sider. Vi er nå å gi brukeren med tidsriktig og relevant informasjon.

Det siste trinnet er å gjøre denne informasjonen praktisk. For å gjøre dette, legger vi til handlinger, akkurat som vi gjorde med varslinger tidligere. De to handlingene legger vi tillater brukeren å automatisk øke sitt bud eller eksplisitt satt sine bud.

La oss først legge et automatisk bud. Følgende kodebiten bør være kjent for alle Android-utvikler
Intent defaultBidIntent = new Intent (DEFAULT_BID_ACTION) .putExtra (EXTRA_WATCHLIST_ITEM, element) .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) att bygga (); NotificationCompat.WearableExtender wearableExtender = ny NotificationCompat.WearableExtender (); wearableExtender.setBackground (BitmapFactory.decodeResource (getResources () R.drawable.notification_background));wearableExtender.addPage(detailsPageNotification);wearableExtender.addAction(defaultBidAction);

The Følgende skjermbilder viser handlingen sammen med bekreftelse staten

Med andre tiltak, ønsker vi å gjøre det mulig for brukeren å sette en bestemt pris Arbeide med begrensningene i Android Wear enhet våre alternativer er:..


lansere den aktuelle skjermen på den håndholdte

gi en stepper kontrollere at brukeren kan bruke til å øke den gjeldende bud

gi brukeren noen forhåndsdefinerte alternativer

tillate brukeren å bruke sin stemme

En av de attraktive aspekter av Android Wear er dens arkitektur og design mot stemmen. Det er fornuftig å gi formfaktor og konteksten som en bærbar enhet som en Smartwatch blir brukt.

Implementering av denne er lik den ovenfor, men i tillegg til en RemoteInput objekt, vi instantiate og tildele en RemoteInput objekt til handling. Den RemoteInput eksempel tar seg av resten.

Intent customBidIntent = new Intent (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 = new RemoteInput .Builder (EXTRA_BID_AMOUNT) .setLabel (mContext.getString (R.string.copy_specify_bid)) att bygga (); NotificationCompat.Action customBidAction = new NotificationCompat.Action .Builder (R.drawable.icon_action_bid, mContext.getString (R.string.label_bid) , pendingCustomBidIntent) .addRemoteInput (remoteInput) att bygga (); NotificationCompat.WearableExtender wearableExtender = new NotificationCompat.WearableExtender (); wearableExtender.setBackground (BitmapFactory.decodeResource (getResources () R.drawable.notification_background));wearableExtender.addPage(detailsPageNotification);wearableExtender.addAction(defaultBidAction).addAction(customBidAction);

The . RemoteInput objektet tar en streng i konstruktøren Denne strengen, EXTRA_BID_AMOUNT, er identifikatoren brukes av kringkastingsmottaker når du henter resultatet som vist nedenfor
Bundle remoteInput = RemoteInput.getResultsFromIntent (hensikt),. If (remoteInput! = null) {CharSequence inputAsCharSequence = remoteInput.getCharSequence (EXTRA_BID_AMOUNT!); if (inputAsCharSequence = null) {innspill = inputAsCharSequence.toString ();}}

Følgende skjermbilde viser et eksempel på en RemoteInput eksempel i aksjon

En åpenbar forlengelse av dette vil være å gjøre det mulig for brukeren å eksplisitt be om en oppdatering. For å gjennomføre dette, ville du oppretter en aktivitet for Android Wear enhet som lytter for talekommandoer. Når mottatt, sendes forespørselen til sammen mobilenheten og avslutte aktivitet. Men det er for en annen tid.

Konklusjon

Som konkluderer med vårt eksempel prosjekt der vi nå tilby brukeren relevant og praktisk informasjon, og leverer den til dem med minimale forstyrrelser. Som nevnt i forrige artikkel, Android Wear lar deg gjennomføre alt du vil, men jeg håper denne artikkelen har vist hvordan forbedret varslinger er en effektiv måte å utvide tjenesten til Android-Wear-enheter.