UI, Xamarin

Replicando Boarding Pass UI en Xamarin Forms

Hola !!!¬†ūüôč‚Äć‚ôÄÔłŹ¬†¬†En este caso vamos a replicar el Boarding Pass UI 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.

‚ěĖ Estar√© utilizando estilos para que se puedas ver otras formas de llegar al mismo objetivo! ūüíö


¬°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 BoardingPassStruc-1024x888.png


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2022-01-23-at-8.08.28-PM-1024x48.png

La imagen tiene un atributo ALT vac√≠o; su nombre de archivo es Screen-Shot-2022-01-24-at-10.51.04-PM-549x1024.pngūüí• A√Īadiendo el color de fondo.

¬°Empecemos! ¬°El primer paso que debes hacer es agregar un color de fondo (BackgroundColor) a tu p√°gina! En este caso, vamos a agregarlo en ContentPage.

Aqu√≠ us√© un Resource como Color, ¬°Es un buen Tip para la centralizaci√≥n del c√≥digo! As√≠ puedes cambiar el color en la configuraci√≥n cuantaas veces quieras, cambiandolo desde un lugar √ļnico en el archivo App.xaml!!

Te dejo esta documentación para más detalles.

ūüí• ūüí• Estableciendo el Layout principal

En primer lugar, es importante definir el dise√Īo “principal” que usaremos. ¬°En este caso, usar√© un Grid!

⚠ Si quieres conocer más información sobre Grid, puedes ingresar aquí.

ūü핬†Comencemos con el bloque¬†“Boarding Main Information”

¡Este bloque está compuesto por tres columnas las cuales contienen la información de los países de destino del vuelo! ¡Veamos cómo pasarlo a código!

Para que también puedas explorar un poco los estilos, en este desarrollo de UI, estaremos trabajando con ellos!  (Como puedes ver en el bloque de código de arriba). Más abajo, te dejo la implementcaión de cada uno de ellos.

⚠  Si quieres saber más información sobre estilos, puedes entrar aquí.


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2022-01-24-at-11.07.29-PM-527x1024.png

Para este segundo bloque, solo agregaremos un Frame que contendr√° todos los detalles de nuestro Ticket.

ūüöß ¬°Para el pr√≥ximo bloque, vamos a preparar los estilos que usaremos para los T√≠tulos y los valores de cada dato del Ticket! ¬°Aprovecharemos para adelantarlo ahora!


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2022-01-25-at-2.58.17-PM-526x1024.png

¡Vamos a dividir este bloque en sub-bloques para poder detallar el paso a paso de cada línea de código!

Comenzando con la información básica de la persona

Información principal del vuelo

Más arriba agregamos la información del vuelo, ¡quiero detenerte para ver con atención la creación de la línea divisora! (La puedes identificar por Line en el código anterior) Para esto, creé un estilo y usé un Shape para lograrlo!

¬ŅVes esos agujeros que tiene el dise√Īo? ūüĎÄ

Para dar la sensaci√≥n de que el Frame est√° “cortado como un boleto”, ¬°utilic√© dos Elipses y jugu√© con el relleno del color, agregando justo el mismo color que ta tiene la p√°gina de fondo! ¬°Veamos!

Finalmente, agregu√© una imagen para simular el c√≥digo de barras. ¬°Si quieres saber c√≥mo generar un C√≥digo de Barras, te dejo este art√≠culo en el que Gerald Versluis te ense√Īa c√≥mo hacerlo! ūü§ď


¬°Y nuestro dise√Īo est√° listo! ¬†?.
Para ver la estructura completa del c√≥digo, puede ingresar a mi repositorio de Github ūüėć

https://github.com/LeomarisReyes/BoardingPassUI.git

Tagged , , ,

Leave a Reply

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