Construyendo ComposeWidget con Jetpack Glance | Autor: Matthew Meehan | Diciembre de 2021

Recientemente, Android anunció Versión alfa de Jetpack Glance, Marco de construcción de widgets buUna generaciónEstá encima de Jetpack Compose. Con el lanzamiento de Android 12, se han mejorado los widgets de la aplicación para mejorar en gran medida la experiencia del desarrollador y del usuario. Por lo tanto, Glance proporciona una forma conveniente y optimizada de crear widgets con menos código. El marco proporciona un conjunto de componentes básicos que se pueden usar para crear experiencias de usuario hermosas y prácticas. Como introducción al uso de Glance, se diseñará un widget de aplicación simple para rastrear cuántos vasos de agua bebe un usuario en un día.El repositorio de Github se puede encontrar aquí.

Para comenzar a crear widgets de aplicaciones, debe realizar algunos pasos preliminares. Glance es compatible con la última versión estable de Android Studio, por lo que debe actualizarse en consecuencia. En cuanto al proyecto, se requieren varias dependencias de Gradle.

Dado que Glance se basa en el marco de redacción, se requieren varias dependencias de redacción y Glance en sí. Además, la redacción debe estar habilitada para el proyecto.

Dado que Glance solo está disponible como instantánea, es una compilación generada regularmente en el repositorio androidx.dev, por lo que debe incluirse en «settings.gradle»:

Antes de escribir cualquier componible, debe declarar el widget en el manifiesto de Android y usar otra información de definición.

Información del widget

Los widgets de un vistazo, al igual que los widgets no componibles, sus atributos requieren una definición xml. En el proyecto, puede crear un nuevo directorio de recursos llamado «xml», que lo contendrá. Se creará un nuevo archivo «water_widget_info.xml» en «xml».

Esta appwidget-provider Proporcione atributos sobre widgets para Android.

• Nombre del widget («WaterWidget» en este ejemplo)
• Su información de tamaño mínimo en DP
• Cómo ajustan los usuarios el tamaño de los widgets
• El tamaño predeterminado del widget, que es una nueva característica de Android 12. Se establece automáticamente en 2×2, pero se puede escalar de 2×1 a 4×3.
• Categoría, que define el tipo de widget; puede ser la pantalla de inicio, el protector de teclas o el cuadro de búsqueda.

Con esta información básica, esta información xml ahora se puede incluir en la lista.

Lista de verificación de Android

Para declarar el widget correctamente, debe escribir el receptor en el manifiesto de Android. Como paso preliminar, se escribirá un código repetitivo para crear las clases de receptor y widget. Primero, se creará un archivo llamado «WaterWidget.kt», que contiene estos dos componentes.

Esta WaterWidgetReceiver ampliar GlanceAppWidgetReceiver Actúa como proveedor de widgets. Este widget proporcionado, WaterWidget , Contiene una función componible Content() Contendrá el diseño del widget.

Una vez definidas estas clases, el receptor se puede agregar a la lista.

• name Se utilizará la clase de receptor creada anteriormente: WaterWidgetReceiver
• El filtro de intención se declara para recibir actualizaciones del widget.
• Los metadatos utilizarán los atributos previamente definidos en «water_widget_info.xml»

Diseño inicial y de vista previa

Como último paso de este proceso inicial, es necesario definir los diseños inicial y de vista previa para que el widget pueda funcionar correctamente. Desafortunadamente, estos diseños deben escribirse en xml, porque la redacción aún no se admite aquí. Dado que esta parte del código todavía se basa en RemoteView, se necesita uno de los diseños xml compatibles:

• Disposición del marco
• Disposición lineal
• Disposición relativa
• Diseño de cuadrícula

ConstraintLayout no se aplica al diseño inicial o de vista previa de los widgets.

El diseño inicial es un elemento heredado que contiene el diseño de los widgets declarados en xml. Actualmente, la documentación de Glance explica que se requiere un diseño inicial, pero se eliminará en el futuro. Por lo tanto, un diseño de marco simple actuará como un marcador de posición hasta que se pueda eliminar con la próxima actualización de Glance.

Cuando el usuario selecciona un widget del menú de widgets y lo arrastra a la pantalla de inicio, el diseño de vista previa mostrará una vista previa del widget.

Esta vista previa está diseñada para imitar cómo se verá el widget cuando esté integrado en Compose. Estos se pueden agregar a los atributos en «water_widget_info.xml»:

Nota: antes de Android 12, la vista previa usa android:previewImage Propiedades y use imágenes en lugar de xml para mostrar la vista previa. Para compatibilidad con versiones anteriores, también se puede utilizar este método.

Con suerte, con la actualización de Glance, ya no necesitará crear ninguno de estos componentes xml, porque es contrario a la intuición crear tanto xml como componer diseños al mismo tiempo.

Una vez hecho todo esto, es hora de escribir algunos componibles para los widgets. El widget en sí es simple, contendrá cuatro componentes principales:

