El reto
Volvemos a por un reto de interfaz de usuario con Xamarin.Forms. En esta ocasión, crear un efecto Pull To Refresh personalizado.
La UI a replicar
Los retos del ejemplo
Los retos para conseguir un Pull to Refresh personalizado son los siguientes:
- Pull to Refresh: Contamos con el control RefreshView diseñado justamente para hacer pull to refresh. Sin embargo, el contenido al hacer refresco no es personalizable. Así que, para conseguir el resultado deseado vamos a utilizar un SwipeView. El contenido del SwipeView será el listado de vuelos mientras que usaremos un SwipeItemView (soporta una View como contenido) para añadir la animación personalizada.
- La animación de refresco: Para la animación de refresco vamos a usar Lottie.
- El listado de vuelos: El listado de vuelos se realizará usando CollectionView.
Listado de vuelos
El listado es de todos los elementos de la interfaz, la parte más sencilla.
<CollectionView
ItemsSource="{Binding Booking}">
</CollectionView>
Mostramos un listado de vuelos resultados de una búsqueda. En la cabecera mostramos información básica como el número total de resultados. Podemos conseguir añadir la información encima de cada resultado usando la cabecera (Header) del CollectionView.
<CollectionView.Header>
<Grid
Padding="0, 12, 0, 0">
<Label
Text="2 Search Results"
Style="{StaticResource HeaderStyle}"/>
</Grid>
</CollectionView.Header>
El resultado:
La cabecera del listado de vuelos
Cada resultado de trayecto puede tener múltiples vuelos. Vamos a usar Bindable Layout dentro de cada elemento del CollectionView.
<StackLayout
BindableLayout.ItemsSource="{Binding Flights}">
</StackLayout>
De esta forma adaptaremos cada celda de forma sencilla a mostrar el total de paradas y trayectos de un resultado:
Detalles de cada vuelos
Sencillo, ¿verdad?.
Pull to Refresh personalizado
La clave del ejemplo, el efecto Pull to Refresh personalizado lo conseguimos usando el control SwipeView. SwipeView permite cuatro direcciones para hacer swipe: arriba, abajo, izquierda y derecha. En nuestro caso, queremos hacer pull desde la parte superior y por ello vamos a utilizar TopItems. Podemos usar:
- SwipeItem: Acción contextual sencilla. Es fácil de configurar (color de fondo, texto e icono), pudiendo ejecutar un comando o evento.
- SwipeItemView: Permite como contenido una View, por lo que las opciones de personalización son más altas.
¿Sabes que vamos a utilizar en este caso?. Probablemente has acertado, vamos a usar un SwipeItemView donde vamos a añadir nuestra animación personalizada.
<SwipeView
x:Name="SwipeView"
SwipeEnded="OnSwipeEnded">
<!-- PULL TO REFRESH CONTENT -->
<SwipeView.TopItems>
<SwipeItemView>
<Grid
HeightRequest="60">
<!-- CUSTOM ANIMATION -->
</Grid>
</SwipeItemView>
</SwipeView.TopItems>
<!-- CONTENT -->
<Grid>
<CollectionView
ItemsSource="{Binding Booking}">
</CollectionView>
</Grid>
</SwipeView>
Pasamos a ver como definir la animación personalizada.
Animación usando Lottie
La librería Lottie fue creada por Airbnb inicialmente para iOS, Android y React Native. Sin embargo, gracias a la contrinución de Martijn van Dijk y otros miembros de la comuidad, tenemos soporte en Xamarin y Xamarin.Forms.
Para comenzar a trabajar con Lottie en Xamarin.Forms utilizaremos el paquete NuGet Aribnb.Xamarin.Forms.Lottie:
Install-Package Com.Airbnb.Xamarin.Forms.Lottie
Para completar el proceso de preparación de Lottie en nuestro proyecto Xamarin.Forms, necesitamos añadir la siguiente línea tras la inicialización de Xamarin.Forms en cada proyecto nativo:
AnimationViewRenderer.Init();
Para poder mostrar una animación de Lottie, debemos añadir el archivo JSON a cada proyecto nativo:
- Android: En la carpeta Assets. El archivo debe tener como acción de compilación AndroidAsset.
- iOS: En la carpeta Resources. El archivo debe tener como acción de compilación BundleResource.
- UWP: En la carpeta Assets (o en la raíz), el archivo debe tener como acción de compilación Content.
Para mostrar la animación necesitamos un elemento visual que nos permita visualizar la animación además realizar una gestión de la misma. Este elemento visual es AnimationView.
<SwipeView.TopItems>
<SwipeItemView>
<Grid
BackgroundColor="{StaticResource AccentColor}"
HeightRequest="60">
<lottie:AnimationView
Animation="pulltorefresh.json"
Loop="False"
AutoPlay="True"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"/>
</Grid>
</SwipeItemView>
</SwipeView.TopItems>
En nuestro ejemplo usamos esta gran animación creada por Lenny Miranda jr.
Animación de refresco
Obtener recursos
Un gran fuente de animaciones es LottieFiles. Puedes encontrar una gran variedad de animaciones listas para utilizar con opciones de búsqueda, etc.
LottieFiles
NOTA: Si usas animaciones de LottieFiles, recuerda otorgar crédito a sus creadores.
Con la definición del CollectionView, SwipeView y animación con Lottie, tenemos todo lo necesario. Veamos el resultado final!.
El resultado
Puedes encontrar el código en GitHub:
Más información
- Microsoft Docs: SwipeView
Javier Suárez | Blog 