Conociendo los layouts del CollectionView

Leomaris Reyes

El CollectionView es un control que nos permite mostrar una lista de datos. Es muy similar al ListView pero este control mejora el rendimiento y la gestión de memoria de la lista y proporciona diferentes layouts tales como: Vertical, horizontal y cuadrícula (Grid), lo que lo hace mucho mejor y más rápido nuestro tiempo de desarrollo. Este control está disponible desde la versión de Xamarin Forms 4.0.

En este artículo aprenderemos los siguientes temas:

🔷 ¿Qué necesito hacer para comenzar?

🔷 Tipos de diseño

Listas verticales y horizontales

Grids verticales y horizontales

🔷 Manejando un CollectionView vacío


Primero que todo … ¿Qué necesito para comenzar?

Antes que nada, les digo que CollectionView en una vista Experimental, es por eso que necesitamos inicializar la vista experimental tanto de Android como de iOS. Simplemente agrega el siguiente código justo antes de llamar a Forms.Init () en tu MainActivity.cs y AppDelegate.cs.

¡Un recordatorio sobre qué es una vista experimental!

Una vista experimental, como su nombre indica, son funciones o bibliotecas de versiones de vistas de Xamarin. Los formularios están disponibles para fines experimentales y debe indicar que desea habilitarlo. Si desea obtener más información al respecto, puede ingresar aquí.


¡Empecemos!

Tipos de diseño

¡El CollectionView nos proporciona diseños diferentes que nos permiten mostrar los datos de una manera más divertida! ¡Conozcamoslo uno por uno!

Listas verticales y horizontales

Conociendo la estructura

Como mostramos anteriormente, tanto la lista horizontal como la vertical, usaron la misma estructura, solo debes especificar en la propiedad ItemLayout cuál desea implementar.

⚠ Es muy importante agregar siempre la propiedad HeightRequest porque si no lo hacemos el CollectionView no será visible en la pantalla.

¡Creemos un ejemplo!

Para crear este y cada ejemplo en este post, utilicé el patrón MVVM para el llenado de datos. Puedes ver más información sobre este patrón aquí.

Horizontal CollectionView
Vertical CollectionView

Grid verticales y horizontales

¡Creemos un ejemplo!


Manejo de una CollectionView vacío

Podemos encontrarnos con el escenario de que nuestro CollectionView no tiene datos disponibles, por lo que es bueno manejar esto para que nuestros usuarios estén siempre informados visualmente de lo que sucede en nuestra aplicación. ¡Podemos hacerlo de dos maneras! ¡Veamos!

1⃣ Lo obtenemos simplemente agregando la propiedad EmptyView en la declaración de nuestro CollectionView. Recibe un valor String.

2⃣ A la estructura normal de tu CollectionView, agrega las etiquetas <CollectionView.EmptyView> y dentro de ella agrega el código de diseño de tu interfaz de usuario, tal como en la siguiente imagen:

Y voila!!! 🎊

¡Nuestro CollectionView esta implementado!

¡Gracias por leer! 💚


Leomaris Reyes

Written by

I'm Leomaris Reyes from the Dominican Republic, with more than 6 years of experience in Software Development. I really love learning new things!!! ❤

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