Usando Material Frame en Xamarin Forms
Este post forma parte del Calendario de Adviento de Xamarin 2020 Día 4.
Un saludo amigos de la comunidad Xamarin, en el post del día 4 de Diciembre les mostrare como lograr un diseño Neomorfista a sus aplicaciones.
¿QUÉ ES EL NEOMORFISMO?
La palabra neomorfismo es la combinación de las palabras “neu” (nuevo) y “morfismo” (skeumorfismo). Esta nueva tendencia nace en este 2020, dando la vuelta de innovación en UI.
El neomorfismo busca dar un aspecto plano con luz y sombras, incluyendo texturas y profundidad en sus botones que logran dar realismo.
Este estilo está mezclado junto con el minimalismo y el esqueumorfismo, aunque el esqueumorfismo se caracteriza al imitar el mundo físico y el neomorfismo solo trata de usar una apariencia plana fusionado con el minimalismo.
A continuación les mostraré un ejemplos de cómo luce el ejemplo de esta primera parte del diseño.
material frame
El primer paso es el crear la solución para eso creamos un proyecto Xamarin Form Shell
EL siguiente paso es nombrar nuestro proyecto para empezar.
El siguiente paso es actualizar los paquetes de Xamarin Forms, para usar la última versión disponible.
un vez actualizado usaremos 2 paquetes nuguets en nuestro proyecto que son:
- Sharpnado.Shadows .- este te servira en el siguiente tutoría para los efectos de volumen en botones e imágenes. “opcional en este tutoría”
- Sharpnado.MaterialFrame.- este es el que usaremos en este tutorial.
El siguiente paso es agregar los inicializadores para el proyecto:
En nuestra libreria compartida en el archivo app.xaml.cs
agregamos la line :
Sharpnado.MaterialFrame.Initializer.Initialize(loggerEnable: false, debugLogEnable: false);
como esta en la imagen.
el siguiente paso es en Android
Es importante que la version minima de Android sea 23 ya que el plugin hace uso recursos de Material Design y estas funciones se encuentran en el sda 23 de Android 6.
El siguiente paso es ir al proyecto de iOS y abrir el archivo AppDelegate.cs, para incluir el siguiente comando:
iOSMaterialFrameRenderer.Init();
como en la imagen:
Con esto ya tenemos implementado el Nuget de Sharpnado.MaterialDesign.
Si quieres ver el proyecto completo funcionando puedes descargar el repositorio en GitHub
La ruta para ver el demo esta en https://github.com/jucaripo/materialframe-ejemplo/tree/master
este tutorial lo estaré complementando en el trayecto de este fin de semana ya que por motivos laborales y personales no me fue posible terminarlo para este día 4, y también estaré trabajando en la parte 2 del tutorial con el mostrare como lograr que los botones y algunos componentes muestren las sombras con el estilo del neomorfismo.