UI

Replicando Book Worm UI en Xamarin Forms

Hola !!! 🙋‍♀️  En este caso vamos a replicar el Book Worm UI App 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-2021-04-06-at-4.51.21-PM.png

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

Comencemos a crear nuestra estructura de layout principal la cual estará contenida en un Grid. Si quieres conocer más sobre el Grid, puedes ingresar aquí.

Luego agrega un color de fondo a la página. 🤓

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-04-25-at-8.46.45-PM-583x1024.pngEmpezemos a crear nuestro primer bloque, incluiremos los componentes del encabezado el cual está compuesto por tres controles,  son los siguientes:

➖ Logotipo de Book Worm

➖Botón de cierre

➖Imagen principal

En este caso necesitamos hacer un degradado en la imagen principal, para explicarlo mejor vamos a dividirlo en dos partes:

1⃣. Iniciamos incluyendo los dos primeros componentes:

.

2⃣. Finalmente trabajemos con el degradado de la imagen.

¿Cómo lo haremos?

Primero agregaremos la Imagen, luego continuaremos agregando un Frame con un LinearGradientBrush para lograr que en ambas plataformas se perciba el degradado en la imagen y así lograr el efecto deseado. Si quieres saber más información sobre los degradados en Xamarin Forms puedes leer este artículo, es un tema muy útil y divertido!

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

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-04-25-at-9.51.02-PM-604x1024.png

Para el segundo bloque necesitamos agregar solo dos controles los cuales son los siguientes:

➖Título

➖Descripción

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-04-06-at-5.07.01-PM-1024x47.png

Para terminar los bloques que completan la primera pantalla, agreguemos las “Cards”.

This image has an empty alt attribute; its file name is Screen-Shot-2021-04-25-at-10.03.11-PM-596x1024.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-04-06-at-5.07.40-PM-1024x45.png

¡Continuemos con la última pantalla la cual llamaremos RoomPage! Para construirla detallaremos cada una de las partes que esta contiene. ¡Empecemos paso a paso!

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-04-27-at-3.49.24-PM-559x1024.png
1⃣
. Preparando el Layout principal y los componentes superiores: Comenzaremos a trabajar con la imagen de fondo y agregaremos los botones superiores que son el botón Atrás y “Take a Tour”.

2⃣. Trabajando con la estructura del Frame: Además de agregar el Frame, en esta parte trabajaremos en la estructura del Layout que contendrá dicho Frame.

3⃣. Agregando los componentes dentro del Frame.


En la imagen principal de esta publicación, agregué algunas capturas de pantalla de la versión de IOS, ahora dejo las de la de Android.

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-04-27-at-4.02.20-PM-1024x619.png


Tagged , , ,

Leave a Reply

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