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

material frame

 

 

El primer paso es el crear la solución  para eso creamos un proyecto Xamarin Form Shell
material frame paso 1

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:

  1. 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”
  2. 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.

Comments are closed.

A %d blogueros les gusta esto: