Signaler och mikrointeraktioner för Smartwatches Hands-On

I den föregående artikeln har jag introducerat två designprinciper som syftar till wearables, signaler och mikrointeraktioner. I den här artikeln skapar vi ett exempel på Android Wear-projekt för att visa hur dessa principer gäller i praktiken.

1. Begrepp

Tänk dig att du är i den sista timmen av ett budkrig för ett mycket eftertrakat objekt. Det sista du vill ha, och det som ofta händer, är att bjudas precis innan budet stängs. I det här scenariot finns det uppenbara fördelar med att ha en smartwatch som gör det möjligt för dig att kunna övervaka ett sådant bud och göra aktuella åtgärder utan att störa dig, användaren, för mycket. I vårt exempelprojekt går vi igenom hur vi kan inse detta på en Android Wear-enhet.

Handelsplatsen som vi baserar vårt exempel på heter TradeMe, mitt hemland motsvarar eBay. Som med majoriteten av framgångsrika onlinetjänster tillhandahåller TradeMe ett rent och enkelt API som avslöjar majoriteten av funktionalitet till utvecklare. Eftersom den här artikeln handlar om Android Wear, fokuserar vi bara på koden som är relaterad till Android Wear.

Flödesschemat nedan visar huvudlogiken i vårt projekt.

Huvuddelen av logiken hanteras av en tjänst, BidWatcherService, på den parade handhållen där den rutinmässigt drar ner användarens klocklista. För varje objekt kontrollerar tjänsten om det har skett några ändringar och om användaren har överbjudits. För de som matchar dessa kriterier skapar tjänsten en anmälan där användaren meddelas om ändringarna och gav möjlighet att enkelt vidta åtgärder, till exempel öka sitt bud.

Den faktiska Android Wear-specifikkoden står för mycket lite av den övergripande applikationen, men som förhoppningsvis betonas i den här artikeln är utmaningen att utforma lämpliga kontextuella upplevelser snarare än det faktiska genomförandet. Naturligtvis kan du skapa ett anpassat och komplext användargränssnitt om du vill.

2. Utöka meddelanden för Android Wear

För att kunna använda funktioner som är specifika för Android Wear måste du se till att ditt projekt refererar till v4-supportbiblioteket. Vi börjar med att få en referens till systemets meddelandehanterare under initialiseringen. För att göra detta använder vi NotificationManagerCompat klass från supportbiblioteket istället för NotificationManager klass.

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

För var och en av våra klocklistor som har ändrats och ansetts vara tillräckligt viktiga för att anmäla användaren skapar och visar vi en anmälan.

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

Det är allt. Vi kan nu meddela användaren om alla övervakade objekt som har ändrats. Detta visas på skärmdumparna nedan.

Ovanstående skärmdumpar visar den emulerade versionen av vår anmälan på en Android Wear-enhet. Den vänstra skärmdumpen visar en förhandsvisning av meddelandet. Centrera och högsta skärmdumpar visar meddelanden i fokus.

Vi kan, som Android Wear-dokumentationen föreslår, göra den här informationen snyggare genom att lägga till en bakgrundsbild till meddelandet för att ge det mer kontext. Det finns två sätt att uppnå detta. Vi kan ställa in anmälan BigIcon, använda setBigIcon metod, eller genom att förlänga anmälan med en WearableExtender objekt och ställa in dess bakgrundsbild. Eftersom vi fokuserar på Android Wear använder vi WearableExtender klass.

Som namnet antyder, den WearableExtender klassen är en hjälpklass som bryter upp meddelandetillägg som är specifika för bärbara enheter. Följande kod visar hur vi lägger till en bakgrundsbild i våra meddelanden.

NotificationCompat.WearableExtender wearableExtender = ny NotificationCompat.WearableExtender (); wearableExtender.setBackground (BitmapFactory.decodeResource (getResources (), R.drawable.notification_background)); NotificationCompat.Builder notificationBuilder = ny NotificationCompat.Builder (this) .setSmallIcon (R.drawable.small_icon) .setContentTitle (mContext.getString (R.string.title_auction_update)) .setContentText (item.mTitle) .extend (wearableExtender);

Vi skapar en WearableExtender objekt, ange dess bakgrund och tilldela den till meddelandet med hjälp av förlänga metod. Följande skärmdump visar den uppdaterade meddelandet.

Jag har tre saker på min klocklista. För tillfället har jag ett separat kort för var och en av föremålen. Vid utformning av meddelanden för en handhållen skulle vi använda en sammanfattande anmälan, men det går inte bra att översätta till Android Wear-enheter. Av denna anledning är begreppet a Stack introducerades.

Stackar skapas genom att tilldela relaterade meddelanden till samma grupp. Detta gör det möjligt för användaren att förkasta eller ignorera dem som en grupp eller expandera dem för att hantera varje meddelande individuellt. Detta uppnås genom att ställa in grupp av varje meddelande med hjälp av setGroup metod som visas i nästa kodblock.

NotificationCompat.Builder notificationBuilder = ny 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);

Följande skärmdumpar visar exempel på att meddelanden staplas och expanderas.

Stackar är en ersättning för sammanfattande anmälningar på en handhållen. Stackar visas inte på en handhållen och du behöver därför uttryckligen skapa en sammanfattande anmälan för handdatorer. Liknande vad vi gjorde i ovanstående kodblock, ange anmälan grupp, använda setGroup metod, till stapelgruppen, men också sätta gruppsammanfattning till Sann genom att åberopa setGroupSummary metod.

