UI

Replicando UI de Facturas en Xamarin Forms

Hola !!! 🙋‍♀️  En este caso vamos a replicar el UI de Facturas obtenido de Dribble. ¡Puedes consultar el diseño aquí!


⚠ 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:

This image has an empty alt attribute; its file name is Screen-Shot-2020-12-10-at-9.45.58-PM-857x1024.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-11-27-at-8.52.29-PM-1024x53.png

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

Definición de la estructura principal: Para comenzar a desarrollar la estructura de diseño completa que contendrá nuestra pantalla, usaré un Grid. Es importante tener en cuenta que estamos utilizando ScrollView para evitar complicaciones al visualizar en pantallas pequeñas.

Una vez definida la estructura principal, ¡Comencemos!  😎

Para replicar el primer bloque lo dividiremos en tres partes:

1⃣ Frame con la información de precio

2⃣ Imagen principal

3⃣ Barra indicadora


1⃣ Comenzando con el marco con información de precios, ¡Exploraremos los Shapes y los Estilos! Comencemos con la implementación .xaml:

Y luego, como vemos a continuación, crearemos los tres estilos que serán aplicado a nuestros controles: MainAmount, SecundaryText y DivisionLine.
.

2⃣ Ahora continuemos con la imagen principal.

3⃣  Finalmente agreguemos la barra indicadora. Para hacerlo, utilicé un PancakeVew! 💕

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

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

Me encanta la parte que viene ahora !! 😍 ¡Porque los Shapes nos ayudan a dar el aspecto de “Factura” que necesitamos! Para lograr la forma de los bordes redondeados donde se encuentran los Frames, creé dos círculos y jugué con las propiedades de Translation. ¡Veamos! 👀

Para replicar dividámonos en partes: Lista de productos, Cantidad de productos y bordea redondeados (con Shapes 💕). La primera implementación a realizar es la lista de productos:

La segunda es la parte Cantidad de productos. Toma en cuenta que esta parte debe ser agregada en el código de bloque previamente agregado, exactamente donde dice: <!– Here add the code that is being explained in the next step–>
.

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-12-09-at-12.27.27-AM-1024x49.png

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

¡En el tercer bloque, desarrollaremos la línea de tiempo de nuestra aplicación! 😎.

.


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

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

.
Por último, agreguemos el bloque de botones de pago. Es importante ver los usos de FormattedText, nos ayuda a crear un solo label con diferentes caracteristicas. 😎.

.

.
.
.
.

Tagged , , , ,

Leave a Reply

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