Códifica un Widget Para Tu Aplicación Android: Actualización del Widget

Spanish (Español) translation by James (you can also view the original English article)

Widgets de aplicaciones proporcionan a que los usuarios con acceso fácil a la mayoría de la aplicación con frecuencia utilizan características, dando su aplicación una presencia en pantalla de inicio del usuario. Al añadir un widget a su proyecto, puede proporcionar una mejor experiencia de usuario, mientras que alentar a los usuarios a seguir participando con su aplicación, como verán cada vez que echar un vistazo a su pantalla de inicio widget, mostrando algunas de sus aplicaciones del más útil y contenidos interesantes.

En esta serie de tres partes, estamos construyendo un widget de aplicación que tiene toda la funcionalidad que usted encontrará en casi cada widget de la aplicación para Android.

En el primer post, hemos creado un widget que recupera y muestra los datos y realiza una acción única como respuesta a eventos onClick. No obstante, nuestro widget todavía está faltando una pieza fundamental de la funcionalidad: nunca actualiza con nueva información. Un widget que nunca tiene nada nuevo que para ofrecer no tan útil, por lo que daremos nuestro widget dos maneras para actualizar.

Android SDK

Códifica un Widget para Android: Introducir y Mostrar

Jessica Thornsby

Al final de esta serie, habremos ampliado nuestro widget para recuperar y mostrar nuevos datos automáticamente según un horario y en respuesta a la interacción con el usuario.

Nosotros estamos recogiendo derecho donde nos quedamos, así que si no tienes una copia del widget que creamos en el primer post, entonces usted puede descargar desde GitHub.

Actualización de Su Diseño

El primer paso es actualizar nuestro diseño para mostrar algunos datos que cambia con el tiempo. Para ayudarnos a ver exactamente cuando nuestro widget recibe cada actualización, voy a instruir el widget para recuperar y mostrar la hora actual, cuando realiza una actualización.

Voy a agregar lo siguiente en el diseño del widget:

un TextView que muestra una etiqueta de la última actualización
un TextView que mostrará la hora de la última actualización

Mientras estamos trabajando en el archivo new_app_widget.xml, también voy a añadir el TextView que finalmente le permiten al usuario iniciar una actualización manualmente:

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:padding="@dimen/widget_margin"
   android:background="@drawable/widget_background"
   android:orientation="vertical" >
   
   <LinearLayout
       android:background="@drawable/tvbackground"
       style="@style/widget_views"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal">
       
       <TextView
           android:id="@+id/id_label"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/widget_id"
           style="@style/widget_text" />
           
       <TextView
           android:id="@+id/id_value"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="."
           style="@style/widget_text"  />
           
   </LinearLayout>
   
   <TextView
       android:id="@+id/launch_url"
       style="@style/widget_views"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/URL"
       android:background="@drawable/tvbackground"/>

//Add a ‘Tap to update’ TextView//

   <TextView
       android:id="@+id/update"
       style="@style/widget_views"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/update"
       android:background="@drawable/tvbackground"/>

   <LinearLayout
       android:background="@drawable/tvbackground"
       style="@style/widget_views"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical">

//Add a TextView that’ll display our ‘Last Update’ label//

   <TextView
       android:id="@+id/update_label"
       style="@style/widget_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/last_update"   />

//Add the TextView that’ll display the time of the last update// 

   <TextView
       android:id="@+id/update_value"
       style="@style/widget_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="@string/time" />
   </LinearLayout>

</LinearLayout>

A continuación, definir los nuevos recursos de cadena que referenciamos en nuestro diseño:

1	<string name="update">Tap to update</string>
2	<string name="last_update">Last Update</string>
3	<string name="time">%1$s</string>

La @string/time se ve diferente de la típica cadena, ya que es sólo un marcador de posición que podrá ser reemplazado en tiempo de ejecución.

Esto nos da el diseño terminado:

Preview the complete Android application widget layout

Actualizar el Widget Basado en un Programa

Puesto que es el método más fácil de implementar, voy a empezar por actualizar nuestro widget automáticamente, después de un periodo de tiempo transcurrido.

Al crear este tipo de programa de actualización automática, 1.800.000 milisegundos (30 minutos) es el intervalo más pequeño se puede utilizar. Incluso si establece updatePeriodMillis del proyecto a menos de 30 minutos, tu widget sólo se actualizará una vez cada media hora.

