Añadiendo funcionalidad Pull-to-Refresh con Xamarin.Forms RefreshView
Esta publicación es parte del Calendario de Adviento Xamarin, una iniciativa liderada por Luis Beltrán. Revisa este enlace para conocer más artículos interesantes sobre Xamarin (y tecnologías afines) publicados por varios miembros de la comunidad.
Cuando una aplicación móvil muestra contenido que puede cambiar de forma dinámica en cuestión de segundos, es importante brindar al usuario una manera de actualizar la información lo más naturalmente posible. La forma más común de lograr esto es a través de un gesto conocido como Pull To Refresh, el cual consiste en deslizar la parte superior hacia abajo para actualizar los contenidos.
Si en tu aplicación de Xamarin utilizabas ListView, la función de pull-to-refresh podría ser incorporada haciendo uso de la propiedad IsPullToRefreshEnabled. En el caso de ScrollView y CollectionView, podrías utilizar el plugin PullToRefreshLayout for Xamarin.Forms.
Ahora, a partir de Xamarin.Forms 4.3 ya es posible implementar la funcionalidad Pull-To-Refresh de forma natural en cualquier contenido desplazable gracias al nuevo control RefreshView, el cual es muy sencillo de utilizar,
Los puntos más importantes de este control son:
- El contenido hijo de un RefreshView debe ser un contenido desplazable, por ejemplo ScrollView, CollectionView o ListView.
- La propiedad IsRefreshing (de tipo bool) indica el estado actual del control.
- RefreshColor (de tipo Color) indica el color del círculo que aparece durante la actualización de información.
- Se puede definir un Command (de tipo ICommand), el cual será ejecutado cuando la operación de refresh sea desencadenada.
- CommandParameter (de tipo object) indica el parámetro que será enviado al comando de ejecución.
- La propiedad IsEnabled (de tipo bool) dictamina si el control está activado o no, es decir, si los usuarios pueden hacer pull-to-refresh o no.
Todas las propiedades mencionadas son bindeables, por lo que si utilizas el patrón MVVM, añadir esta funcionalidad a tu aplicación requerirá cambios mínimos.
¡Vamos a verlo en acción con un ejemplo! De hecho, vamos a implementar pull-to-refresh en la lista de publicaciones del Calendario de Adviento Xamarin que cree en mi entrada anterior “Generando archivos de Excel con Xamarin.Forms“:
Paso 1. Clona o descarga el proyecto XamarinAdventCalendarApp desde mi repositorio de GitHub, en concreto modificaremos a partir de la versión cuyo nombre de commit es Publications data source updated, disponible en este enlace.
Paso 2. RefreshView requiere que utilicemos como mínimo la versión 4.3 de Xamarin.Forms así que asegúrate que la versión actual del proyecto cumple esta condición. Considera esto para tus futuras apps en donde desees implementar RefreshView.
Paso 3. Vamos a realizar los siguientes cambios en PublicationViewModel:
- Agregamos la propiedad IsRefreshing para controlar el estado del RefreshView.
- Agregamos el comando RefreshCommand y lo inicializamos en el constructor, indicando que su método a ejecutar es LoadPublications.
- Al final del método LoadPublications asignamos el valor false a la propiedad IsRefreshing para indicar que ya no se debe mostrar más el círculo de progreso. Esto es importante, siempre debemos indicar el fin de la actualización asignando IsRefreshing manualmente en false.
El código relevante de la clase se muestra a continuación:
Paso 4. Ahora vamos a modificar la vista PublicationView, donde simplemente añadiremos el control RefreshView con las propiedades IsRefreshing, Command y RefreshColor. Por supuesto, el control “hijo” será nuestro ListView (el contenido a actualizar), y el resto de la vista se queda tal cual. El código se muestra a continuación:
Paso 5. ¡Eso es todo! Compila y ejecuta el proyecto. Primero verás la lista de publicaciones cargada, y al hacer pull-to-refresh aparecerá la animación del progreso de actualización, desapareciendo cuando se hayan recargado los datos.
El código fuente de esta aplicación está disponible en mi repositorio de GitHub.
Como puedes ver, gracias a las actualizaciones en Xamarin.Forms 4.3 es posible añadir la funcionalidad de pull-to-refresh de una manera ágil y sencilla en nuestros contenidos dinámicos. Ahora te toca implementarlo en tus proyectos, tus usuarios te lo agradecerán 🙂
Como nota final, es importante también hacer mención de que si en algún momento asignas manualmente IsRefreshing (ya sea la del RefreshView o su propiedad enlazada) en true, en automático se ejecutará el comando enlazado y también comenzará la animación de refrescado.
Espero que esta publicación te haya sido de utilidad, no olvides compartirla en tus redes sociales, tal vez le sirva a alguien más =)
No olvides seguir el resto de las interesantes publicaciones del Calendario de Adviento Xamarin. También puedes seguir la conversación en Twitter con el hashtag #AdvientoXamarin y en la Comunidad Xamarin en Español.
¡Gracias por la visita y hasta la próxima!
Luis