• El texto del contador que muestra cuántos vasos de agua ha bebido el usuario.
• Texto que muestra la cantidad de vasos recomendados por día
• Botón para agregar vasos al mostrador
• Un botón para poner a cero el contador.

Escribe contenido componible

Se puede crear un archivo separado llamado «WaterWidgetContent.kt», y las funciones componibles residirán en este archivo. Nota: Debido a que se pueden compilar con Glance, los componentes utilizados provendrán del marco de Glance, no de la combinación estándar.Por lo tanto, usarán GlanceModifier En vez de Modifier Para cambiar su comportamiento.

A partir del texto del contador, la función recuperará una cadena formateada y le pasará la cantidad de vasos bebidos como parámetro.

Esta cadena de formato es de tipo numérico (en este caso, Int) Para mostrar el progreso del usuario. Tenga en cuenta que estos Composables son proporcionados por Glance, no por la biblioteca habitual de Androidx. El comportamiento de estos componentes de la interfaz de usuario y Glance Modifier es muy similar al de sus componentes de Androidx.

A continuación, el texto objetivo contendrá la lógica para seleccionar la cadena en función de si el usuario ha alcanzado el objetivo.

constante RECOMMENDED_DAILY_GLASSES Se puede definir en «WaterWidget.kt» en el objeto complementario.

Ahora, puede declarar botones para agregar y restablecer contadores. Primero, debe agregar los activos vectoriales de cada imagen al paquete res «dibujable».

Los activos que usan el «signo más» se agregarán al contador, y los restablecimientos del contador usarán el activo «bote de basura».Estas imágenes pueden estar en un Row Alinéelos horizontalmente.

Para escribir el procesamiento de clics, un vistazo ActionCallback Debe crearse para cada uno de los dos botones.

Devolución de llamada de acción

mirada ActionCallbacks Exactamente lo que implicaron; realizan acciones cuando se les notifica.En un nuevo archivo llamado «WaterWidgetActions», puede crear dos clases que se extenderán ActionCallbacks .

Estas funciones aprovechan la función de suspensión de la clase padre onRun(); Cuando se llama a la devolución de llamada, la lógica onRun() Será ejecutado.Estas devoluciones de llamada se pueden utilizar actionRunCallback() Combinar con esto clickable(…) .

Sin embargo, antes de implementar la lógica real en cualquiera de estas devoluciones de llamada, se debe verificar el procesamiento de estado.

Resumen de uso

Para que el widget rastree correctamente la cantidad de veces que el usuario ha aumentado el contador, necesita rastrear el estado; esto se puede hacer a través de los componentes proporcionados por Glance.De regreso AddWaterClickAction , Esta onRun() La función se puede modificar:

Aquí, la función de suspensión updateAppWidgetState(…) Proporcione acceso y edite el alcance del almacenamiento de datos.En este caso, debido a PreferencesGlanceStateDefinition Pasado como parámetro, use SharedPreferences de Android.Puede utilizar el método apropiado para recuperar el valor en SharedPreferences Preferences.Key Depende del tipo de valor de retorno esperado. En este caso (por la cantidad de tazas de agua), intPreferencesKey Usado.

Una vez recuperado, la función compara el número de vasos almacenados con el límite superior definido (en este caso, se usa 999 solo para evitar que el usuario aumente el contador indefinidamente), y si no se excede el límite, el valor se incrementa en uno. . Después de hacer esto, WaterWidget().update(context, glanceId) Llamado para actualizar el estado del widget con nuevos datos.

La constante es WATER_WIDGET_PREFS_KEY y MAX_GLASSES Puede definirse en el objeto complementario WaterWidget clase:

por ClearWaterClickAction La lógica es más simple:

Similar a otra devolución de llamada, esta devolución de llamada accede al valor almacenado de la misma cantidad de vasos. Sin embargo, esta función establecerá el valor almacenado en cero, restableciendo así el progreso diario del usuario.

Una vez que estos valores se almacenan correctamente, se puede acceder a ellos desde el estado del propio widget.

Ponlo todo junto

En «WaterWidgetContent.kt», puede crear una función componible para encapsular cada componente individual del widget y exponer el contexto y el estado de cada componente.

Aquí, Glance usa LocalContext.current Proporcione el contexto del widget para cada componible, mientras stateDefinition Se sobrescribe para proporcionar el estado. Dado que SharedPreferences se utilizó para almacenar el valor en la devolución de llamada, PreferencesGlanceStateDefinition Se usa para acceder a ellos nuevamente. ahora, currentState() Se puede utilizar en funciones componibles para recuperar los datos necesarios.Como antes, se puede utilizar la cantidad de vasos que el usuario ha bebido hoy WATER_WIDGET_PREFS_KEY Y páselo a cada componente de texto.

Como se mencionó anteriormente, el GlanceAppWidget Contiene un componible Content() Función, aquí es donde se puede llamar a esta función componible. Una vez completado el diseño, puede agregar widgets funcionales a la pantalla de inicio.

Dado que Glance aún se encuentra en sus primeras etapas, este código puede cambiarse, pero es de esperar que esta aparición temprana pueda ayudar a resolver lo que está a punto de suceder.