No es sencillo decidir con qué frecuencia debe actualizar el widget. Actualizaciones frecuentes son un mayor drenaje en el dispositivo de batería, pero estas actualizaciones demasiado lejos aparte y su widget pueden terminar Mostrar significativamente desactualizada información al usuario del sistema.

Para encontrar un equilibrio que funciona para su proyecto en particular, usted necesitará probar el widget en una gama de frecuencias de la actualización y medir el impacto que cada frecuencia tiene en la vida de la batería, vigilando si el contenido del widget nunca llega a ser perceptiblemente fuera de fecha.

Desde cómo frecuente-es-demasiado frecuentes es una de esas preguntas frustrantes, subjetivas donde no hay ninguna respuesta "correcta", puede ayudar a obtener una segunda opinión por organizar unas pruebas de usuario. Incluso puede establecer para arriba algunos A / B pruebas para comprobar si cierta actualización de frecuencias reciben más positivamente que otros.

Abra el archivo del proyecto AppWidgetProviderInfo (res/xml/new_app_widget_info.xml) y verás que ya define un intervalo de actualización predeterminado de 86,400,000 milisegundos (24 horas).

1	android:updatePeriodMillis="86400000"

Hay un montón de widgets que se actualizan sólo una vez cada 24 horas; por ejemplo, un widget que muestra el pronóstico del tiempo sólo puede ser que necesite recuperar nueva información una vez al día. Sin embargo, aunque el widget sólo tiene que actualizar una vez al día, esto no es ideal cuando la aplicación de la prueba. Nadie quiere esperar 24 horas solo para ver si su método onUpdate() es accionar correctamente, para usar normalmente el menor intervalo posible al realizar las pruebas iniciales y luego cambiar este valor más adelante, si es necesario.

Para que sea más fácil de probar nuestra aplicación, voy a utilizar el menor intervalo posible:

1	android:updatePeriodMillis="1800000"

Recuperar y Mostrar la Hora Actual

El método onUpdate() es responsable de la actualización de Views de su widget con información nueva. Si abres proveedor de widget de su proyecto (java/values/NewAppWidget.java) a ver que ya contiene el esbozo de un método onUpdate():

   @Override
   public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {

       // There may be multiple widgets active, so update all of them//

       for (int appWidgetId : appWidgetIds) {
           updateAppWidget(context, appWidgetManager, appWidgetId);
       }
   }

Independientemente de si el widget se actualiza automáticamente o en respuesta a la interacción con el usuario, el proceso de actualización es exactamente el mismo: el Gerente de widget envía una intención de difusión con la acción de ACTION_APPWIDGET_UPDATE, y la clase widget y el proveedor responde por llamar al método onUpdate(), que a su vez llama al método updateAppWidget().

Una vez que hemos actualizado nuestra clase NewAppWidget.java para recuperar y mostrar la hora actual, el proyecto usará esta misma sección del código, independientemente de cómo se activa el método onUpdate():

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.Context;
import android.widget.RemoteViews;
import android.app.PendingIntent;
import android.content.Intent;
import android.net.Uri;
import java.text.DateFormat;
import java.util.Date;

public class NewAppWidget extends AppWidgetProvider {

   static void updateAppWidget(Context context,
                               AppWidgetManager appWidgetManager,
                               int appWidgetId) {

//Retrieve the time//

       String timeString =
               DateFormat.getTimeInstance(DateFormat.SHORT).format(new Date());

 //Construct the RemoteViews object//

       RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.new_app_widget);
       views.setTextViewText(R.id.id_value, String.valueOf(appWidgetId));

//Retrieve and display the time// 

       views.setTextViewText(R.id.update_value,
               context.getResources().getString(
                       R.string.time, timeString));

       Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://code.tutsplus.com/"));
       PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, intent, 0);
       views.setOnClickPendingIntent(R.id.launch_url, pendingIntent);
       appWidgetManager.updateAppWidget(appWidgetId, views);
   }

   @Override
   public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {

 //If multiple widgets are active, then update them all//

       for (int appWidgetId : appWidgetIds) {
           updateAppWidget(context, appWidgetManager, appWidgetId);
       }
   }
}

