Conociendo los layouts del CollectionView
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í.
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! 💚
