Introducción
Volvemos a por un reto de interfaz de usuario con Xamarin.Forms. En este artículo, vamos a tomar como referencia un diseño de Dribbble (por Shirley Yao), que intentaremos replicar con paso a paso.
Art News
Vamos a intentar replicar la UI del diseño paso a paso en Xamarin.Forms.
Los retos del ejemplo
Vamos a replicar dos pantallas con algunos retos, pero la clave del ejemplo es la transición de elementos compartidos entre las dos páginas.
- Listado horizontal: La llegada de CollectionView es no solo una mejora en el rendimiento a la hora de trabajar con colecciones, también con diferentes Layouts (listados horizontales, GridViews, etc.). En este ejemplo, el número de elementos en el listado horizontal es bajo, por lo que podemos también hacer uso de un sencillo StackLayout y Bindable Layout.
- Grid de fotos en los detalles: En caso de mostrar un número limitado o concreto de fotos en la galería mostrada en la página de detalles, podría usar un Layout. Probablemente un Grid o FlexLayout. Sin embargo, en caso de no ser limitado, CollectionView nos permite mostrar un número indeterminado de fotos en dos columnas de forma sencilla.
- Transición entre páginas: Por defecto, no tenemos soporte a transiciones de páginas en Xamarin.Forms. Contamos con dos tipos de transiciones diferentes. Por un lado, las transiciones tradiciones que implican una animación de toda la página al entrar o salir. Por otro lado, tenemos las conocidas como transcisiones de elementos compartidos. En muchas ocasiones, tenemos un elemento visual compartido entre dos páginas (por ejemplo, una imagen) para trasmitir una sensación de fluidez y continuidad. En este ejemplo, veremos ambas opciones. Es necesario crear un Custom Renderer de la NavigationPage para conseguir el objetivo. Por suerte, no partimos de cero, utilizaremos Xamarin.Plugin.SharedTransitions.
- Animaciones: Necesitamos una sencilla animación de Fade In y translación desde la parte inferior hacia la superior al navegar a la página de detalles (además de la transición). Xamarin.Forms cuenta con una completa Api de animaciones. En el ejemplo usaremos Xamanimation que nos ofrece animaciones prepadas, Storyboard y la posibilidad de usarlo todo desde XAML.
Listado horizontal
Para crear el listado horizontal utilizaremos Bindable Layouts.
<ScrollView
Orientation="Horizontal"
HorizontalScrollBarVisibility="Default"
VerticalScrollBarVisibility="Never">
<StackLayout
x:Name="Highlights"
Padding="20, 0, 0, 36"
Orientation="Horizontal"
BindableLayout.ItemsSource="{Binding Author.Highlights}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid
x:Name="HighlightTemplate"
RowSpacing="0"
Style="{StaticResource HighlightStyle}">
...
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
Usamos un scroll horizontal (sin mostrar la barra de scroll vertical) con un StackLayout apilando los elementos horizontalmente. La clave es el uso de las propiedades BindableLayout.ItemsSource y BindableLayout.ItemTemplate.
El resultado:
Listado horizontal
NOTA: En caso de contar con un número de elementos elevado, recuerda que no tenemos virtualización, etc. al usar Bindable Layouts. En dicho caso, es más recomendable utilizar CollectionView.
Grid de fotos en los detalles
El Layout de fotos se puede conseguir de diferentes formas. Probablemente, y ante un número determinado de elementos (un número bajo de elementos) se podría usar un Grid o FlexLayout con Bindable Layouts. Sin embargo, en este caso se ha utilizado CollectionView.
<CollectionView
Grid.Row="1"
ItemsSource="{Binding ArtItem.Related}"
SelectionMode="None"
InputTransparent="True">
<CollectionView.ItemsLayout>
<GridItemsLayout
Orientation="Vertical"
Span="2"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<templates:RelatedContentTemplate />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Para mostrar las dos columnas, utilizamos la propiedad ItemsLayout con GridItemsLayout utilizando la propiedad Span para indicar el número de columnas deseadas.
El resultado:
Grid de contenido relacionado
Sencillo, ¿verdad?. La llegada de BindableLayouts y de CollectionView nos permite conseguir resultados que hasta ahora requerían la creación de Custom Controls o Custom Renderers.
Transiciones entre páginas
Llegamos al “plato fuerte” del ejemplo, las transiciones entre páginas. Vamos a utilizar una versión modificada (al momento de escribir este artículo quedan algunas Pull Request pendientea por mergear, aunque los cambios de este ejemplo acabarán estando probablemente en la librería) de Xamarin.Plugin.SharedTransitions.
La idea de la librería es:
- Custom Renderer de NavigationPage donde permitir las transiciones tradicionales (animación de entrada y salida de una página).
- Effects que poder aplicar a elementos de la UI para permitir aplicar transiciones de elementos compartidos.
En cualquier página (ContentPage), podemos indicar la transición a utilizar de forma sencilla utilizando el método SetBackgroundAnimation:
SharedTransitionNavigationPage.SetBackgroundAnimation(this, BackgroundAnimation.SlideFromLeft); SharedTransitionNavigationPage.SetSharedTransitionDuration(this, 500);
Entre las opciones disponibles:
- Fade
- Flip
- SlideFromLeft
- SlideFromRight
- SlideFromTop
- SlideFromBottom
¿Y las transiciones de elementos conectados?
Vamos a ver como utilizarlas. Comenzando añadiendo el namespace XAML necesario:
xmlns:sharedTransitions="clr-namespace:Plugin.SharedTransitions;assembly=Plugin.SharedTransitions"
En casos básicos, por ejemplo, conectar dos elementos individuales, por ejemplo un botón en dos páginas diferentes, bastará con utilizar la propiedad Tag disponible en la clase Transition.
En caso de querer hacer transiciones entre elementos de una colección como es nuestro caso (imagen correspondiente a una plantilla usada en un Bindable Layout), necesitamos utilizar además de Tag, la propiedad TagGroup.
sharedTransitions:Transition.TagGroup="1"
sharedTransitions:Transition.Tag="{Binding Number}"
NOTA: Cada elemento debe tener un Tag único.
En la página de destino, volvemos a aplicar el mismo Tag utilizado en la página anterior.
sharedTransitions:Transition.Tag="{Binding ArtItem.Number}"
NOTA: No es necesario utilizar TagGroup en la página de destino.
¿Limitaciones?
- De momento, entre las transiciones tradicionales soportadas se incluyen las opciones vistas previamente. Proximamente espero añadir alguna opción más (Scale, etc.).
- Las transiciones de elementos compartidos funcionan con: Label, Image, Button. Próximamente se añadirá soporte a más elementos.
- Funciona utilizando una NavigationPage. No tiene integración con Shell por ahora.
Animaciones
Llegamos al detalle final del ejemplo. Aunque al navegar a la página de detalles la transición realizada con la imagen que se situará como cabecera conseguirá ya un efecto de fluidez y continuidad elevado, también contamos con una animación del resto del contenido.
Xamarin.Forms cuenta con una API de animaciones completa y sencilla de utilizar. Sin embargo, vamos a conseguir el efecto buscado de forma aún más sencilla directamente desde XAML utilizando Xamanimation.
Para utilizar la librería, comenzamos añadiendo el namespace en la página de detalles:
xmlns:xamanimation="clr-namespace:Xamanimation;assembly=Xamanimation"
A continuación, vamos a crear un Storyboard:
<xamanimation:StoryBoard
x:Key="ArtItemContentAnimation"
Target="{x:Reference ArtItemContent}">
<xamanimation:TranslateToAnimation TranslateY="0" Duration="300"/>
<xamanimation:FadeInAnimation />
</xamanimation:StoryBoard>
El Storyboard nos permite realizar una animación más compleja, compuesta por otras animaciones. Vamos a hacer una animación de translación hacia arriba además de hacer animar la opacidad del contenido (de 0 a 1).
¿Y cómo se lanza la animación?
Utilizamos un Trigger, para lanzar la animación en el evento Appearing de la página:
<ContentPage.Triggers>
<EventTrigger Event="Appearing">
<xamanimation:BeginAnimation
Animation="{StaticResource ArtItemContentAnimation}" />
</EventTrigger>
</ContentPage.Triggers>
El resultado final:
El resultado
¿Qué te parece?
En cuanto al ejemplo, esta disponible en GitHub:
Llegamos hasta aquí. Estamos ante un UI Challenge donde el mayor punto de interés recae en las transiciones. Espero que te haya resultado interesante. Pronto más y mejor. Recuerda, cualquier comentario es bienvenida en el artículo!.
Más información
- GitHub: Art News
- GitHub: [Spec] Transitions Api
