[Xamarin.Forms] Un vistazo a RefreshView

Introducción

A día de hoy, estamos a acostumbrados (y cada vez más) a utilizar gestos para realizar acciones concretas en las aplicaciones móviles. Actualizar el contenido, cambiar de sección, etc. El objetivo final es diverso pero sin duda alguna, una de las acciones con gestos más utilizadas es el Pull To Refresh.

Pull to Refresh

Pull To Refresh

En diseño para dispositivos móviles, este efecto es el gesto que se realiza para la actualización de contenidos. Es decir, el pull to refresh es el gesto que se hace deslizando (normalmente) la parte superior hacia abajo para actualizar los contenidos.

Usando RefreshView

RefreshView llega como un nuevo control en Xamarin.Forms que permite hacer pull to refresh sobre cualquier contenido scrollable (ScrollView, ListView, CollectionView, etc.). El uso es muy sencillo:

<RefreshView>
     <ScrollView>
     </ScrollView>
</RefreshView>

Ya tendríamos lo suficiente para poder hacer pull to refresh sobre el contenido del ScrollView. En este artículo, voy a utilizar una aplicación antigua del tiempo que he actualizado para usar RefreshView además de CollectionView.

El comportamiento y apariencia de RefreshView se establece con algunas propiedades básicas:

  • BackgroundColor: Color de fondo del control.
  • RefreshColor: Color del indicador de carga.
  • IsRefreshing: Propiedad de tipo bool que indica si se esta refrescando el contenido o no. Si se establece a True se desencadena un refresco.
  • Command: Por supuesto, tenemos un comando para ejecutar la lógica de refresco en el contexto (ViewModel). Además de la propiedad Command contamos con CommandParameter.

De modo que nuestro RefreshView quedaría:

<RefreshView
     BackgroundColor="{StaticResource WhiteColor}"
     RefreshColor="{StaticResource AccentColor}"
     IsRefreshing="{Binding IsBusy}"
     Command="{Binding ReloadCommand}">
     <ScrollView>
     ...
     </ScrollView>
</RefreshView>

El resultado:

 

Usando RefreshView

Puedes encontrar el código del ejemplo en GitHub:

Ver GitHub

One more thing

En UWP contamos con un Platform Specific que permite especificar la orientación del pull to refresh:

refreshView.On<Windows>().SetRefreshPullDirection(RefreshPullDirection.BottomToTop);

Permite:

  • Desde arriba.
  • Desde abajo.
  • Desde la izquierda.
  • Desde la derecha.

¿Qué te parece RefreshView?. Recuerda, cualquier comentario es bienvenido!.

Más información

Anuncios

Un pensamiento en “[Xamarin.Forms] Un vistazo a RefreshView

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s