Replicando UI de Streaming en Xamarin Forms
Hola !!! 💁♀ En este caso vamos a replicar el UI de un Streaming 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:
¡Empecemos! Para el primer paso estaremos trabajando con el bloque “Main Banner” y para replicarlo solo necesitamos agregar las siguientes partes:
➖ Imagen principal
➖ Nombre del actor
➖ Descripción del actor
➖ Más opciones
Definición de la estructura principal: Para comenzar a desarrollar la estructura de diseño completa que contendrá nuestra primera pantalla, usaré un Grid. Es importante tener en cuenta que estamos usando un ScrollView para evitar complicaciones al visualizar en pantallas pequeñas.
⚠ Como puedes ver agregué la propiedad BackgroundColor para comenzar a replicar como en el diseño original con color de fondo negro.
Luego agrega los componentes del banner principal:
Ahora, vamos a trabajar con el bloque de información del actor que está compuesto por los siguientes componentes:
➖ Imagen del actor
➖ Descripción
➖ Información de nacimiento
Finalmente, construyamos el bloque de películas. Este bloque es mi favorito 😍 y para construir necesitas agregar los siguientes componentes:
➖ Título y seleccionar todas las opciones
➖ Lista de películas
En la imagen principal de este post agregué una captura de pantalla de la versión de IOS, ahora les dejo las de la de Android.
¡Y nuestro diseño de la App de Streaming está listo! 😎.
Gracias por leer mi artículo! 💚💕
Para ver la estructura completa del código puedes ingresar a mi repositorio de Github!
Artículo en inglés: https://askxammy.com/replicating-streaming-ui-app-in-xamarin-forms/
