UI, Xamarin

Replicando UI de Sneakers en Xamarin Forms

Hola !!! 🙋‍♀️  En este caso vamos a replicar el UI de Sneakers (Tenis) 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 Screen-Shot-2020-09-24-at-10.37.28-PM-1024x698.png


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

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-09-23-at-11.57.48-PM-590x1024.png

.Comencemos con la pantalla de la izquierda 🤓

Es importante saber que antes de todo tenemos que definir el layout padre que tendrá nuestra pantalla principal. En este caso usaré una Grid (Realmente me encanta 💕)

 
Al realizar la replica de cualquiera interfaz de usuario es muy importante prestar atención a cada detalle de nuestro bloque a replicar, en este caso para el bloque “Main header” necesitaremos agregar los siguientes componentes:
.
➖ Contador del carrito (Para redondear la esquina izquierda usé PancakeView)
➖ Icono de corazón
➖ Icono de busqueda
➖ Menu
 

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-09-24-at-12.11.57-AM-1024x51.png
 
.
La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-09-24-at-12.19.42-AM-608x1024.png.
En este bloque solo agregaremos el título el cual se divide en una sola etiqueta con diferentes características (para ello utilicé FormattedString) y un botón de configuración.
 

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

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-09-24-at-12.33.16-AM-577x1024.png

Ahora usemos CollectionView para crear la lista de los Sneakers (Tenis). Si quieres conocer más información al respecto puedes ingresar aqui.

En este bloque necesitaremos agregar los siguientes componentes:

➖ Imagen principal ( para redondear los bordesusé  PancakeView)
➖ Botón de corazón
➖ Titulo
➖ Precio

 
¡Continuemos con la última pantalla! 🤓

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

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-09-25-at-12.15.44-AM-623x1024.pngContinuemos con la última pantalla, en este caso es el detalle del tenis. Para crear la estructura principal, también usaré un Grid como en el código de bloque agregado a continuación:

⚠ Si quieres saber más información sobre Grid puedes entrar aqui.

El primer bloque se llama “Sneaker menu” y aquí tenemos un círculo en el centro para replicarlo usaremos las formas de Xamarin Forms.

.

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

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-09-25-at-12.33.06-AM-613x1024.png

.

Para trabajar en este bloque, necesitaremos usar algunos componentes adicionales, como CollectionView y agregaremos botones circulares con los colores disponibles (Puedes ver este tema más detallado aquí).

En detalle, debemos integrar los siguientes componentes:

➖ Titulo principal
.
.
➖ Selector de colores ( Para redondear los bordesusé  PancakeView)
.
.
➖ Precio

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

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-09-25-at-12.54.46-AM-594x1024.png.

.

¡Y finalmente! ¡Trabajemos con el bloque Descripción!

 

.


Y nuestro diseño esta listo! ?.

⚠ En ocasiones queremos que nuestro diseño únicamente se adapte a un tipo de orientación, por esta razón lo configuré solo para Portrait. Si quiere más información sobre como hacerlo puedes acceder aquí.

 
Para ver la estructura completa del código puedes ingresar a mi repositorio de Github ?
 
.
 

Tagged , ,

1 thought on “Replicando UI de Sneakers en Xamarin Forms

Leave a Reply

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