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.
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.
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:
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.
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.