.NET Maui, UI

Replicando Pet UI en .NET MAUI

Hola !!!¬†ūüôč‚Äć‚ôÄÔłŹ ¬†En este art√≠culo vamos a replicar el Pet Adoption UI obtenido¬†de¬†Dribble. ¬°Puedes darle un ojo al 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:

La imagen tiene un atributo ALT vacío; su nombre de archivo es PetStructure.png


¬°Primero, definamos el layout principal que usaremos!

En este caso usaremos un Grid y lo estructuraremos como puedes ver en el siguiente bloque de código:

⚠ Si quieres saber más información sobre el Grid, te invito a ver este artículo.

La imagen tiene un atributo ALT vacío; su nombre de archivo es Step1_Profile_Picture-1024x60.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es AskXammy-PetUI-Bloque1.png¡Comencemos con el desarrollo de los bloques!

El primero es el Profile Picture, aquí solo debemos agregar la imagen de perfil de la Mascota.

.


La imagen tiene un atributo ALT vacío; su nombre de archivo es Step2_PetCard-1024x61.png

Para empezar dividiremos este bloque en sub-bloques, cada uno de ellos irá con su explicación seguido de su implementación en código, son los siguientes:

La imagen tiene un atributo ALT vacío; su nombre de archivo es AskXammy-PetUI-Bloque2.pngFrame y Grid principal del bloque.

Evaluemos los objetivos::

‚úĒ Bordes redondeados, estos son los bordes redondeados que se pueden ver en la parte superior de la imagen, para ello usaremos un Frame.

‚úĒ Superposici√≥n de controles, para conseguir el efecto de superposici√≥n utilizaremos la propiedad Margin, a la que en el valor Top le asignaremos un valor negativo para conseguir el efecto de estar encima de la imagen del bloque anterior.

Ahora veámoslo en código:

Agreguemos los controles al Frame

Ahora agregaremos la información general contenida dentro del Frame, informaciones como nombre principal, dirección, entre otros.


La imagen tiene un atributo ALT vacío; su nombre de archivo es Step3_Details-1024x60.png

.

Para finalizar, continuemos con el √ļltimo bloque, el cual est√° conformado por los siguientes componentes:

This image has an empty alt attribute; its file name is Screen-Shot-2022-07-04-at-6.09.57-PM.png‚úĒ Foto redondeada, nombre, rol y fecha

‚úĒ Descripci√≥n

‚úĒ Botones de Me gusta y de adoptar


¬°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/PetAdoptionUI

Tagged ,

Leave a Reply

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