UI, Xamarin

Replicando UI de Compras Navideñas en Xamarin Forms

Hola !!! 🙋‍♀️  En este caso vamos a replicar el UI de Facturas obtenido de Dribble. ¡Puedes consultar el diseño aquí! Es post fue creado para el Segundo Calendario de Adviento de Xamarin en Español, dale un vistazo y  podrás encontrar maravillosos artículos!


⚠ Antes de comenzar: Para aprovechar al máximo la publicación te dejaré algunas notas instructivas para que tengas una mejor experiencia reproduciendo la interfaz de usuario.

➖ Al principio verás una imagen con la interfaz de usuario original donde estará dividida por bloques tal cual y como la estaremos trabajaremos.

➖ Cada bloque presenta la imagen con el diseño explícito con el que estaremos trabajaremos (Se resaltan en un cuadro de color)

➖ En cada uno de los bloques de código podrás ver un comentario que dice: “Here add the code that is being explained in the next block”. Para mantenerte lo más enfocad@ posible, en esta parte se indica que la siguiente explicación del código va justo donde se agrega esta línea en comentarios.

➖No estaré utilizando estilos para que se puedan ver y comprender más rápido las propiedades agregadas a los diferentes componentes en el proceso de explicación.


¡Empecemos!

¡Dividiendo el diseño original en bloques!

Para comprender mejor he dividido el diseño original en bloques, los cuales se enumeran en el orden de prioridad con el que vamos a reproducir cada uno:

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-25-at-3.56.25-PM-1024x707.png


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-25-at-3.59.23-PM-1024x51.png

Antes de comenzar, consideremos algunos puntos importantes para agregar a nuestra primera pantalla:

         1. Ocultar la barra de estado

En tu Info.plist agrega las siguientes líneas:

La imagen tiene un atributo ALT vacío; su nombre de archivo es if_apple-ios-system-platform-os-mac-linux_652586.png

En su MainActivity.cs en el método OnCreate agrega las siguientes líneas:

La imagen tiene un atributo ALT vacío; su nombre de archivo es if_android_313085.png

2. Asignaremos un BackgroundColor a ContentPage

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-26-at-2.27.15-PM-592x1024.png¡Ahora comencemos! El primer paso es crear la estructura principal que contendrá el diseño.

Para los bordes redondeados, usaremos PancakeView! Dentro agregue el siguiente código:

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-25-at-4.28.34-PM-1024x48.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-26-at-2.32.31-PM-604x1024.pngPara el segundo bloque incluiremos los detalles del producto. En este caso, necesitamos lograr que la apariencia redondeada del bloque anterior sea una continuación de este. Veamos cómo hacerlo.🤓

Lo dividiremos en dos partes:

1. Primer bloque de código con el primer borde de la derecha redondeado

2. En esta segunda parte agregaremos un Pancake para dar continuidad a la terminación del bloque con los bordes inferiores redondeados.

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-25-at-4.47.17-PM-1024x48.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-26-at-2.36.03-PM-623x1024.png
Finalmente, agreguemos el botón “Agregar al carrito”. Con este paso, hemos completado el diseño de la primera pantalla.

Aquí vamos a agregar una navegación simple para poder presentar la otra pantalla desde este botón, por esta razón en el bloque de código anterior se puede ver el evento Clicked = “Btn_Clicked”. Y luego procedemos a crear el evento:

.

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-25-at-4.53.57-PM-1024x50.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-26-at-3.14.58-PM-627x1024.png¡Ahora comencemos con la segunda pantalla! El primer bloque se llama “Header”. Seguiremos manteniendo el mismo efecto de los bordes continuos, para esta pantalla tendremos los siguientes componentes:

  • Título
  • Cantidad de artículos
  • botón de artículos acumulados

⚠ En esta pantalla, también debe establecer la propiedad BackgroundColor en el ContentPage como en la anterior.

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-26-at-10.14.26-PM-1024x50.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-26-at-10.18.50-PM-630x1024.png!Continuemos con la lista de productos agregados. Para hacerlo usaremos un CollectionView!

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-26-at-10.23.39-PM-1024x51.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-26-at-10.28.41-PM-599x1024.png

.

¡Y finalmente, el bloque de pago que contiene el monto total de los artículos agregados a nuestra lista!

.

..

.

.

.


En la imagen principal de esta publicación agregué alguna captura de pantalla de la versión de IOS, ahora dejo las de la de Android.
La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-26-at-10.36.20-PM-1024x867.png.

Tagged , ,

3 thoughts on “Replicando UI de Compras Navideñas en Xamarin Forms

  1. Bonito diseño, creativo, me ha gustado las formas curvas o redondeadas y los colores de las fuentes usadas son muy convenientes.

    Saludos.

Leave a Reply

Your email address will not be published. Required fields are marked *