Además de cuidar detalles como la funcionalidad o la apariencia visual de nuestra aplicación, nuestra aplicación debe funcionar correctamente bajo todas las condiciones en todos los dispositivos para la que sea lanzada.
Un punto importante a revisar siempre suele ser, el tiempo de arranque de la aplicación.
¿Conoces conceptos como AOT?, ¿fast renderers?. En este artículo vamos a repasar algunos conceptos que podemos aplicar para tener un impacto positivo en los tiempos de arranque de la aplicación.
XAMLC
Si defines la interfaz de usuario de la aplicación Xamarin.Forms con XAML tienes la opción de utilizar XamlCompilationOptions.
Cuenta con dos valores:
Compile.
Acelera la carga de elementos visuales.
Reduce el tamaño del paquete.
La compilación (AOT) es más larga.
Skip.
Valor por defecto para mantener retocompatibilidad con versiones antiguas de Xamarin.Forms.
NOTA: Resultado obtenido tras 5 mediciones utilizando Android.
Fast Renderers
Hablamos de cambios realizados en Xamarin.Forms con el objetivo de reducir a mínimos el número de operaciones y cálculos a realizar para renderizar el control y gestionar su tamaño y posición.
Hasta ahora, la mayoría de los renderers en Android se componían de dos vistas:
Control nativo, como Button.
Un contenedor ViewGroup que se encargaba de controlar aspectos como los gestos, etc.
Sin embargo, este enfoque tiene una implicación directa en el rendimiento al crear dos elementos por cada control, lo que resulta en un árbol visual más complejo, requiere más memoria y más capacidad de procesamiento para representar en la pantalla.
Los Fast Renderers reducen la inflación y los tiempos para el renderizado de un control de Xamarin.Forms.
Veamos un ejemplo de jerarquía de elementos sin utilizar Fast Renderers:
Jerarquía sin utilizar Fast Renderers
Y utilizando Fast Renderers:
Jerarquía utilizando Fast Renderers
La diferencia:
Rendimiento con Fast Renderers
Los Fast Renderers están disponibles para los siguientes controles de Xamarin.Forms en Android:
La opción compilación AOT habilita la compilación Ahead Of Time de los ensamblados. Cuando esta opción está habilitada, la sobrecarga de inicio Just-In-Time (JIT) se minimiza al precompilar ensamblados antes del tiempo de ejecución. El código nativo resultante se incluye en el paquete (APK) junto con los ensamblados sin compilar. Esto da como resultado un tiempo de inicio de la aplicación más reducido, pero a costa de tamaños APK más grandes.
A costa de tiempos de compilación más lentos, el compilador de optimización de LLVM debe crear un código compilado más pequeño y rápido (en las pruebas, efectivamente conseguimos un paquete más ligero aunque no tenemos reducción en lso tiempos de arranque de la aplicación).
A continuación, una comparativa del tiempo de arranque de la aplicación en milisegundos entre el uso de JIT, AOT y AOT junto con la opciónde optimización de LLVM:
Rendimiento con diferentes configuraciones
Como se puede observar, la reducción de tiempo usando AOT es notoria pero…¿cómo afecta al tamaño del paquete?.
Comparativa del peso del paquete
Puedes encontrar los ejemplos utilizados así como archivos Excel con las medidas en GitHub:
El uso de imágenes en aplicaciones móviles es habitual. Es un elemento clave a la hora de conseguir buenos resultados visuales. Sin embargo, también suelen ser uno de los puntos clave que impactan en el rendimiento de la aplicación. Problemas como:
Alto consumo de memoria.
Bloqueo de la UI (carga de imágenes en el hilo de UI, etc).
Etc.
En este artículo, vamos a realizar comparaciones en el rendimiento del control Image de Xamarin.Forms entre diferentes versiones, así como una comparativa con FFImageLoading y GlideX.
Para realizar las comaparativas vamos a necesitar un ejemplo y algo de código para obtener información. Nuestro ejemplo va a ser una versión modificada del gran ejemplo realizado por Jonathan Peppers en Glidex.
Para obtener la cantidad de bytes que se estan consumiendo.
Imágenes en Xamarin.Forms
El control Image de Xamarin.Forms permite la carga de imágenes desde diferentes fuentes (URL, recurso incrustrado, etc.). El rendimiento general es correcto aunque con mejoras (mejoras en la cache, reutilizar recursos, etc.).
Desde la versión 4.0 de Xamarin.Forms se han comenzado a realizar mejoras en la gestión de imágenes. Pero…¿realmente tenemos mejora?.
Para contestar de forma correcta, vamos a cargar 100 imágenes en un Grid (evitamos usar listados y reutilización de celdas para conseguir tener un volumen elevado de imágenes en el árbol visual y en memoria).
Lanzamos la aplicación tanto utilizando la versión 3.6 como la versión 4.0. Tras lanzar la aplicación 5 veces y hacer la media de la memoria consumida:
Mejoras en la gestión de imágenes en Xamarin.Forms 4.0
Xamarin.Forms 4.0 consume una media de un 15% menos de memoria con respecto a la versión 3.6. Una buena mejora en la gestión de imágenes pero…¿podemos conseguir mejorar más al gestionar las imágenes?.
FFImageLoading
FFImageLoading es una de las librerías de la comunidad más usadas y más recomendadas. Esta librería tiene como objetivo cargar imágenes de la forma más eficiente posible. Entre las características principales (y que tienen impacto en el rendimiento):
Cache de imágenes en memoria y disco.
Múltiples imágenes usando el mismo origen (url, ruta, recurso) usarán solo un mapa de bits que se almacena en caché en memoria (menos uso de memoria).
Placeholders de carga y error.
Las imágenes se pueden ajustar automáticamente a un tamaño especificado (menos uso de memoria).
Etc.
Tras realizar benchmarking entre FFImageLoading y el control Image de Xamarin.Forms, gracias a las opciones de cache, ajuste de tamaño, etc., obtenemos mejor rendimiento con FFImageLoading.
GlideX
GlideX.Forms nos permite utilizar Glide (Una librería de carga y almacenamiento de imágenes para Android enfocada en el rendimiento) en Xamarin.Forms Android.
Al igual que anteriormente, hemos realizado benchmarking en Android entre el control Image de Xamarin.Forms, FFImageLoading y GlideX. GlideX es la opción más óptima en Android superando levemente a FFImageLoading y con una diferencia más considerable con respecto al control Image.
IImageSourceHandler
Así que, GlideX es más eficiente en Android pero…¿que usamos en iOS?. Podríamos utilizar FFImageLoading directamente en ambas plataformas, es una buena opción. Sin embargo, podríamos usar FFImageLoading en iOS y GlideX en Android.
Desde Xamarin.Forms 2.3.5, tenemos la interfaz IImageSourceHandler.Permite implementar ImageSource en la plataforma.
Ejemplo básico (en iOS):
public class ImageSourceHandler : IImageSourceHandler
{
public Task<UIImage> LoadImageAsync(
ImageSource imageSource,
CancellationToken cancellationToken = new CancellationToken(),
float scale = 1)
{
...
}
}
Podemos gestionar la fuente de imágenes de forma sencilla, utilizando en cada plataforma la opción que necesitemos. Jean-Marie Alfonsi ha creado Xamarin.Forms.ImageSourceHandlers con esta misma idea. Su uso es sencillo.
En Android, vamos a utilizar GlideX. Necesitaremos la inicialización de la librería.
Android.Glide.Forms.Init();
Mientras que en iOS, vamos a usar FFImageLoading:
FFImageLoading.FormsHandler.Init();
Benchmarking
Llegados a este punto, tenemos todo lo necesario para obtener datos y sacar algunas conclusiones. La gestión de imágenes es un punto importante a la hora de crear aplicaciones móviles. En Xamarin.Forms se continua mejorando y lo podemos ver en los datos obtenidos comparando la versión 3.6 y la versión 4.0.
A continuación, una comparativa en Android de la misma aplicación cargando 100 imágenes utilizando el control Image de Xamarin.Forms, FFImageLoading y GlideX:
La comparativa
NOTA: Los datos salen de la media de 5 medidas.
Puedes encontrar los ejemplos utilizados así como archivos Excel con las medidas en GitHub:
Otras recomendaciones
Podemos aplicar otra serie de acciones para mejorar considerablemente el rendimiento a la hora de trabajar con imágenes:
Evitar la necesidad de reducir el tamaño de imágenes (memoria consumida) en el dispositivo. Si tenemos control sobre el servidor proveedor de las imágenes, gestionar las imágenes en el mismo.
Además del punto anterior, reducir las imágenes locales utilizadas. Podemos conseguirlo de varias formas. Controlando el tamaño (o formato) de la imagen, o bien, se pueden utilizar servicios como tinypng.
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.
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.
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:
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.
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:
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:
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!.
El próximo 19 de Junio tendrá lugar en Madrid la segunda edición de la DotNet 2019 organizada por Plain Concepts, el evento técnico con tecnologías Microsoft más importante de España.
DotNet 2019
Tengo la suerte de poder participar este año con una sesión con consejos relacionados con el rendimiento en Xamarin.Forms. Con la idea de rendimiento y una entrada para el evento surge el siguiente reto…
A pesar de usar algunas buenas prácticas, cuentan con una gran variedad de posibles mejoras relacionadas con el rendimiento.
El reto es sencillo. Haz un fork del repositorio, encuentra 3 mejoras en rendimiento y envía una Pull Request. Si eres el primero en enviar Pull Request y con 3 mejoras válidas, ganarás una entrada para la DotNet 2019.
Las reglas
Tan sencillo como:
Haz un fork del repositorio.
Ejecuta, prueba y piensa.
Añade 3 cambios que impacten en el rendimiento.
Envía una PR con los cambios.
Tienes hasta el 19 de Mayo para participar. El ganador será el primero que envíe una PR válida (cuente con 3 mejoras de rendimiento).
Sencillo, ¿verdad?.
¿Una pista?
No creo que te haga falta, pero…venga, una pequeña ayuda. Hay posibles mejoras en:
Inicio de la App
Enlace a datos
Uso de Layouts
Uso de controles
Uso de imágenes
Etc
Es posible aplicar 3 mejoras de rendimiento en 5 minutos así que, anímate a participar!.
Según evoluciona de Xamarin.Forms, llegan más y más opciones que simplifican la creación de diferentes elementos de la interfaz de usuario.
En el estado actual de Xamarin.Forms se pueden conseguir aplicaciones nativas de gran escala, con interfaces cuidadas y con alta integración con la plataforma. Hay que tener en cuenta el conjunto de Custom Renderers (código específico en cada plataforma) necesario para lograrlo.
NOTA: La elección entre Xamarin Classic o Xamarin.Forms es importante. Es necesario evaluar la aplicación a desarrollar, el conjunto de características específicas de cada plataforma (que pueden requerir un Custom Renderer), etc.
En este artículo, vamos a tomar como referencia un diseño de Dribbble (por Anton Aheichanka), que intentaremos replicar con Xamarin.Forms paso a paso.
Timeline Profile
TimelinePulse
Vamos a intentar replicar la UI del diseño paso a paso en Xamarin.Forms.
Los retos del ejemplo
Vamos a comenzar haciendo un análisis de la interfaz de usuario desglosando los elementos que la componen:
Barra de navegación: Muestra el título centrado (y con una fuente específica) además de la imagen del perfil del usuario para permitir navegar rápidamente al perfil. Gracias a la propiedad TitleView de la NavigationPage, podemos añadir contenido personalizado y conseguir el resultado facilmente.
Cabecera: La cabecera muestra información relacionada con la fecha. Sin embargo, No hay nada complejo en la misma. Aplicar una imagen de fondo, y utilizar un Layout (por ejemplo, un Grid) para posicionar la información de la fecha con textos utilizando una fuente específica.
El botón para añadir: Aquí es donde vamos a tener la parte más compleja del ejemplo. ¿Por qué?. Queremos aplicar un efecto de pulso para llamar la atención del usuario. Tenemos varias formas de conseguir el resultado. Entre ellas contamos con el uso las APIs de animación de Xamarin.Forms junto con el uso de imágenes; SkiaSharp o bien Custom Renderers.
El listado: El listado cuenta con elementos que se pueden conseguir definiendo una celda personalizada. En la celda, en caso de reuniones se muestran los participantes. Ahora gracias a BindableLayout es algo sencillo.
NOTA: En este ejemplo nos hemos centrado en la vista con el timeline, por ese motivo el ejemplo no cuenta con el menu lateral deslizante u otras opciones.
Imágenes circulares
Tenemos muchas opciones para crear imágenes circulares. Entre las opciones disponibles destacan FFImageloading e ImageCirclePlugin. Sin embargo, no son las únicas opciones. A continuación, vamos a crear un pequeño control para tener imágenes circulares usando SkiaSharp.
Tras añadir SkiaSharp.Views.Forms a cada proyecto de la solución, creamos un nuevo control derivado de SKCanvasView:
public class CircularImage : SKCanvasView
{
}
Vamos a necesitar una propiedad para definir la imagen a utilizar:
public static readonly BindableProperty EmbeddedImageNameProperty =
BindableProperty.Create(nameof(EmbeddedImageName), typeof(string), typeof(CircularImage), "", propertyChanged: OnPropertyChanged);
public string EmbeddedImageName
{
get { return (string)GetValue(EmbeddedImageNameProperty); }
set { SetValue(EmbeddedImageNameProperty, value); }
}
Lo que vamos a realizar, es aplicarle un Path a la imagen, recortando en la forma deseada, circular:
SKPath CircularPath = SKPath.ParseSvgPathData("M -1,0 A 1,1 0 1 1 1,0 M -1,0 A 1,1 0 1 0 1,0");
La clave es utilizar el método ClipPath junto con DrawBitmap:
Pasamos a ver la barra de navegación. Utilizamos una NavigationPage donde con la propiedad BarBackgroundColor definimos de forma sencilla el color de fondo. ¿Y el contenido?.
Usamos la propiedad TitleView para definir el contenido personalizado:
En la definición de cada elemento del listado tenemos una peculiaridad. En caso de reunión, mostramos las personas que asisten. Para ello, hacemos uso de BindableLayout introducido en Xamarin.Forms 3.5:
Y llegamos a quizás el «eje» del ejemplo. Sin duda, la parte más detacada, el botón con la animación.
¿Cómo lo conseguimos?
Tenemos diferentes opciones, pero al igual que antes con las imágenes circulares, vamos a usar SkiaSharp.
Comenzamos creando un nuevo control, una nueva clase que herede de SKCanvasView:
public class PulseButton : SKCanvasView
{
}
Definimos algunas propiedades como:
EmbeddedImageName: Para poder establecer la imagen del botón.
PulseColor: Para definir el color de fondo del botón (circulo).
PulseSpeed: Ya que la clave es la animación, mejor tener control sobre la misma.
NOTA: Podríamos definir otras propiedades interesantes como IsAnimating para parar o lanzar la animación, Command para ejecutar una acción, etc. Ten en cuenta que es un ejemplo destinado a cubrir la UI, no una App real.
Para definir el botón, dibujaremos un círculo con el método DrawCircle y en caso de establecer una imagen vía propiedad (creada en el control de forma similar a como hicimos en el control CircularImage), la dibujaremos usando el método DrawBitmap.
canvas.Clear();
SKPoint center = new SKPoint(info.Width / 2, info.Height / 2);
paint.Color = new SKColor(R, G, B);
canvas.DrawCircle(center.X, center.Y, 85, paint);
if (_resourceBitmap != null)
canvas.DrawBitmap(_resourceBitmap, center.X - _resourceBitmap.Width / 2, center.Y - _resourceBitmap.Height / 2);
Hasta aquí todo muy sencillo. Unas propiedades básicas y un dibujado de un circula e imagen. Con esto tenemos el botón básico, pero…¿y la animación Pulse?.
Vamos a utilizar un StopWatcher para obtener un valor que irá cambiando en base al número de milisegundos que han pasado:
Fíjate en el código anterior. Usamos la variable _time (recuerda el StopWatch), para ajustar la opacidad y el radio.
El resultado final:
El resultado
Llegamos hasta aquí. Estamos ante un UI Challenge no muy complejo pero con detalles interesantes. Espero que te haya resultado interesante. El próximo será mucho más complejo…
Recuerda, cualquier comentario es bienvenida en el artículo!.
La evolución de Xamarin.Forms es constante. Cada poco tiempo recibimos novedades en forma de nuevos controles (CollectionView o ImageButton por ejemplo), nuevas propiedades, Platform Specifics, etc. con el objetivo de simplificar la creación y personalización de interfaces de usuario.
De igual forma, la comunidad y empresas terceras cada vez lanzan plugins, controles y herramientas de más calidad. Recientemente, recibimos un nuevo paquete de controles, efectos, extensiones, gráficas, etc. llamado Aurora Controls.
Aurora Controls
Aurora Controls ofrece una variedad de controles, extensiones, efectos, gráficas, controles de carga y varios helpers con el objetivo de cubrir necesidades habituales a la hora de desarrollar interfaces de usuario en Xamarin.Forms (degradados, sombras, capturar datos de diferente tipo, etc.).
Una de las características más destacable de una gran parte de los controles es el uso de SkiaSharppara realizar el dibujado de los mismos. Tenéis el código fuente del ejemplo utilizado disponible en GitHub:
Recordad que podéis dejar cualquier comentario, sugerencia o duda en los comentarios.
Si repasamos la lista de grandes novedades de Xamarin.Forms de los últimos meses encontramos una cantidad elevada de cambios. Hablamos de Shell, Visual, BindableLayout, Bindable Maps, etc que sumado a muchos pequeños detalles (FontIconSource, Read only Entry, etc.) nos brinda nuevas posibilidades.
Xamarin.Forms
¿Y si las recopilamos y vemos todas en un evento?.
El lugar
El evento se celebrará en la ETS de Ingeniería Informática. Dirección detallada:
E.T.S. Ingeniería Informática – Universidad de Sevilla, Aula por confirmar Av. Reina Mercedes s/n Sevilla Se 41012
La fecha
Será el próximo Jueves, 11 de Abril de 20:00h a 21:00h (GMT+1).
Según evoluciona de Xamarin.Forms, llegan más y más opciones que simplifican la creación de diferentes elementos de la interfaz de usuario.
En el estado actual de Xamarin.Forms se pueden conseguir aplicaciones nativas de gran escala, con interfaces cuidadas y con alta integración con la plataforma. Hay que tener en cuenta el conjunto de Custom Renderers (código específico en cada plataforma) necesario para lograrlo.
NOTA:La elección entre Xamarin Classic o Xamarin.Forms es importante. Es necesario evaluar la aplicación a desarrollar, el conjunto de características específicas de cada plataforma (que pueden requerir un Custom Renderer), etc.
En este artículo, vamos a tomar como referencia un diseño de Dribbble (por Anton Aheichanka), que intentaremos replicar con Xamarin.Formspaso a paso.
El diseño
My Tasks
Vamos a intentar replicar la UI del diseño paso a paso en Xamarin.Forms.
Los retos del ejemplo
Vamos a comenzar haciendo un análisis de la interfaz de usuario desglosando los elementos que la componen:
Cabecera: La cabecera cuenta con información del perfil de usuario. La imagen del perfil es circular algo que es sencillo de conseguir de diversas formas (FFImageLoadingcon transformaciones, ImageCirclePlugino incluso con SkiaSharp). La otra característica destacada de la cabecera es la imagen de fondo ya que tiene un corte horizontal sencillo pero que hace destacar aun más la cabecera. Entre las opciones que tenemos, una de las más sencillas es utilizar SkiaSharp.
El listado: El listado cuenta con una cabecera sencilla pero elegante, fácil de conseguir con la propiedad Header del ListView; elementos que se pueden conseguir definiendo una celda personalizada. En la celda, en caso de reuniones se muestran los participantes. Ahora gracias a BindableLayout es algo sencillo.
El menu de filtro: La característica principal de la vista. Una de mis APIs favoritas en Xamarin.Forms es la de animaciones. Sencilla pero ofrece una libertas muy alta. En este caso, podemos replicarlo usando una ContentView con imágenes en el interior y el efecto de apertura y cierre del menu lo conseguimos a base de animaciones (de escala, opacidad, etc.).
Imagen con corte horizontal
¿Cómo conseguimos la imagen con corte horizontal?
SkiaSharpsuele ser una opción ideal para opciones de dibujado. En este caso, nos vendría genial directamente dibujar la imagen pero recortando una pequeña parte (triangulo) de la parte inferior. SkiaSharp permite cargar imágenes además de tener una enorme variedad de posibilidades al tratar la misma. aplicar diferentes transformaciones, efectos, etc. Podemos hacer un recorte con trazado (un path) de una imagen.
Tras añadir los paquetes de SkiaSharp.Views.Formsa la solución, creamos un nuevo control que herede de SKCanvasView.
Comenzamos definiendo el trazado que usaremos para recortar la imagen:
SKPath Path = SKPath.ParseSvgPathData("m 0 0 l 400 0 l 0 300 l -400 -50");
Usamos el método ClipPathpara hacer el recorte:
canvas.ClipPath(Path);
Para dibujar la imagen usamos SKBitmap que pintaremos con el método DrawBitmap:
canvas.DrawBitmap(_bitmap, info.Rect);
Sencillo, ¿verdad?
Listado
Llegamos al listado. No tiene nada especialmente complejo, pero vamos a ir desglosando cada bloque. Comenzamos por la cabecera. Nos apoyamos en la propiedad Header del ListView para definir la misma:
En la definición de cada elemento del listado tenemos una peculiaridad. En caso de reunión, mostramos las personas que asisten. Para ello, hacemos uso de BindableLayoutintroducido en Xamarin.Forms 3.5:
Vamos a crear un ContentViewque contendrá primero la imagen del menu cerrado. Por otro lado, la imagen para cerrar el menu y el fondo expandido además de claro, una imagen por cada elemento del menu.
Haremos uso de GestureRecognizerspara capturar las pulsaciones en el menu o cada elemento del menú. Al pulsar haremos dos acciones.
Por un lado, lanzaremos un comando definido en el control:
public static readonly BindableProperty SelectedCommandProperty =
BindableProperty.Create("SelectedCommand", typeof(ICommand), typeof(FilterMenu), null);
public ICommand SelectedCommand
{
get { return (ICommand)GetValue(SelectedCommandProperty); }
set { SetValue(SelectedCommandProperty, value); }
}
Y por otro lado, haremos uso de animaciones!. Veamos por ejemplo, que hacemos para abrir el menu:
Ocultamos con una rotación el botón (imagen) para abrir el menu. a continuación mostramos el botón de cerrar y escalamos (importante!) el area del menu. Por último, cambiamos la opacidad de cada elemento del menu.
Sencillo, pero realmente espectacular y efectivo.
Esta idea de menu esta basada en un gran ejemplo de Alan Beechque Ricardo Vasquezha elaborado más para tener un control.
El resultado conseguido:
El resultado
Puedes encontrar el ejemplo en GitHub:
Hasta aquí el desglose del ejemplo. Lo terminamos sin Custom Renderers o efectos, haciendo uso de Xamarin.Forms y sus APIs para tareas complejas como el menú de filtro o el listado y apoyándonos en SkiaSharp para algunas tareas.
Cualquier duda o comentario es bienvenido en los comentarios!
A la hora de aprender un lenguaje o framework es ideal contar con una buena documentación, pero, contar con ejemplos complementarios es aún mejor si cabe. Poder ver el código, modificarlo y probar los resultados. Gran parte de la documentación Xamarin cuenta con ejemplos oficiales asociados disponibles en GitHub. ¿Y si pudiésemos acceder a los ejemplos de forma aún más sencilla?.
Samples Importer
Llega Samples Importer, un nuevo addin para Visual Studio para macOS, que permite acceder a ejemplos oficiales de:
Xamarin.Android
Xamarin.iOS
Xamarin.Forms
Xamarin.Mac
Pudiendo ver la información básica de cada ejemplo (título, descripción, plataformas, tags, etc.), filtrar y directamente descargar además de abrir el ejemplo directamente desde el IDE.
¿Cómo instalar?
Para instalar el addin, en Visual Studio para macOS, accedemos al menu principal y seleccionamos Extensions…
Buscamos por “Samples Importer”:
Instalar Samples Importer
Y pulsamos Install…
Tras instalar, lo primero que debemos hacer es configurar el addin. Samples Importer obtiene toda la información de cada ejemplo (así como el código del mismo) desde GitHub con el firme objetivo de ofrecer siempre el ejemplo actualizado a la última. Para ello, es necesario añadir un Personal Access Token en la configuración de Visual Studio:
Configurar el addin
NOTA: Los ejemplos se descargarán automáticamente a una ruta temporal. Sin embargo, es posible elegir una ruta específica en la configuración del addin.
¿Qué aporta?
Desde el menu Tools tenemos acceso a una nueva opción Samples Importer. Tenemos acceso a un nuevo dialogo donde podemos acceder a los ejemplos oficiales de Xamarin (Android, iOS, Xamarin.Forms, macOS). Acceder a un ejemplo, para ver el código y probar es tan sencillo como seleccionar y pulsar el botón Continue:
Usando el addin
Tras pulsar el botón, se descargará el ejemplo seleccionado a la carpeta establecida en la configuración del addin (se utiliza una carpeta temporal en caso de no establecer ninguna carpeta específica).
A continuación, una serie de capturas del addin con diferentes ejemplos:
Lo próximo
Para la próxima versión del addin se incluirán las siguientes mejoras:
En la actual versión se buscan ejemplos directamente de las carpetas de repositorios oficiales de ejemplos Xamarin. Sin embargo, la búsqueda se realiza en las carpetas de primer nivel. Existen carpetas con subcarpetas con más ejemplos. Se añadirá una búsqueda en profundidad.
Cache. Se incluirá una cache de ejemplos de modo que si, no hay cambios en el repositorio, se utilizará la cache y se evitará la carga haciendo peticiones a GitHub.
Se añadirá una opción para cargar ejemplos de la comunidad.
Puedes encontrar el código del addin en GitHub:
¿Qué te parece el addin?. Recuerda, puedes dejar un comentario directamente en la entrada!
En Xamarin.Forms tenemos un tipo especial de View llamada Layout. Un Layout es un contenedor para otros elementos permitiendo ayudar a posicionar y gestionar el tamaño de los elementos que contiene. En Xamarin.Forms contamos con una gran variedad de Layouts:
Layouts en Xamarin.Forms
Los más utilizados son el StackLayout y el Grid, y suele ser habitual hacer una composición de varios así como utilizarlos para crear controles, etc. Por ejemplo, en ocasiones se utiliza la combinación de ScrollView y StackLayout junto con ContentViews para crear un pequeño listado de elementos horizontal.
Bindable Layout
Con la llegada de Xamarin.Forms 3.5 pre2 nos llega Bindable Layout. En toda clase derivada de Layout<T>, contamos ahora con las siguientes propiedades:
ItemsSource: De tipo IEnumerable, soporta el enlace de una colección de datos.
ItemTemplate: De tipo DataTemplate, permitirá definir la apariencia visual de cada elemento.
ItemTemplateSelector: De tipo ItemTemplateSelector, permite poder elegir entre diferentes templates para cada elemento en base a ciertas condiciones.
Las propiedades resultan familiares conociendo otros controles en Xamarin.Forms como el ListView.
¿Recuerdas el ejemplo que hemos mencionado de listado horizontal?. Utilizando Bindable Layout todo se simplifica.
Uso básico
De la interfaz que estamos replicando, el caso más sencillo es el listado de amigos.
Utilizamos un estilo para habilitar el Wrapping, etc. A continuación, vamos a hacer uso de Bindable Layout para evitar definir N imágenes dentro del Layout.
Al contar con la necesidad de tener imágenes de diferente tamaño en la galería, vamos a utilizar la propiedad ItemTemplateSelector para utilizar diferentes plantillas:
