Share
In het vorige artikel heb ik twee ontwerpprincipes geïntroduceerd die gericht zijn op wearables, signalen en microinteracties. In dit artikel maken we een voorbeeld van een Android Wear-project om te laten zien hoe deze principes in de praktijk van toepassing zijn.
Stel je voor dat je in het laatste uur bent van een biedoorlog voor een felbegeerd item. Het laatste wat u wilt en wat er vaak gebeurt, wordt overboden vlak voordat het bod wordt gesloten. In dit scenario zijn er duidelijke voordelen bij het hebben van een smartwatch die u een gemakkelijke manier biedt om een dergelijk bod te kunnen volgen en tijdig actie te ondernemen zonder u, de gebruiker, te veel te storen. In ons voorbeeldproject bekijken we hoe we dit kunnen realiseren op een Android Wear-apparaat.
De handelssite waarop we ons voorbeeld baseren, heet TradeMe, het equivalent van mijn thuisland voor eBay. Zoals met het merendeel van de succesvolle online services, biedt TradeMe een schone en eenvoudige API die de meerderheid van functionaliteit aan ontwikkelaars blootstelt. Omdat dit artikel over Android Wear gaat, richten we ons alleen op de code met betrekking tot Android Wear.
Het stroomdiagram hieronder toont de belangrijkste logica van ons project.
Het grootste deel van de logica wordt afgehandeld door een service, BidWatcherService, op de gekoppelde rekenmachine waar het routinematig de watchlist van de gebruiker naar beneden trekt. Voor elk item controleert de service of er wijzigingen zijn en of de gebruiker is overboden. Voor degenen die aan deze criteria voldoen, maakt de service een melding waarbij de gebruiker op de hoogte wordt gesteld van de wijzigingen en de mogelijkheid wordt geboden om gemakkelijk actie te ondernemen, bijvoorbeeld door hun bod te verhogen.
De eigenlijke specifieke code van Android Wear is slechts een klein deel van de totale toepassing, maar, zoals hopelijk in dit artikel wordt benadrukt, de uitdaging ligt in het ontwerpen van geschikte contextuele ervaringen in plaats van de daadwerkelijke implementatie. Natuurlijk kunt u een aangepaste en complexe gebruikersinterface maken als u dat wilt.
Als u specifieke functies voor Android Wear wilt gebruiken, moet u ervoor zorgen dat uw project verwijst naar de ondersteuningsbibliotheek van v4. We beginnen met het verkrijgen van een verwijzing naar de meldingsmanager van het systeem tijdens de initialisatie. Om dit te doen, gebruiken we de NotificationManagerCompat klasse uit de ondersteuningsbibliotheek in plaats van de NotificationManager klasse.
beschermd NotificationManagerCompat mNotificationManager; ... mNotificationManager = NotificationManagerCompat.from (mContext);
Voor elk van onze controlelijstitems die zijn gewijzigd en belangrijk genoeg zijn geacht om de gebruiker op de hoogte te stellen, maken en tonen we een melding.
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 ());
Dat is het. We kunnen de gebruiker nu op de hoogte stellen van alle bekeken items. Dit wordt getoond in de onderstaande schermafbeeldingen.
De bovenstaande screenshots tonen de geëmuleerde versie van onze melding op een Android Wear-apparaat. Het meest linkse screenshot toont een voorbeeld van de melding. De middelste en meest rechtse schermafbeeldingen tonen meldingen in focus.
We kunnen, zoals de documentatie van Android Wear suggereert, deze informatie beter zichtbaar maken door een achtergrondafbeelding aan de melding toe te voegen om deze meer context te geven. Er zijn twee manieren om dit te bereiken. We kunnen de meldingen instellen BigIcon, de ... gebruiken setBigIcon methode, of door de melding uit te breiden met een WearableExtender object en de achtergrondafbeelding instellen. Omdat we ons richten op Android Wear, gebruiken we het WearableExtender klasse.
Zoals de naam al doet vermoeden, de WearableExtender class is een helperklasse die de meldingsextensies omhult die specifiek zijn voor draagbare apparaten. De volgende code laat zien hoe we een achtergrondafbeelding toevoegen aan onze meldingen.
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);
We creëren een WearableExtender object, stel de achtergrond in en wijs deze toe aan de melding met behulp van de uitbreiden methode. De volgende schermafbeelding toont de bijgewerkte melding.
Ik heb drie items op mijn watch list. Op dit moment heb ik een afzonderlijke kaart voor elk van de items. Bij het ontwerpen van meldingen voor een rekenmachine zouden we een samenvattende melding gebruiken, maar dit vertaalt zich niet goed in Android Wear-apparaten. Om deze reden is het concept van a stack werd geïntroduceerd.
Stapels worden gemaakt door verwante meldingen toe te wijzen aan dezelfde groep. Hierdoor kan de gebruiker deze verwijderen of negeren als een groep of uitbreiden om elke melding individueel af te handelen. Dit wordt bereikt door het instellen van groep van elke melding met behulp van de setGroup methode zoals getoond in het volgende codeblok.
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);
De volgende schermafbeeldingen tonen voorbeelden van meldingen die worden gestapeld en uitgebreid.
Stapels zijn een vervanging voor samenvattende meldingen op een rekenmachine. Er worden geen stapels weergegeven op een rekenmachine en u moet daarom expliciet een samenvattingsmelding maken voor rekenmachines. Gelijk aan wat we in het bovenstaande codeblok hebben gedaan, stel je de meldingen in groep, de ... gebruiken setGroup methode, naar de stapelgroep, maar stel ook groepssamenvatting in op waar door het setGroupSummary methode.
In sommige gevallen wilt u misschien meer details voor de gebruiker weergeven. Dit kan handig zijn om de gebruiker aanvullende informatie te geven zonder dat hij zijn rekenmachine hoeft uit te trekken. Android Wear heeft Pages om deze exacte reden. Met pagina's kunt u extra kaarten aan een melding toewijzen om meer informatie weer te geven. Deze worden onthuld door naar links te vegen.
Om een extra pagina toe te voegen, maken we eenvoudig een nieuwe melding en voegen deze toe aan onze WearableExtender object met behulp van de pagina toevoegen methode.
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);
De volgende schermafbeeldingen tonen een melding met twee pagina's. We bieden de gebruiker nu actuele en relevante informatie.
De laatste stap is om deze informatie bruikbaar te maken. Om dit te doen, voegen we acties toe, net zoals we eerder deden met meldingen. Met de twee acties die we toevoegen, kan de gebruiker automatisch zijn bod verhogen of zijn bod expliciet instellen.
Laten we eerst een automatisch bod toevoegen. Het volgende codefragment zou bekend moeten zijn bij elke Android-ontwikkelaar.
Intent defaultBidIntent = nieuwe 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);
De volgende schermafbeeldingen tonen de actie samen met de bevestigingsstatus.
Met de tweede actie willen we de gebruiker in staat stellen om een specifieke prijs in te stellen. Werken met de beperkingen van het Android Wear-apparaat onze opties zijn:
Een van de aantrekkelijke aspecten van Android Wear is de architectuur en vormgeving naar stem. Dit is logisch met de vormfactor en context waarin een draagbaar apparaat zoals een smartwatch wordt gebruikt.
Het implementeren hiervan is vergelijkbaar met het bovenstaande, maar, naast een RemoteInput object, we instantiëren en toewijzen a RemoteInput bezwaar tegen de actie. De RemoteInput instantie zorgt voor de rest.
Intent customBidIntent = nieuwe 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);
De RemoteInput object neemt een string in de constructor. Deze string, EXTRA_BID_AMOUNT, is de identificator die wordt gebruikt door de uitzendingsontvanger bij het ophalen van het resultaat zoals hieronder wordt getoond.
Bundel remoteInput = RemoteInput.getResultsFromIntent (intent); if (remoteInput! = null) CharSequence inputAsCharSequence = remoteInput.getCharSequence (EXTRA_BID_AMOUNT); if (inputAsCharSequence! = null) input = inputAsCharSequence.toString ();
De volgende schermafbeelding toont een voorbeeld van een RemoteInput bijvoorbeeld in actie.
Een voor de hand liggende uitbreiding hiervan zou zijn om de gebruiker in staat te stellen om expliciet om een update te vragen. Om dit te implementeren, zou u een activiteit maken voor het Android Wear-apparaat dat naar spraakopdrachten luistert. Stuur het verzoek na ontvangst naar het gekoppelde mobiele apparaat en voltooi de activiteit. Maar dat is voor een andere keer.
Dat concludeert ons voorbeeldproject waarin we nu de gebruiker relevante en bruikbare informatie aanbieden, die deze met minimale verstoring levert. Zoals in het vorige artikel is vermeld, kunt u met Android Wear alles implementeren wat u wilt, maar ik hoop dat dit artikel heeft laten zien hoe verbeterde meldingen een efficiënte en effectieve manier zijn om uw service uit te breiden naar Android Wear-apparaten.
Accentsconagua