[Xamarin.Foms] Pull To Refresh

ReloadNovedades de Xamarin.Forms 1.4

La semana pasada Xamarin liberó la versión 1.4.0 de Xamarin.Forms. Una nueva versión con la celeridad a la que nos tienen acostumbrados y cargada de novedades interesantes:

  • Novedades en el ScrollView tanto a nivel de propiedades como de evnetos destinados a determinar cuando se realiza scroll, mover el scroll a una posición concreta, etc.
  • Novedades en el ListView con nuevas opciones como Header y Footer además de incluir la opció de gestionar Pull To Refresh.
  • Nuevos eventos añadidos a la clase Forms.Application para gestionar la navegación con modales.
  • Corrección de Bugs.

Pull To Refresh

El comportamiento “Pull To Refresh” es un gesto sencillo que permite generalmente refrescar la información mostrada con un sencillo gesto. Inicialmente introducido en Tweetie, cliente Twitter de iPhone, gracias a la facilidad de uso la implementación del comportamiento se ha extendido en cientos de Apps. De forma habitual consiste en un gesto de deslizamiento desde la parte inferior hacia abajo, en ese momento se muestra feedback al usuario indicando que se refrescará la información, de modo que, al levantar el dedo se produce el refresco.

Pull To Refresh

Pull To Refresh

A pesar de todo, existen ciertas variantes en Apps conocidas en múltiples plataformas.

Pull To Refresh incluido en Xamarin.Forms 1.4.0

En Xamarin Classic y en Xamarin.Forms ya teníamos disponibles algunas implementaciones para utilizar con todas las plataformas y por supuesto también podíamos crearnos nuestra propia implementación utilizando custom renderers. Ahora nos llega una implementación bastante completa y sencilla directamente en las APIs de Xamarin.Forms:

public event EventHandler Refreshing;
 
public bool IsPullToRefreshEnabled { get; set; } = false;
public bool IsRefreshing { get; set; } = false;
public ICommand RefreshCommand { get; set; } = null;
 
public void BeginRefresh ();
public void EndRefresh ();

Podemos utilizar la propiedad IsPullToRefreshEnabled para habilitar en el ListView el comportamiento “Pull To Refresh”. Cuando el usuario lanza un Pull To Refresh el comando RefreshCommand. La propiedad IsRefreshing nos indica si se esta produciendo el refresco.

NOTA: Podemos establecer la propiedad IsRefreshing a false para terminar con el estado de refresco.

Contámos tambien con eventos para comenzar y detener el refresco. BeginRefresh y EndRefresh respectivamente.

Para probar las posibilidades crearemos un nuevo proyecto Xamarin.Forms:

Nueva Aplicación Xamarin.Forms

Nueva Aplicación Xamarin.Forms

Añadimos las carpetas Views y ViewModels en nuestra PCL. Añadimos la ViewModelBase y una implementación de DelegateCommand además de una vista XAML. En nuestra página añadiremos un ListView que será el utilizado para implementar Pull To Refresh:

<ListView>
</ListView>

En nuestra ViewModel necesitaremos una propiedad pública con la colección de elementos a bindear al ListView. Además utilizaremos una propiedad boolean para determinar si se está produciendo el refresco de la información o no:

private ObservableCollection<string> _items; 

public ObservableCollection<string> Items
{
    get { return _items; }
    set { _items = value; }
}

private bool _isBusy;
   
public bool IsBusy  
{
     get { return _isBusy; }
     set
     {
          _isBusy = value;
          RaisePropertyChanged();
     }
}

Continuamos añadiendo el comando que se ejecutará al realizar Pull To Refresh:

private DelegateCommandAsync _loadCommand;

public ICommand LoadCommand
{
     get { return _loadCommand ?? (_loadCommand = new DelegateCommandAsync(LoadCommandExecute)); }
}

private async Task LoadCommandExecute()
{
     await LoadData();
}

En la ejecución del comando se lanza el método LoadData:

private async Task LoadData()
{
     if (IsBusy)
          return;

     IsBusy = true;

     await Task.Delay(3000);

     for (int i = 0; i < 10; i++)
     {
          Items.Insert(0, _count.ToString());
          _count++;
     }

     IsBusy = false;
}

Para simplificar el ejemplo se cargan valores numéricos a la colección. Se verifica que no se estén cargando datos, y se realiza la carga de diez nuevos elementos.

NOTA: Se añade un retraso de 3 segundos en el método LoadData para simular el refresco desde cualquier servicio.

Nuestro ListView quedaría:

<ListView
     ItemsSource="{Binding Items}"
     HasUnevenRows="True"
     IsPullToRefreshEnabled="True"
     RefreshCommand="{Binding LoadCommand}"
     IsRefreshing="{Binding IsBusy, Mode=OneWay}">
</ListView>

Cargamos la información de la colección Items, permitiendo el comportamiento Pull To Refresh estableciendo la propiedad IsPullToRefreshEnabled a True, controlando si se esta realizando el refresco con la propiedad IsBusy y ejecutamos la lógica de refresco cargando más información mediante el comando LoadCommand.

Si ejecutamos la App, al arrancar cargará los diez primeros elementos:

Listado de elementos

Listado de elementos

Realizamos Pull To Refresh:

Realizando Pull To Refresh

Realizando Pull To Refresh

Se lanza el comando LoadCommand cargando diez nuevos elementos:

Tras hacer Pull To Refresh

Tras hacer Pull To Refresh

Podéis descargar el sencillo ejemplo realizado a continuación:

También podéis acceder al código fuente directamente en GitHub:

Ver GitHub

Recordar que cualquier tipo de duda o sugerencia la podéis dejar en los comentarios de la entrada.

Más información

Un pensamiento en “[Xamarin.Foms] Pull To Refresh

  1. Hi, thanks for your article, but I’ve found that pull-to-refresh doesn’t working on windows phone solution. Is there are any possibility to integrate this functionality to windows phone.
    Thanks a lot

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 )

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 )

Google+ photo

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

Conectando a %s