Crea widgets realistas con Jetpack Glance

Combiné el widget Glance con la API de Work Manager para crear una función para mi proyecto de código abierto limoKT, un clon mediano (GitHub). El resultado fue interesante. Quiero compartir mis ideas y experiencias a través de este artículo.

Pregunta: ¿Cuál es la característica que quería construir?Intenté burlarme de Medium Recordatorio de lectura diaria característica especial. Al usuario se le recuerda diariamente en un momento determinado que lea un artículo de la categoría/tema al que se ha suscrito.

⚒️Nivel de complejidad de implementar esta característica

intermedio: Requiere conocimientos básicos de WorkManager, DataStore, Jetpack Compose y Hilt Worker de Jetpack.

Me gustaría compartir mis experiencias en las siguientes áreas,

1. Comprenda cómo funciona el widget Glance creando nuestra interfaz de usuario no tan elegante.
2. Registro del widget.
3. Emparejamiento del widget con Work Manager.
4. Aprender acerca Definición de estado de mirada y actualice todas las instancias del widget Glance.
5. Los requisitos y pasos para crear un personalizado Definición de estado de mirada.
6. Hacer cola al trabajador para que corra regularmente.
7. Bonificación 🎁: Agregar cosas que respaldas para el widget Glance.

Analicemos cómo se implementa esta característica en detalle.

1. Agregue las dependencias requeridas y comprenda cómo funciona el widget Glance creando una interfaz de usuario simple.

Nota: Glance puede traducir Composables en RemoteViews reales, y requiere estar componiendo activado ya que depende de las capas Runtime, Graphics y Unit UI Compose. Sin embargo, es no directamente interoperable con otros elementos existentes de la interfaz de usuario de Jetpack Compose. Aprende más.

En resumen, la API de Glance tiene un conjunto de elementos de interfaz de usuario que son similares a la API de Jetpack Compose. Si no entiende este punto, vea el siguiente ejemplo.

1. Cree una clase de Kotlin, a saber «mi widget‘, que debe extenderse VistazoAppWidget y sobrescribirlo contenido Función. Agregue una nueva Columna componible e impórtela, pero asegúrese de ver el bloque de importación a continuación.

Puedes ver eso Separar componible es importado de Vista Biblioteca. Así somos nosotros no uses el modificador regular de la biblioteca de composición; En su lugar usamos el Modificador de mirada de la biblioteca Vistazo. Agreguemos un texto componible (nuevamente, asegúrese de obtenerlo de la biblioteca Glance) y todos sus parámetros, como: B. El modificador y el estilo también deben importarse de la biblioteca Glance.Primer vistazo a nuestro widget de lectura diaria creado con la API Glance de AndroidX. ¿La sensación de la interfaz de usuario no es tan elegante? Está bien 🙋‍♀️. Vamonos.

2. Registre el destinatario de su widget.

Cree una clase de Kotlin, a saber «MiWidgetReceptor‘, que debe extenderse GlanceAppWidgetReceptor e implementar su único miembro no opcional e instanciar su GlanceWidget. Debe registrar este destinatario en su AndroidManifest.xml. Este núcleo contiene todo el código requerido. (Consulte el archivo de manifiesto de Android de SlimeKT para obtener un ejemplo más sólido).

3. Emparejar el widget con Work Manager.

Hay algunos casos extremos que deben verificarse, p. B. no repetir el mismo artículo una vez que se muestra, etc., que ya he cubierto en el proyecto actual. Puedes echarles un vistazo DailyReadTask Archivo del proyecto SlimeKT para un ejemplo sólido. El fragmento de código a continuación se explica por sí mismo. Le hemos pedido a nuestra API que obtenga un artículo de la suscripción del usuario y, una vez que obtengamos el resultado, debemos actualizar nuestro widget Glance. Fácil, ¿no? Pero espera, ¡hay una trampa! ¿Cómo actualizaría el contenido de su widget desde el trabajador? No te preocupes; Lo cubrimos en la siguiente parte.

4. Aprendizaje GlanceStateDefinition y actualización del widget.

La API de Glance tiene su administrador de estado llamado Definición de estado de mirada, que utiliza Jetpack Datastore.

Jetpack DataStore es una solución de almacenamiento de datos que le permite almacenar pares clave-valor u objetos escritos con búferes de registro. DataStore utiliza corrutinas de Kotlin y Flow para almacenar datos de forma asíncrona, coherente y transaccional. Aprende más.

Volvamos a la mi widget archivar y usar Definición de estado de mirada para actualizar el contenido de nuestro widget.

