Replicando el UI del perfil de Facebook en Xamarin Forms

Leomaris Reyes
Oct 11 · 3 min read
IOS Facebook UI Sample

¡Hola chic@s!! Esta vez creé un artículo un poco diferente a mis publicaciones habituales, ¡Desarrollé la interfaz de usuario del perfil de Facebook! Y para que puedas ver y entender todo el código, enumeraré los elementos que utilicé, así como también dejé algunas publicaciones en las cuales se explican dichos temas para que puedas comprenderlos mucho mejor en caso de que aún no los hayas utilizado.

Permiteme decirte que este es un tema que realmente A-M-O 😍 ya que cuando hacemos, observamos o aprendemos este tipo de ejercicios, realmente podemos ver cuán poderoso es Xamarin Forms. 💪


Herramientas que utilicé

Para replicar la interfaz de usuario del perfil de Facebook, utilicé las siguientes herramientas:

🔷 PancakeView —Es un paquete que facilita la administración de nuestro UI, dándonos diferentes funciones para aplicar a nuestro controles tales como esquinas redondeadas, bordes, sombras y más! https://github.com/sthewissen/Xamarin.Forms.PancakeView

🔷 Patrón de diseño MVVM — Nos ayuda a separar la lógica empresarial y la interfaz de usuario, facilitando el proceso de pruebas, mantenimiento y la evolución y desarrollo de nuestro código. https://medium.com/%40reyes.leomaris/aplicando-el-patr%C3%B3n-de-dise%C3%B1o-mvvm-d4156e51bbe5

🔷 Bindable layout —¡Es muy efectivo cuando necesitas agregar el mismo modelo de diseño más de una vez ya que permite agregarlo una vez y el resto será Bindeado y repetido la cantidad de veces que amerite el source! https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/bindable-layouts

🔷 CollectionView — Nos permite mostrar una lista de datos. Es muy similar al ListView, pero este control mejora el rendimiento y la administración de memoria de la lista, además cubre diferentes presentaciones de diseño, tales como: Vertical, horizontal y cuadrícula (Grid), lo que lo hace mucho mejor y nos ahorra tiempo de desarrollo.

https://medium.com/@reyes.leomaris/conociendo-los-layout-del-collectionview-7e7a74483dcd

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout

🔷 FFImageLoading — Es un paquete que proporciona la capacidad de cargar imágenes y ayudar a reducir el consumo de recursos y optimizar el tamaño de los mismos. https://medium.com/@reyes.leomaris/optimizando-y-manejando-imagenes-con-ffimageloading-1a1b9f34b417

🔷 Estilos —Un estilo es un conjunto de propiedades visuales que se definen con el objetivo de asignar características visuales específicas para tantos controles como desees establecer. https://medium.com/@reyes.leomaris/como-trabajar-con-estilos-en-xaml-para-xamarin-forms-3cae3cffe595

🔷 GridView — Es un tipo de diseño (layout) que permite organizar los elementos de su pantalla en filas y columnas para lograr un modelo de cuadrícula. https://medium.com/@reyes.leomaris/trabajando-con-gridlayout-in-xamarin-forms-db3506001eaa

🔷 Bloqueando la orientación — https://medium.com/%40reyes.leomaris/peque%C3%B1as-cosas-que-deber%C3%ADa-saber-para-preparar-su-proyecto-bbb8598e10c3


En la imagen principal de este artículo agregué unas capturas de pantallas de la versión en IOS, ahora veamos las de Android.

Android Facebook UI Sample

Si quieres convertirte en un mejor desarrollador de XAML UI, ¡Es importante practicar más con este tipo de proyectos para dominar XAML! ¡Aprovecho esta oportunidad para dejarte este enlace en el que hablo de algunos consejos sobre cómo trabajar en el UI! ¡Espero que te sea muy útil! 😊

Y finalmente te dejo el repositorio de la replica del UI del perfil Facebook! 😍 https://github.com/LeomarisReyes/FaceBookUISample


Artículo en inglés: https://askxammy.com/replicating-facebook-profile-ui-in-xamarin-forms/

¡Gracias por leer mi post! 💚💕

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