Share
En el artículo anterior, presenté dos principios de diseño dirigidos a dispositivos portátiles, señales y microinteracciones. En este artículo, crearemos un proyecto de ejemplo de Android Wear para mostrar cómo estos principios se aplican en la práctica..
Imagina que estás en la hora final de una guerra de ofertas por un artículo muy codiciado. Lo último que desea, y lo que sucede a menudo, es que se le ofrezca una oferta antes de que se cierre la oferta. En este escenario, hay beneficios obvios al tener un reloj inteligente que le permite una manera conveniente de poder monitorear una oferta de este tipo y realizar acciones oportunas sin molestarlo, al usuario, demasiado. En nuestro proyecto de ejemplo, veremos cómo podemos realizar esto en un dispositivo Android Wear.
El sitio de comercio en el que basaremos nuestro ejemplo se llama TradeMe, el equivalente de mi país de origen a eBay. Al igual que con la mayoría de los servicios en línea exitosos, TradeMe proporciona una API limpia y simple que expone la mayoría de las funcionalidades a los desarrolladores. Debido a que este artículo trata sobre Android Wear, nos enfocaremos solo en el código relacionado con Android Wear.
El siguiente diagrama de flujo muestra la lógica principal de nuestro proyecto..
La mayor parte de la lógica es manejada por un servicio, BidWatcherService, en la computadora de mano emparejada, donde de manera rutinaria se despliega la lista de vigilancia del usuario. Para cada ítem, el servicio verifica si ha habido cambios y si el usuario ha sido superado. Para aquellos que coinciden con estos criterios, el servicio crea una notificación por medio de la cual se notifica al usuario sobre los cambios y se le brinda la oportunidad de tomar medidas fácilmente, por ejemplo, aumentando su oferta..
El código específico de Android Wear real representa muy poco de la aplicación general pero, como se espera que se enfatice en este artículo, el desafío está en diseñar experiencias contextuales apropiadas en lugar de la implementación real. Por supuesto, puede crear una interfaz de usuario compleja y personalizada si lo desea..
Para usar características específicas de Android Wear, debe asegurarse de que su proyecto haga referencia a la biblioteca de soporte de v4. Comenzamos obteniendo una referencia al administrador de notificaciones del sistema durante la inicialización. Para ello, utilizamos el NotificationManagerCompat clase de la biblioteca de apoyo en lugar de la NotificationManager clase.
NotificationManagerCompat protegido mNotificationManager;… mNotificationManager = NotificationManagerCompat.from (mContext);
Para cada uno de nuestros elementos de la lista de observación que han cambiado y que se consideran lo suficientemente importantes como para notificar al usuario, creamos y mostramos una notificación..
NotificationCompat.Builder notificationBuilder = nuevo NotificationCompat.Builder (this) .setSmallIcon (R.drawable.small_icon) .setContentTitle (mContext.getString (R.string.title_auction_update)) mNotificationManager.notify (notificationId, notificationBuilder.build ());
Eso es. Ahora podemos notificar al usuario cualquier artículo que haya cambiado. Esto se muestra en las capturas de pantalla a continuación.
Las capturas de pantalla anteriores muestran la versión emulada de nuestra notificación en un dispositivo Android Wear. La captura de pantalla más a la izquierda muestra una vista previa de la notificación. Las capturas de pantalla del centro y del extremo derecho muestran las notificaciones en foco..
Podemos, como lo sugiere la documentación de Android Wear, hacer que esta información sea más fácil de agregar agregando una imagen de fondo a la notificación para darle más contexto. Hay dos maneras de lograr esto. Podemos configurar la notificación de BigIcon, utilizando la setBigIcon método, o extendiendo la notificación con un WearableExtender Objeto y configuración de su imagen de fondo. Porque nos estamos enfocando en Android Wear, usaremos el WearableExtender clase.
Como su nombre lo indica, el WearableExtender class es una clase auxiliar que envuelve las extensiones de notificación que son específicas para dispositivos portátiles. El siguiente código muestra cómo agregamos una imagen de fondo a nuestras notificaciones..
NotificationCompat.WearableExtender wearableExtender = new NotificationCompat.WearableExtender (); wearableExtender.setBackground (BitmapFactory.decodeResource (getResources (), R.drawable.notification_background)); NotificationCompat.Builder notificationBuilder = nueva NotificationCompat.Builder (this) .setSmallIcon (R.drawable.small_icon) .setContentTitle (mContext.getString (R.string.title_auction_update).
Creamos un WearableExtender objeto, establecer su fondo, y asignarlo a la notificación utilizando el ampliar método. La siguiente captura de pantalla muestra la notificación actualizada..
Tengo tres artículos en mi lista de vigilancia. En este momento, tengo una Tarjeta separada para cada uno de los artículos. Al diseñar notificaciones para una computadora de mano, usaríamos una notificación de resumen, pero esto no se traduce bien en los dispositivos Android Wear. Por este motivo, el concepto de Apilar Fue presentado.
Las pilas se crean asignando notificaciones relacionadas al mismo grupo. Esto permite al usuario descartarlos o ignorarlos como un grupo o expandirlos para manejar cada notificación individualmente. Esto se logra estableciendo el grupo de cada notificación utilizando el setGroup Método como se muestra en el siguiente bloque de código.
NotificationCompat.Builder notificationBuilder = nuevo NotificationCompat.Builder (this) .setSmallIcon (R.drawable.small_icon) .setContentTitle (mContext.getString (R.string.it.title.parac.al.com.png). wearableExtender);
Las siguientes capturas de pantalla muestran ejemplos de notificaciones apiladas y expandidas..
Las pilas son un sustituto de las notificaciones de resumen en una computadora de mano. Las pilas no se muestran en una computadora de mano y, por lo tanto, debe crear explícitamente una notificación de resumen para las computadoras de mano. De forma similar a lo que hicimos en el bloque de código anterior, configure las notificaciones grupo, utilizando la setGroup método, al grupo de pila, pero también establece el resumen del grupo en cierto invocando el setGroupSummary método.
En algunos casos, es posible que desee mostrar más detalles al usuario. Esto puede ser útil para proporcionarle al usuario información adicional sin necesidad de extraer su computadora de mano. Android Wear tiene Páginas por esta razón exacta Las páginas le permiten asignar tarjetas adicionales a una notificación para exponer más información. Estos se revelan al deslizar a la izquierda.
Para agregar una página adicional, simplemente creamos una nueva notificación y la agregamos a nuestro WearableExtender objeto usando el añadir página método.
BigTextStyle autionDetailsPageStyle = new NotificationCompat.BigTextStyle (. , 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);
Las siguientes capturas de pantalla muestran una notificación con dos páginas. Ahora estamos proporcionando al usuario información oportuna y relevante.
El paso final es hacer que esta información sea procesable. Para hacer esto, agregamos acciones al igual que hicimos con las notificaciones anteriores. Las dos acciones que agregamos permiten al usuario aumentar automáticamente su oferta o establecer explícitamente su oferta.
Primero agreguemos una oferta automática. El siguiente fragmento de código debe ser familiar para cualquier desarrollador de Android.
Intent defaultBidIntent = new 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 = nueva 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);
Las siguientes capturas de pantalla muestran la acción junto con el estado de confirmación..
Con la segunda acción, queremos que el usuario establezca un precio específico. Trabajando con las restricciones del dispositivo Android Wear, nuestras opciones son:
Uno de los aspectos atractivos de Android Wear es su arquitectura y diseño hacia la voz. Esto tiene sentido, dado el factor de forma y el contexto en el que se usa un dispositivo portátil como un reloj inteligente.
La implementación de esto es similar a la anterior, pero, además de un RemoteInput objeto, instanciamos y asignamos un RemoteInput Objetar a la acción. los RemoteInput La instancia se encarga del resto..
Intención customBidIntent = new 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 = nuevo RemoteInput .Builder (EXTRA_BID_AMOUNT) .setLabel (mContext.getString (R.string.copy_specify_bid)) .build (); NotificationCompat.Action customBidAction = nueva 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);
los RemoteInput objeto toma una cadena en el constructor. Esta cadena, EXTRA_BID_AMOUNT, es el identificador utilizado por el receptor de difusión cuando se recupera el resultado como se muestra a continuación.
Bundle remoteInput = RemoteInput.getResultsFromIntent (intención); if (remoteInput! = null) CharSequence inputAsCharSequence = remoteInput.getCharSequence (EXTRA_BID_AMOUNT); if (inputAsCharSequence! = null) input = inputAsCharSequence.toString ();
La siguiente captura de pantalla muestra un ejemplo de RemoteInput instancia en acción.
Una extensión obvia para esto sería permitir al usuario solicitar explícitamente una actualización. Para implementar esto, debe crear una Actividad para el dispositivo Android Wear que escuche los comandos de voz. Una vez recibida, transmita la solicitud al dispositivo móvil emparejado y finalice la Actividad. Pero eso es para otro momento..
Eso concluye nuestro proyecto de ejemplo en el que ahora ofrecemos al usuario información relevante y procesable, entregándoselo con una interrupción mínima. Como se mencionó en el artículo anterior, Android Wear le permite implementar cualquier cosa que desee, pero espero que este artículo haya demostrado cómo las notificaciones mejoradas son una forma eficiente y efectiva de extender su servicio a los dispositivos Android Wear.
Accentsconagua