UI, Uncategorized, Xamarin

Refactorizando UI de Facebook en Xamarin Forms

Hace unos años creé un post llamado “Replicando el UI del perfil de Facebook en Xamarin Forms” el cuál amé hacer 😍 y estaba pensando que con el tiempo los lenguajes, Frameworks tienen nuevas funcionalidades las cuales están diseñadas para hacer más efectiva nuestras Apps, por esta razón es importante mantenerlas actualizadas. A continuación te doy algunos puntos importantes a tener en cuenta:

📒 Planifica la refactorización de tu código: Es genial que actualices tu código, pero toma en cuenta los imprevistos que pueden ocurrir al realizar estos cambios. Al integrar / modificar / eliminar nuevas funcionalidades puedes afrontar diferentes imprevistos desencadenados por algunas condiciones que tu App actualmente necesita y que no contemplaste en su momento, por esta razón debes de crear una planificación para hacerlo.

🕵️‍♀️ Primero haz un pequeño análisis: Parte del punto anterior de la planificación, se basa en una estimación de tiempo, por eso te recomiendo hacer un relevantamiento de las oportunidades de mejora que tu App necesita (Por ejemplo: Qué Nuget debes actualizar, que otro puedes eliminar, actualizaciones en layouts (como el Grid 🤓)).

Por último, pero no menos importante, desglosaremos el código paso a paso. En el momento de la publicación anterior, nos centramos en la definición de puntos generales y carga del repositorio, sin cubrir el paso a paso. Por esta razón, ¡lo cubriremos en este post!


⚠ 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 Facebook_AskXammy_UI-1024x574.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-10-04-at-5.25.10-PM.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-10-04-at-6.55.25-PM.pngEmpecemos por el bloque “Header”, vamos a dividirlo en diferentes sub-bloques, los cuales serán los siguientes :

Layout principal: Como layout principal usaremos el Grid. Uno de los cambios más importantes que haremos en el código en general, es reemplazar los Grids de “Estructura larga” por la estructura simple, haciendo nuestro código más limpio, reducido y sin afectar el resultado final.

Timeline: Para agregar el TimeLine utilicé  PancakeView el cual me ayuda a redondear los bordes. 💚

 Foto de perfil, nombre y descripción: Para hacer la imagen redondeada utilicé un pequeño Tip usando un Frame para lograr la forma circular!

💥 Anteriormente usé FFImageLoading, ¡puedes seguir usando este Nuget sin problemas! ¡Solo te doy una opción adicional para hacerlo! 💚

Estilos por plataforma: Como habrás notado, algunos botones como “Agregar historial” tienen diferentes estilos tanto para Android como para iOS, vamos a ver como hacerlo de manera sencilla!

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-10-04-at-7.00.59-PM.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-10-04-at-8.43.19-PM.png

Como se trata de un conjunto de informaciones del usuario (Que depende de la cantidad de registros guardados), significa que puede reducir o aumentar la posición del Layout, ¡Por eso elegí trabajar con BindableLayout! Es super interesante, si quieres saber más información, ¡dale un vistazo aquí!

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-10-04-at-8.49.15-PM.png

Y ahora, vamos a crear el álbum de fotos, para hacerlo, usaremos el CollectionView. (Si deseas conocer más información al respecto, puedes ingresar aquí).

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-10-04-at-8.52.00-PM.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-10-04-at-9.00.41-PM.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-10-04-at-9.26.45-PM.png¡Continuemos con el bloque Amigos y también usando CollectionView! 🤓

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-10-04-at-9.28.05-PM.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-10-04-at-9.57.29-PM.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-10-04-at-10.09.28-PM.png

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-10-04-at-11.15.26-PM.pngFinalmente, agreguemos los comentarios, ¡aquí también usaremos un BindableLayout para lograrlo!


En la imagen principal de esta publicación agregué alguna captura de pantalla de la versión de IOS, ahora dejo las de la de Android.
La imagen tiene un atributo ALT vacío; su nombre de archivo es AndroidFB.png

¡Y nuestro UI de Facebook está listo! ?.
.
Para ver la estructura completa del código puedes ingresar a mi repositorio de Github ?
.
.
Tagged , , ,

Leave a Reply

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