UI, Xamarin

Replicando Contact & Message UI en Xamarin Forms

Hola !!!¬†ūüôč‚Äć‚ôÄÔłŹ¬†¬†En este art√≠culo vamos a replicar el Contact & Message 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 Screen-Shot-2022-03-08-at-11.31.08-PM-1024x818.png


La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2022-03-09-at-2.13.44-PM-1024x46.png

Comencemos por crear nuestra primera pantalla a la que llamaremos Contacts.xaml.

Establezcamos nuestro Layout principal: Este layout es el que contendr√° todos los elementos que componen nuestra UI, para ello utilizaremos el Grid.

Como podemos ver en la imagen superior, este bloque está compuesto de tres controles los cuales detallaremos a continuación:

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2022-03-09-at-2.26.53-PM-590x1024.png

Título:

Botón de agregar:

Barra de b√ļsqueda:

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2022-03-09-at-3.11.35-PM-1024x47.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2022-03-09-at-3.20.06-PM-625x1024.png

Continuando con el Bloque de Favoritos, vamos a replicar una lista de contactos, que es incluso similar a las Historias de Instagram ūüßźūüßź, para esto, usaremos un CollectionView Horizontal.

Adem√°s, para redondear los bordes de las im√°genes usaremos un Frame. ¬°F√≠jate en esta t√©cnica s√ļper interesante!

La imagen tiene un atributo ALT vac√≠o; su nombre de archivo es Screen-Shot-2022-03-09-at-4.12.59-PM-593x1024.pngPara terminar con nuestra primera pantalla, trabajemos con el bloque “Active Contacts”, ¬°ahora agregaremos un conjunto de contactos seguido de su estado!

Para hacerlo, usemos un Frame, y adentro agregaremos un CollectionView con orientación vertical para mostrar la lista.

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2022-03-09-at-4.15.35-PM-1024x46.png

Para el bloque “Messages”, crearemos otra p√°gina llamada “MessagePage.xaml”. ¬°Como layout principal tambi√©n usaremos un Grid!

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2022-03-09-at-5.02.23-PM-569x1024.pngEsta pantalla está compuesta por los siguientes componentes:

Título principal e indicador de mensajes:

Mensajes de contactos:


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

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2022-03-10-at-9.24.33-PM-1024x941.png


¬°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/ContactsMessageUI.git

Tagged , , ,

Leave a Reply

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