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 , ,

Leave a Reply

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