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 *