Hay un problema con el código anterior: Si el usuario aprovecha el TextView varias veces durante el lapso de un minuto, no habrá ninguna indicación visual que el widget se actualiza, simplemente porque no hay nuevo tiempo para mostrar. Esto probablemente no causará problemas a sus usuarios finales, que están poco probable que se sientan allí, golpeando el TextView varias veces por minuto y preguntándose por qué el tiempo no ha cambiado. Sin embargo, esto puede ser un problema cuando pruebas tu aplicación, esto significa que usted tendrá que esperar por lo menos 60 segundos entre la activación del método onUpdate().

Para asegurarse de que siempre hay algún tipo de confirmación visual de que el método onUpdate() ha ejecutado correctamente, voy a mostrar un brindis cuando onUpdate() se llama:

import android.widget.Toast;
...
...
...

@Override

public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
   for (int appWidgetId : appWidgetIds) {
       updateAppWidget(context, appWidgetManager, appWidgetId);
       Toast.makeText(context, "Widget has been updated! ", Toast.LENGTH_SHORT).show();

  }
   }
}

Test that the widget is updating correctly by including a toast

Actualizar tu Widget en Respuesta a la Acción del Usuario

Nuestro widget ahora se actualizará automáticamente una vez cada media hora, pero ¿qué pasa con actualización en respuesta a la interacción con el usuario?

Ya hemos puesto un montón de las bases agregando un Toque para Actualizar TextView a nuestro diseño y expansión de la clase NewAppWidget.java para recuperar y mostrar la hora actual cuando se llama onUpdate().

Lo único por hacer es crear un intento con AppWidgetManager.ACTION_APPWIDGET_UPDATE, que es una acción que informa el widget que es el momento de actualizar, y luego llamar a este propósito en respuesta al usuario interactuar con el Toque para Actualizar TextView.

Aquí está la clase completa de NewAppWidget.java:

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.Context;
import android.widget.RemoteViews;
import android.app.PendingIntent;
import android.content.Intent;
import android.net.Uri;
import java.text.DateFormat;
import java.util.Date;
import android.widget.Toast;

public class NewAppWidget extends AppWidgetProvider {
   static void updateAppWidget(Context context,
                               AppWidgetManager appWidgetManager,
                               int appWidgetId) {

//Retrieve the current time//

       String timeString =
               DateFormat.getTimeInstance(DateFormat.SHORT).format(new Date());

       RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.new_app_widget);
       views.setTextViewText(R.id.id_value, String.valueOf(appWidgetId));
       views.setTextViewText(R.id.update_value,
               context.getResources().getString(
                       R.string.time, timeString));

//Create an Intent with the AppWidgetManager.ACTION_APPWIDGET_UPDATE action//

       Intent intentUpdate = new Intent(context, NewAppWidget.class);
       intentUpdate.setAction(AppWidgetManager.ACTION_APPWIDGET_UPDATE);

//Update the current widget instance only, by creating an array that contains the widget’s unique ID// 

       int[] idArray = new int[]{appWidgetId};
       intentUpdate.putExtra(AppWidgetManager.EXTRA_APPWIDGET_IDS, idArray);

//Wrap the intent as a PendingIntent, using PendingIntent.getBroadcast()//

       PendingIntent pendingUpdate = PendingIntent.getBroadcast(
               context, appWidgetId, intentUpdate,
               PendingIntent.FLAG_UPDATE_CURRENT);

//Send the pending intent in response to the user tapping the ‘Update’ TextView//

       views.setOnClickPendingIntent(R.id.update, pendingUpdate);
       Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://code.tutsplus.com/"));
       PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, intent, 0);
       views.setOnClickPendingIntent(R.id.launch_url, pendingIntent);

//Request that the AppWidgetManager updates the application widget//

       appWidgetManager.updateAppWidget(appWidgetId, views);
   }

   @Override
   public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
       for (int appWidgetId : appWidgetIds) {
           updateAppWidget(context, appWidgetManager, appWidgetId);
           Toast.makeText(context, "Widget has been updated! ", Toast.LENGTH_SHORT).show();
       }
   }
}

Ser capaz de actualizar un widget en la demanda puede ser inestimable cuando pruebas tu proyecto, esto significa que usted nunca tendrá que esperar a que transcurra el intervalo de actualización. Aunque no incluye esta funcionalidad en su aplicación final, puede que desee añadir un Toque para Actualizar, para simplificarle la vida al probar su proyecto.

Crear una Imagen de Vista Previa

Nuestro widget ahora parece totalmente diferente al widget que Android Studio genera para nosotros automáticamente, pero por el momento sigue utilizando la imagen de previsualización generada automáticamente.

Create a unique Android app widget preview image

Idealmente, la imagen de vista previa debe alentar a los usuarios seleccionar el widget en el selector Widget, pero por lo menos debe ser una representación exacta de cómo se ve realmente tu widget! Actualmente, nuestra imagen de vista previa no marca nunca de esas cajas, así que tenemos que crear uno nuevo.

El método más fácil es usar la aplicación Widget Preview que está incluida en el emulador de Android.

Crear un Widget Preview

En primer lugar, instalar su proyecto en un Dispositivo Virtual Android (AVD). Luego abrir el cajón de la aplicación de la AVD y ejecutar la aplicación Widget Preview. La AVD mostrará una lista de cada aplicación que se instala en el dispositivo, seleccione su aplicación de la lista.

El widget se mostrará sobre un fondo blanco. Dedicar un tiempo redimensionar y ajustar el widget para que se vea mejor y una vez que estés satisfecho con los resultados, seleccione Tomar Instantánea. La captura de pantalla se guardará como PNG en la carpeta de Descarga de la AVD. Para recuperar este archivo, volver a Android Studio y abra el Explorador de Archivos del Dispositivo, seleccione Vista > Herramienta Windows > Explorador de Archivos del Dispositivo de la barra de herramientas. En la vista de explorador de archivos del dispositivo, vaya a la carpeta sdcard/Download, donde se encuentra la imagen de previsualización que se guarda como [app_name]_ori_[orientation].png.

Create a preview image using the Android Virtual Devices built-in Widget Preview app

Arrastre esta imagen de estudio de Android y colóquelo en algún lugar de fácil acceso, como el escritorio. La imagen de dar un nombre más descriptivo y luego arrastrar y soltar la imagen en la carpeta drawable de su proyecto. Ahora puede abrir el archivo AppWidgetProviderInfo (en este caso, que es new_app_widget_info.xml) y cambiar la siguiente línea para hacer referencia a la nueva imagen de vista previa:

1	android:previewImage="@drawable/example_appwidget_preview"

Finalmente, puede quitar el example_appwidget_preview innecesarias estas características de su proyecto.

Prueba de Widget

¡Es el momento de poner el widget terminado a prueba!

En primer lugar, instale el proyecto actualizado en su dispositivo Android físico o AVD. Quitar todas las instancias existentes de este widget desde tu pantalla de inicio, así que usted sabe que usted está trabajando con la última versión.

Para añadir el widget, pulse cualquier espacio vacío en la pantalla de inicio, toque el Widget y seleccione el widget. Tendrás una oportunidad para redimensionar y reposicionar el widget, como sea necesario.

El valor de la Ultima Actualización mostrará el tiempo que ha creado este widget. presione Tocar para Actualizar y el widget debería mostrar un brindis y un nuevo tiempo. Si se coloca una segunda instancia del widget en tu pantalla de inicio, debe mostrar un tiempo distinto al primero.

Create multiple instances of the same application widget

Puede actualizar cualquiera de estos casos de widget dando su Tocar para Actualizar TextView un toque. Si lanzáis una actualización manual del primer widget, entonces no se actualizará el segundo widget y viceversa.

Además de las actualizaciones manuales, la aplicación Widget Manager para actualizar todas las instancias del widget una vez cada 30 minutos, basada en el tiempo cuando se creó la primera instancia. Aunque versiones manual pueden resultar en ocasiones mostrando diferentes momentos, una vez cada media hora que se actualizarán todas las instancias al mismo tiempo, momento en el que te muestran al mismo tiempo.

Puede que desee mantener unos pocos casos de este widget en tu pantalla de inicio, así que usted puede controlar cómo su contenido cambia con el tiempo en respuesta a una combinación de actualizaciones automáticas y manuales.

Conclusión

En esta serie, hemos estado creando un widget de la aplicación para Android que muestra cómo implementar todas las características más comunes encontradas los widgets de la aplicación. Si has estado siguiendo a lo largo desde el principio, en este punto usted habrá construido un widget que actualiza automáticamente y en respuesta a la entrada del usuario, y que es capaz de reaccionar a los eventos onClick (también puede descargar el proyecto completo desde GitHub).

En el próximo post, veremos algunas mejores prácticas para asegurar que tu widget proporciona una experiencia de usuario buena y cómo mejorar tu widget con una configuración de actividad.