• Primer paso: sobrescribir stateDefinition e instanciarlo ConfiguraciónVistazoEstadoDefinición. (Una clase que implementa VistazoDefiniciónEstado de tipo Preferencias de DataStore, y proviene de la biblioteca AndroidX Glance) (línea número 3)
• Segundo paso: obtener la transmisión VistazoDefiniciónEstado (de tipo Preferencias de DataStore) dentro de la función Content Composable usando currentState() (línea número 7)
• Tercer paso: recupere la cadena almacenada en nuestra configuración de DataStore pasando su clave única y usando los valores predeterminados del operador Elvis para una cadena vacía. (línea número 8)

Ahora podemos actualizar nuestro widget actualizando el valor de la cadena en la configuración de almacenamiento de datos. Para hacer esto, necesitamos acceder a la instancia de Datastore. La biblioteca Glance nos proporciona una función pública updateAppWidgetState que toma el ID de Glance (una instancia de GlanceAppWidget) como parámetro. Vamos a crear una pequeña función de ayuda que actualizará nuestro widget después de recuperar todas las ID de Glance disponibles. ¡Y Viola! Podemos llamar a esta función en nuestro trabajador y actualizar el contenido del widget.Pero espera, descubrí un nuevo problema 😲Si creamos una nueva instancia del mismo widget, ¡el contenido desaparecerá! No te preocupes; También lo cubrimos en la siguiente parte.

5. Los requisitos y pasos para crear una costumbre Definición de estado de mirada.

Yo pregunté marcel (Ingeniero de Relaciones con los Desarrolladores en Google) por qué el contenido desaparece cuando se crea una nueva instancia del mismo widget, mientras que Datastore es conocido principalmente por preservar los datos? Aclaró que con cada nueva instancia del widget, se crea un nuevo archivo de configuración (almacén de datos), razón por la cual el contenido es inicialmente nulo. Además, me indicó que debería hacer mi implementación. Definición de estado de mirada y compartir el mismo archivo de configuración. (para evitar el problema) Echemos un vistazo a ConfiguraciónVistazoEstadoDefinición (sin juego de palabras). Eso es una clase que implementa VistazoDefiniciónEstado de tipo Preferencias de DataStore y proviene de la biblioteca AndroidX Glance.Puede ver que se crea un nuevo archivo con el sufijo .preferences_pb y el prefijo es fileKey, que probablemente cambiará con cada nueva instancia del widget. Crear uno personalizado de nuevo VistazoDefiniciónEstado compartir el mismo archivo de preferencias es bastante sencillo.

• Paso 1: Amplíe su clase de objeto CustomState con el VistazoDefiniciónEstado de tipo Configuración de DataStore.
• Paso 2: en el método getDataStore, evite crear un nuevo archivo de configuración, es decir, cree un archivo con un inmutable/fijo Apellido.
• Paso 3: Por último, devuelva la ubicación del archivo de configuración.

Ahora puede usar su GlanceStateDefinition personalizado en lugar del proporcionado por la biblioteca.

Nota: si tiene varios widgets de Glance, considere pasar el nombre del archivo de configuración en el constructor (su definición de estado personalizado) para tener archivos de configuración separados para evitar problemas. Si aún desea utilizar un solo archivo de configuración para varios widgets de Glance, asegúrese de que la clave de configuración no sea la misma.

6. Ponga en cola el DailyReadWorker para una ejecución regular.

Si ha utilizado la biblioteca Work Manager, puede saber que podemos hacer un trabajo específico una vez o regularmente. En este caso de uso, necesitaríamos poner en cola un trabajador periódico que se repetiría después de 24 horas. Puedes comprobar eso DailyReadManager Archivo del proyecto SlimeKT para un ejemplo sólido.

7. Agregar material compatible (Android 12+)

El fondo y el color del texto de su widget se pueden ajustar a colores dinámicos agregando un modificador de fondo a Glance Composable que acepta un recurso de color. Puede crear un archivo de recursos de color en res/colors. Pago: https://issuetracker.google.com/issues/213737775

Nota: Envolver sus widgets de Glance en Jetpack Compose MaterialTheme Composable no tiene ningún efecto y no se recomienda. Marcel Pintó despejó dudas más comunes en su artículo Desmitificando Jetpack Glance para App Widgets. Asegúrese de comprobarlo.

Eso es todo. 🙋‍♂️ Si tiene alguna pregunta, no dude en comunicarse conmigo Gorjeo. ¡Estaré feliz de ayudar! Agradecimientos especiales a Marcelo Pinto y Gabor Varadi por guiar y corregir este artículo. Asegúrese de seguirlos en Twitter. Para obtener más información, consulte esta solicitud de extracción: https://github.com/kasem-sm/SlimeKT/pull/148👍 Un aplauso por este artículo sería llamativo, ¡ups! Agraciado. ¡Gracias!