Replicando UI de perfil bancario en Xamarin Forms
¡¡Hola!! 💁♀ ¿Recuerdan que les había prometido una serie de artículos para Febrero (#LoveMonth)? ¡Pues como lo prometí vamos a continuar con la segunda publicación de la serie de UI! En este caso vamos a replicar un IU de un perfil bancario 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! 😍 El primer bloque se llama “Profile picture” y para replicarlo estaremos agregando lo siguiente:
➖Foto para el perfil (Para hacerlo utilicé la siguiente imagen)
➖Nombre del propietario del perfil
➖ID del propietario del perfil
Get Leomaris Reyes’s stories in your inbox
Join Medium for free to get updates from this writer.
Como es el primer bloque de nuestra página, necesitamos establecer la estructura de diseño completa que estaremos utilizando, en este caso trabajaremos con el ScrollView y StackLayout.
Para replicar el bloque llamado “Contact information frame”, solo necesitamos agregar un Frame para lograr las formas ovaladas de arriba.
Para agregar toda la información de contacto, trabajaremos con un Grid que estará formado por dos columnas y seis filas. Empezaremos agregando el bloque llamado “Your balance”.
Para el bloque “Cards” usaremos 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.
Y finalmente también utilicé un CollectionView para replicar la lista del historial.
En la imagen principal de este artículo, agregué una imagen de las pantallas en la versión de IOS, ahora dejaré las de Android.
¡Y nuestro diseño de perfil bancario 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-banking-profile-ui-in-xamarin-forms/
