UI, Xamarin

Replicando UI de Delivery 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:

La imagen tiene un atributo ALT vacío; su nombre de archivo es FoodDeliveryUI-1024x835.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-02-14-at-8.31.04-PM-1024x44.png

En primer lugar vamos a ocultar la barra de estado de IOS para crear un diseño más limpio. Para hacerlo solo necesitas agregar el siguiente código en el encabezado de tu ContentPage:

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-02-19-at-11.44.42-PM-522x1024.pngComencemos con una página simple, el diseño principal estará contenido en una cuadrícula. Si quieres conocer Grid, puedes ingresar aquí.

Para construir la pantalla principal, necesitamos agregar los siguientes controles:

🟡  Butón atrás

🟡  Label de saltar

🟡  Imagen principal

🟡 Título. Como puedes ver, el título tiene dos estilos diferentes. Para ver más información sobre cómo hacerlo puedes abrir el siguiente post.

🟡  Descripción

🟡  Botón circular. Si quieres más información sobre cómo hacerlo, puedes ingresar aquí.

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-02-14-at-9.40.11-PM-1024x49.png

Es importante ver que la segunda página tiene un botón flotante, por esta razón agregaremos un ScrollView dentro de un Grid. Una vez creado, agreguemos una Grid como layout principal. (Si deseas conocer más información sobre el botón flotante, puedes ingresar aquí).

Y ahora, continuemos con el bloque “Main Delivery”.

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-02-14-at-9.54.04-PM-550x1024.png

This image has an empty alt attribute; its file name is Screen-Shot-2021-02-14-at-10.03.06-PM-1024x51.png
 Ahora continuemos creando la lista de categorías. Para replicarlo, usaremos un CollectionView.

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-02-16-at-4.54.24-PM-589x1024.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-02-11-at-10.37.35-PM-1024x50.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-02-20-at-12.12.10-AM-563x1024.pngY finalmente, agreguemos la lista de Alimentos populares, también usaremos CollectionView.

Para agregar el botón flotante, dirígete al bloque dos e identifica exactamente donde dice “<! – Here add the Floating button deployment -> ”, luego reemplaza esa línea con el siguiente código:

And our Food Delivery UI  is done! ?.
To see the complete code structure you can enter to my Github repository ?

Tagged , , ,

Leave a Reply

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