UI

Replicando Good Mood UI en Xamarin Forms

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

‚ěĖ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:

This image has an empty alt attribute; its file name is AskXammy_GoodMood_Structure-1024x748.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-08-31-at-3.48.51-PM-1024x44.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es AskXammy_GoodMood_1-552x1024.pngComo primer paso quiero construir el botón flotante. Para hacerlo, usaré un ScrollView dentro de un Grid para obtener el efecto deseado. Si quieres saber más información sobre cómo hacerlo, puedes ingresar aquí.

 
ūüí°Si deseas agregar una sombra, puede usar el Xamarin Community Toolkit, dale un vistazo aqu√≠.

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-08-27-at-5.22.21-PM-1024x47.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-08-27-at-6.53.56-PM-599x1024.png

¬°Analicemos algunos puntos importantes!

‚ěĖ Imagen redondeada: utilic√© un Frame en el que la propiedad m√°gica es IsClippedToBounds, la cual nos permite adherir sus elementos secundarios a sus orillas.

Dentro de este, agregu√© la Imagen la cual debe tener el mismo valor en las propiedades WidthRequest y HeightRequest y la mitad de dicho valor en la propiedad CornerRadius para lograr la forma redondeada exacta.

Puedes ver más información aquí.

This image has an empty alt attribute; its file name is Screen-Shot-2021-08-31-at-3.50.23-PM-1024x45.png

La imagen tiene un atributo ALT vac√≠o; su nombre de archivo es Screen-Shot-2021-08-27-at-8.50.57-PM-586x1024.pngContinuemos con las lista de Topics, aqu√≠ el objetivo es hacerlo lo m√°s escalable posible usando un CollectionView, de esta manera podr√°s agregar tantos Topics/tags como necesites en tu App sin necesidad de modificar el XAML.. ūüėé

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-08-27-at-8.19.02-PM-1024x46.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es 9ab2caea-2451-4320-890a-ce3e58ff89b5

Este bloque necesita que la informaci√≥n se presente con un patr√≥n repetitivo el cual debe estar dividido en dos columnas, para esto, usemos tambi√©n el CollectionView.

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-08-27-at-9.26.25-PM-1024x47.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es AskXammy_GoodMood_5-556x1024.png

.

¬ŅRecuerdas el primer paso donde hicimos el bot√≥n flotante? ¬°S√≠! Bueno, en este paso vamos a trabajar en el bloque de descripci√≥n y aqu√≠ es donde vamos a ver reflejado el efecto ‚Äúflotar‚ÄĚ.


 

En la imagen principal de este post agregué algunas capturas de pantalla de la versión de IOS, ahora les dejo las de Android.

 

 


 
.
.
 

Tagged , , ,

Leave a Reply

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