Replicando un UI de perfil de usuario en Xamarin Forms

Leomaris Reyes
Feb 4 · 4 min read

¡¡Hola!! 💁‍♀ Para febrero como #LoveMonth, decidí crear una serie de artículos sobre un tema que realmente 💚 !! … Así que semanalmente replicaré algunos UIs iniciando con muy básicos y hasta más complejos! ¡Juntos podemos crear grandes cosas! ¿Estás listo para comenzar? 😎

En el primer artículo de esta serie estaremos replicando una interfaz de usuario básica basada en un diseño de perfil de usuario obtenido de Dribble. ¡Puedes ver el diseño aquí! ¡Esta vez estaremos explicando y creando paso a paso el código de nuestro UI!

Para lograr una comprensión más clara, dividiré este tema en los siguientes puntos:

➖ Dividiendo el diseño original en bloques.

➖ Analizando e implementando cada bloque obtenido


⚠ 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”. Para hacerlo, utilicé la siguiente imagen. La estructura de diseño principal estará contenida en un Grid. En dicho Grid solo definiremos una línea, para que el efecto del Bloque llamado “Contact information frame” pueda tener mejores resultados.

Para este bloque utilicé un StackLayout y lo mezclé con el Frame para lograr las formas ovaladas de arriba y las rectangulares de abajo.

Aquí está el estilo creado (Si no conoces sobre estilos puedes leer este artículo).

Aquí también trabajaremos con un Grid ( ❤) para lograr reproducir los bloques tres y cuatro. Para crear los botones de teléfono y mensaje, utilicé TranslationsY y TranslationsX. (Para acomodar un poco más fuera del marco agregado anteriormente)

Aquí el estilo creado:

Para terminar, dentro de la cuadrícula creada en el bloque anterior continuaremos agregando la información de contacto restante.

Aquí el estilo creado:

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


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