[Xamarin.Foms] Pull To Refresh

Novedades 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.

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:

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:

Realizamos Pull To Refresh:

Se lanza el comando LoadCommand cargando diez nuevos elementos:

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *