Replicando UI de viajes en Xamarin Forms

Leomaris Reyes
Feb 29 · 3 min read

¡¡Hola!! 💁‍♀ ¡En el #LoveMonth continuaremos con la tercera publicación de la serie UI para febrero! En este caso, vamos a replicar un IU de viaje obtenida de Dribble. ¡Puedes ver 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.


¡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! En esta parte trabajaremos con el bloque Principal y para replicar solo necesitamos agregar las siguientes partes:

➖ Imagen principal

➖ Nombre del lugar de viaje

➖ Fecha del viaje

Como es el primer bloque de nuestra página necesitamos establecer la estructura de diseño completa que contendrá nuestro diseño, en este caso utilizaré un StackLayout.


Para construir el bloque Days lo dividiremos en tres partes:.

➖ Agregando el diseño a XAML

Manejando los cambios de días: Utilicé Visual State Managers (Si quieres leer un poco más del tema puedes hacer click aquí.)

➖ Estableciendo el aspecto de los días seleccionados y no seleccionados.

Para crear esta parte inspiré en este ejemplo.

Veamos cada bloque:

Agregando el diseño a XAML:

Manejando los cambios de días (Agrega este código en tu App.xaml):

Estableciendo el aspecto de los días seleccionados y no seleccionados (En este ejemplo estaremos trabajando en el archivo: TuPagina.xaml.cs)::


Una vez que construimos el bloque Days, continuemos con nuestro último bloque llamado Schedule. Aquí utilizaremos un CollectionView. 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 necesitamos agregar las siguientes partes:

➖ Tiempo

➖ Indicador de viaje

➖ Lugar destino

➖ Descripción del lugar

¡Y nuestro diseño de viajes está listo! 😎


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

Gracias por leer mi artículo! 💚💕

Artículo en inglés: https://askxammy.com/lets-replicate-a-travel-app-in-xamarin-forms/

Leomaris Reyes

Written by

I'm Leomaris Reyes, Microsoft MVP from the Dominican Republic, with more than 6 years of experience in Software Development. ❤

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade