Crea una cuadrícula desplazable

Puedes administrar conjuntos de datos grandes y contenido dinámico con cuadrículas diferidas, lo que mejora el rendimiento de la app. Con los elementos componibles de cuadrícula diferida, puedes mostrar elementos en un contenedor desplazable, que abarca varias columnas o filas.

Compatibilidad de versiones

Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.

Dependencias

Decide la orientación de la cuadrícula

Los elementos componibles LazyHorizontalGrid y LazyVerticalGrid admiten la visualización de elementos en una cuadrícula. Una cuadrícula vertical diferida muestra los elementos en un contenedor desplazable vertical, que abarca varias columnas, mientras que las cuadrículas horizontales diferidas tienen el mismo comportamiento en el eje horizontal.

Crea una cuadrícula desplazable

Con el siguiente código, se crea una cuadrícula de desplazamiento horizontal con tres columnas:

@Composable
fun ScrollingGrid() {
    val itemsList = (0..15).toList()

    val itemModifier = Modifier
        .border(1.dp, Color.Blue)
        .width(80.dp)
        .wrapContentSize()

    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(itemsList) {
            Text("Item is $it", itemModifier)
        }

        item {
            Text("Single item", itemModifier)
        }
    }
}
LazyListSnippets.kt

Puntos clave sobre el código

  • El elemento componible LazyHorizontalGrid determina la orientación horizontal de la cuadrícula.
    • Para crear una cuadrícula vertical, usa LazyVerticalGrid.
  • La propiedad rows especifica cómo organizar el contenido de la cuadrícula.
    • Para una cuadrícula vertical, usa la propiedad columns para especificar el ordenamiento.
  • items(itemsList) agrega itemsList a LazyHorizontalGrid. La expresión lambda renderiza un elemento Text componible para cada elemento y establece el texto en la descripción del elemento.
  • item() agrega un solo elemento a LazyHorizontalGrid, mientras que la lambda renderiza un solo elemento Text componible de manera similar a items().
  • GridCells.Fixed define la cantidad de filas o columnas.

  • Para crear una cuadrícula con tantas filas como sea posible, establece la cantidad de filas con GridCells.Adaptive.

    En el siguiente código, el valor 20.dp especifica que cada columna debe tener al menos 20 dp y que todas deben tener el mismo ancho. Si la pantalla tiene 88 dp de ancho, hay 4 columnas de 22 dp cada una.

Resultados

Figura 1: Una cuadrícula horizontal desplazable con LazyHorizontalGrid.

Colecciones que contienen esta guía

Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:

Las listas y las cuadrículas permiten que tu app muestre colecciones de una forma visualmente atractiva y fácil de consumir para los usuarios.
Colección de guías rápidas
Descubre cómo las funciones de componibilidad pueden ayudarte a crear fácilmente componentes de IU atractivos basados en el sistema de diseño de Material Design.
Colección de guías rápidas
En esta serie de videos, se presentan varias APIs de Compose y se muestra rápidamente lo que está disponible y cómo usarlo.
Colección de guías rápidas

Tienes preguntas o comentarios

Ve a nuestra página de preguntas frecuentes para obtener información sobre las guías rápidas o comunícate con nosotros para contarnos tu opinión.
Ir a las Preguntas frecuentes Enviar comentarios