Replicando UI de Hamburguesas en Xamarin Forms

4 min readMay 24, 2020

Hola !!! 💁‍♀ En este caso, vamos a replicar un IU de una aplicación de Hamburguesas obtenida 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 difernetes 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:

Definiendo de la estructura principal: Para empezar necesitamos establecer la estructura de diseño completa que contendrá nuestra primera pantalla, en este caso utilizaré un Grid.

Como pudimos ver en la imagen de la estructura, estaremos replicando dos pantallas, para la comprensión correcta dividiremos el proceso de replicación una por una, terminaremos la primera y veremos su resultado, y luego la segunda. .

Una vez creada la estructura principal ¡Comencemos con el primer bloque! En esta parte trabajaremos con el bloque Main Wall y para replicarlo solo necesitamos agregar las siguientes partes:

➖ Iconos de información

➖ Barra de búsqueda

Continuemos con nuestro próximo bloque llamado 1. 2 Menú. Aquí usaremos un CollectionView horizontal. Es importante que el proyecto se adhiera al patrón de diseño MVVM. Es por eso que utilicé las propiedades de texto Binded.

Para replicar este bloque agregaremos las siguientes partes:

➖ Foto de la comida

➖ Nombre

Finalmente, para completar la primera pantalla también utilicé un CollectionView para replicar el bloque “1.3 Popular menu”.

Finalmente el resultado de nuestra primera pantalla! 🙈🙈

¡Continuemos con la segunda página!

Definiendo de la estructura principal: Para empezar necesitamos establecer la estructura de diseño completa que contendrá nuestra segunda pantalla, también utilicé un Grid.

Una vez creada la estructura principal de nuestra segunda pantalla, ¡Comencemos! En esta parte trabajaremos con el bloque “Main picture” y para replicarlo necesitamos agregar las siguientes partes:

➖ Imagen principal

➖ Título