I vissa fall kanske du vill visa mer detaljer för användaren. Detta kan vara användbart för att ge användaren ytterligare information utan att kräva att de drar ut sin handhållna. Android Wear har sidor för denna exakta anledning. Sidor tillåter dig att tilldela ytterligare kort till en anmälan för att avslöja mer information. Dessa avslöjas genom att svepas åt vänster.

För att lägga till en extra sida, skapar vi helt enkelt en ny anmälan och lägger till den i vår WearableExtender objekt med hjälp av addPage metod.

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)); Meddelande detaljerPageNotification = ny NotificationCompat.Builder (this) .setSmallIcon (R.drawable.small_icon) .setStyle (autionDetailsPageStyle) .build (); NotificationCompat.WearableExtender wearableExtender = ny NotificationCompat.WearableExtender (); wearableExtender.setBackground (BitmapFactory.decodeResource (getResources (), R.drawable.notification_background)); wearableExtender.addPage (detailsPageNotification);

Följande skärmdumpar visar en anmälan med två sidor. Vi tillhandahåller nu användaren aktuell och relevant information.

Det sista steget är att göra denna information åtgärdbar. För att göra detta lägger vi till åtgärder som vi gjorde med meddelanden tidigare. De två åtgärderna vi lägger till tillåter användaren att automatiskt öka sitt bud eller uttryckligen ange sitt bud.

Låt oss först lägga till ett automatiskt bud. Följande kodbit bör vara bekant för alla Android-utvecklare.

Intent defaultBidIntent = nytt Intent (DEFAULT_BID_ACTION) .putExtra (EXTRA_WATCHLIST_ITEM, objekt) .putExtra (EXTRA_NOTIFICATION_ID, notificationId); PendingIntent pendingDefaultBidIntent = PendingIntent.getBroadcast (mContext, 0, defaultBidIntent, PendingIntent.FLAG_UPDATE_CURRENT); NotificationCompat.Action defaultBidAction = ny NotificationCompat.Action.Builder (R.drawable.icon_action_bid, mContext.getString (R.string.label_auto_bid), pendingDefaultBidIntent) .build (); NotificationCompat.WearableExtender wearableExtender = ny NotificationCompat.WearableExtender (); wearableExtender.setBackground (BitmapFactory.decodeResource (getResources (), R.drawable.notification_background)); wearableExtender.addPage (detailsPageNotification); wearableExtender.addAction (defaultBidAction);

Följande skärmdumpar visar åtgärden tillsammans med bekräftelsestillståndet.

Med den andra åtgärden vill vi göra det möjligt för användaren att bestämma ett visst pris. Arbeta med begränsningarna i Android Wear-enheten är våra alternativ:

  • starta den lämpliga skärmen på handenheten
  • ge en stegkontroll som användaren kan använda för att öka det aktuella budet
  • ge användaren några fördefinierade alternativ
  • tillåta användaren att använda sin röst

En av de attraktiva aspekterna av Android Wear är dess arkitektur och design mot röst. Det är vettigt att ge formfaktorn och det sammanhang där en bärbar enhet som en smartwatch används.

Genomförandet av detta liknar ovanstående, men förutom a RemoteInput objekt, vi instanserar och tilldelar a RemoteInput motsätta sig åtgärden. De RemoteInput Exempel tar hand om resten.

Intent customBidIntent = ny Intent (CUSTOM_BID_ACTION) .putExtra (EXTRA_WATCHLIST_ITEM, objekt) .putExtra (EXTRA_NOTIFICATION_ID, notificationId); PendingIntent pendingCustomBidIntent = PendingIntent.getBroadcast (mContext, 0, customBidIntent, PendingIntent.FLAG_UPDATE_CURRENT); RemoteInput remoteInput = nya RemoteInput .Builder (EXTRA_BID_AMOUNT) .setLabel (mContext.getString (R.string.copy_specify_bid)) .build (); NotificationCompat.Action customBidAction = ny NotificationCompat.Action .Builder (R.drawable.icon_action_bid, mContext.getString (R.string.label_bid), väntandeCustomBidIntent) .addRemoteInput (remoteInput) .build (); NotificationCompat.WearableExtender wearableExtender = ny NotificationCompat.WearableExtender (); wearableExtender.setBackground (BitmapFactory.decodeResource (getResources (), R.drawable.notification_background)); wearableExtender.addPage (detailsPageNotification); wearableExtender.addAction (defaultBidAction) .addAction (customBidAction);

De RemoteInput objektet tar en sträng i konstruktören. Denna sträng, EXTRA_BID_AMOUNT, är den identifierare som används av sändarmottagaren när man hämtar resultatet som visas nedan.

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

Följande skärmdump visar ett exempel på a RemoteInput exempel i åtgärd.

En uppenbar förlängning av detta skulle vara att göra det möjligt för användaren att uttryckligen begära en uppdatering. För att genomföra detta skapar du en aktivitet för Android Wear-enheten som lyssnar på röstkommandon. När du har mottagit sänder du begäran till den parade mobilenheten och avslutar aktiviteten. Men det är en annan gång.

Slutsats

Det avslutar vårt exempelprojekt där vi nu erbjuder användaren relevant och handlingbar information och levererar den till dem med minimal störning. Som vi nämnde i den föregående artikeln låter vi Android Wear implementera allt du vill, men jag hoppas att den här artikeln har visat hur förbättrade meddelanden är ett effektivt och effektivt sätt att utöka din tjänst till Android Wear-enheter.