Aspectos básicos de Kotlin para Android 07.3: GridLayout con RecyclerView

Este codelab es parte del curso Conceptos básicos de Kotlin para Android. Aprovecharás al máximo este curso si trabajas con los codelabs de forma secuencial. Todos los codelabs del curso se enumeran en la página de destino de los codelabs de Android Kotlin Fundamentals.

Este codelab es parte de una serie que te guía para compilar una app de seguimiento del sueño que muestra los datos de sueño en un RecyclerView. Te recomendamos que realices todos los codelabs en orden, ya que avanzan por las tareas paso a paso.

Los codelabs de esta serie son los siguientes:

• 7.1 Aspectos básicos de RecyclerView
• 7.2 DiffUtil y la vinculación de datos con RecyclerView
• 7.3 GridLayout con RecyclerView
• 7.4 Cómo interactuar con elementos RecyclerView
• 7.5 Encabezados en RecyclerView

Introducción

Una de las principales ventajas de RecyclerView es que te permite usar administradores de diseño para controlar y modificar tu estrategia de diseño. Un LayoutManager administra la forma en que se organizan los elementos en el RecyclerView.

RecyclerView incluye administradores de diseño listos para usar para casos de uso comunes. Por ejemplo, puedes usar LinearLayout para listas horizontales y verticales, o GridLayout para cuadrículas. Para casos de uso más complicados, debes implementar un LayoutManager personalizado.

En este codelab, aprenderás a mostrar datos con un diseño de cuadrícula en lugar de una lista, basándote en la app de Sleep Tracker del codelab anterior. (Si no tienes la app del codelab anterior, puedes descargar el código de partida para este codelab).

Conocimientos que ya deberías tener

Debes estar familiarizado con lo siguiente:

• Cómo compilar una interfaz de usuario básica con Activity, Fragments y Views
• Navegar entre fragmentos y usar safeArgs para pasar datos entre fragmentos
• Visualiza modelos, fábricas de modelos y transformaciones
• LiveData y sus observadores
• Cómo crear una base de datos Room, crear un DAO y definir entidades
• Cómo usar corrutinas para tareas de bases de datos y otras tareas de larga duración
• Cómo implementar un RecyclerView básico con un Adapter, un ViewHolder y un diseño de elemento
• Cómo implementar la vinculación de datos para RecyclerView
• Cómo crear y usar adaptadores de vinculación para transformar datos

Qué aprenderás

• Cómo usar un LayoutManager diferente para cambiar la forma en que se muestran tus datos en el RecyclerView
• Cómo crear un diseño de cuadrícula para tus datos de sueño

Actividades

• Compilar la app de Sleep Tracker del codelab anterior de esta serie
• Reemplaza la lista de datos de sueño que muestra RecyclerView en la app con una cuadrícula de datos de sueño.

La app de monitoreo del sueño tiene dos pantallas, representadas por fragmentos, como se muestra en la siguiente figura.

La primera pantalla, que se muestra a la izquierda, tiene botones para iniciar y detener el seguimiento. En la pantalla, se muestran algunos de los datos de sueño del usuario. El botón Borrar borra de forma permanente todos los datos que la app recopiló del usuario. La segunda pantalla, que se muestra a la derecha, es para seleccionar una calificación de la calidad del sueño.

Esta app usa una arquitectura simplificada con un controlador de IU, un ViewModel y LiveData, y una base de datos Room para conservar los datos de sueño.

Los datos de sueño se muestran en un RecyclerView. En este codelab, cambiarás la app para que use un GridLayout. La pantalla final se verá como la siguiente captura de pantalla.

En un codelab anterior, cuando agregaste RecyclerView a fragment_sleep_tracker.xml, agregaste un LinearLayoutManager sin ninguna personalización. Este código muestra los datos como una lista vertical.

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

LinearLayoutManager es el administrador de diseño más común y sencillo para RecyclerView, y admite la colocación horizontal y vertical de vistas secundarias. Por ejemplo, puedes usar LinearLayoutManager para crear un carrusel de imágenes por el que el usuario se desplace horizontalmente.

GridLayout

Otro caso de uso común es la necesidad de mostrarle muchos datos al usuario, lo que puedes hacer con GridLayout. El objeto GridLayoutManager de RecyclerView define los datos como una cuadrícula desplazable, como se muestra a continuación.

Desde una perspectiva de diseño, GridLayout es ideal para listas que se pueden representar como imágenes o íconos, como listas dentro de una app de navegación de fotos. En la app de monitoreo del sueño, podrías mostrar cada noche de sueño como una cuadrícula de íconos grandes. Este diseño le daría al usuario una descripción general de la calidad de su sueño de un vistazo.

Cómo GridLayout diseña los elementos

GridLayout organiza los elementos en una cuadrícula de filas y columnas. Suponiendo que el desplazamiento es vertical, de forma predeterminada, cada elemento de una fila ocupa un "intervalo". (En este caso, un intervalo equivale al ancho de una columna).

En los dos primeros ejemplos que se muestran a continuación, cada fila está compuesta por tres intervalos. De forma predeterminada, el GridLayoutManager coloca cada elemento en un intervalo hasta el recuento de intervalos que especificas. Cuando alcanza el recuento de intervalos, se ajusta a la siguiente línea.

De forma predeterminada, cada elemento ocupa un intervalo, pero puedes hacer que un elemento sea más ancho especificando cuántos intervalos debe ocupar. Por ejemplo, el primer elemento de la pantalla más a la derecha (que se muestra a continuación) ocupa tres tramos.

Nota: Span puede referirse a una "fila" o una "columna". Con GridLayoutManager, usas spanCount para indicar cuántas columnas o filas tiene una cuadrícula, y también cuánto espacio de esta ocupa un elemento en sentido horizontal o vertical.

Cuando creas un GridLayoutManager, especificas la orientación por separado de la cantidad de tramos, y "tramo" es "independiente de la dirección". En una configuración vertical (predeterminada), "intervalo" y "columna" son equivalentes.

En esta tarea, tomarás el RecyclerView que terminaste en el último ejercicio y lo actualizarás para mostrar datos con un GridLayoutManager. Puedes seguir usando la app de Sleep Tracker del codelab anterior o descargar la app de RecyclerViewGridLayout-Starter desde GitHub.

Paso 1: Cambia el LayoutManager

1. Si es necesario, descarga la app RecyclerViewGridLayout-Starter para este codelab desde GitHub y abre el proyecto en Android Studio.
2. Abre el archivo de diseño fragment_sleep_tracker.xml.
3. Quita el administrador de diseño de la definición de sleep_list RecyclerView.

Código que debes borrar:

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager

4. Abre SleepTrackerFragment.kt.
5. En OnCreateView(), justo antes de la sentencia return, crea un nuevo GridLayoutManager vertical, de arriba hacia abajo, con 3 tramos.
   
   El constructor GridLayoutManager admite hasta cuatro argumentos: un contexto, que es el activity, la cantidad de tramos (columnas, en el diseño vertical predeterminado), una orientación (la predeterminada es vertical) y si es un diseño inverso (el valor predeterminado es false).

val manager = GridLayoutManager(activity, 3)

6. Debajo de esa línea, indícale a RecyclerView que use este GridLayoutManager. El RecyclerView se encuentra en el objeto de vinculación y se llama sleepList. (Consulta fragment_sleep_tracker.xml).

binding.sleepList.layoutManager = manager

Paso 2: Cambia el diseño

El diseño actual en list_item_sleep_night.xml muestra los datos con una fila completa por noche. En este paso, definirás un diseño de elemento cuadrado más compacto para la cuadrícula.

Nota: Si no quieres perder tu diseño actual, primero haz una copia del archivo y nómbrala list_item_sleep_night_linear.xml, o bien comenta el código en lugar de quitarlo.

1. Abre list_item_sleep_night.xml.
2. Borra el sleep_length TextView, porque el nuevo diseño no lo necesita.
3. Mueve el quality_string TextView para que se muestre debajo del ImageView. Para ello, debes actualizar varios elementos. Este es el diseño final del quality_string TextView:

<TextView
   android:id="@+id/quality_string"
   android:layout_width="0dp"
   android:layout_height="20dp"
   android:textAlignment="center"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="@+id/quality_image"
   app:layout_constraintHorizontal_bias="0.0"
   app:layout_constraintStart_toStartOf="@+id/quality_image"
   app:layout_constraintTop_toBottomOf="@+id/quality_image"
   tools:text="Excellent!!!"
   app:sleepQualityString="@{sleep}" />

4. Verifica en la vista Design que el quality_string TextView esté ubicado debajo del ImageView.

Como usaste la vinculación de datos, no necesitas cambiar nada en Adapter. El código debería funcionar y la lista debería mostrarse como una cuadrícula.

5. Ejecuta la app y observa cómo se muestran los datos de sueño en una cuadrícula.
   
   Ten en cuenta que el ConstraintLayout aún ocupa todo el ancho. El GridLayoutManager le da a tu vista un ancho fijo, según su extensión. GridLayoutManager hace todo lo posible para cumplir con todas las restricciones cuando diseña la cuadrícula, agrega espacio en blanco o recorta elementos.

6. En SleepTrackerFragment, en el código que crea el GridLayoutManager, cambia la cantidad de tramos para GridLayoutManger a 1. Ejecuta la app y obtendrás una lista.
   

val manager = GridLayoutManager(activity, 1)

7. Cambia la cantidad de tramos para GridLayoutManager a 10 y ejecuta la app. Observa que GridLayoutManager ajustará 10 elementos en una fila, pero ahora los elementos se recortan.
8. Cambia el recuento de tramos a 5 y la dirección a GridLayoutManager.VERTICAL. Ejecuta la app y observa cómo puedes desplazarte horizontalmente. Necesitarías un diseño diferente para que se vea bien.

val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)

9. No olvides volver a establecer el recuento de tramos en 3 y la orientación en vertical.

Proyecto de Android Studio: RecyclerViewGridLayout

• Los administradores de diseño controlan la forma en que se organizan los elementos en el RecyclerView.
• RecyclerView incluye administradores de diseño listos para usar para casos de uso comunes, como LinearLayout para listas horizontales y verticales, y GridLayout para cuadrículas.
• Para casos de uso más complicados, implementa un LayoutManager personalizado.
• Desde una perspectiva de diseño, GridLayout se usa mejor para listas de elementos que se pueden representar como íconos o imágenes.
• GridLayout organiza los elementos en una cuadrícula de filas y columnas. Suponiendo que el desplazamiento es vertical, cada elemento de una fila ocupa lo que se denomina un "intervalo".
• Puedes personalizar la cantidad de tramos que ocupa un elemento, lo que te permite crear cuadrículas más interesantes sin necesidad de un administrador de diseño personalizado.
• Crea un diseño de elemento para un elemento de la cuadrícula, y el administrador de diseño se encargará de organizar los elementos.
• Puedes establecer el LayoutManager para el RecyclerView en el archivo de diseño XML que contiene el elemento <RecyclerView> o de forma programática.

Cursos de Udacity:

• Developing Android Apps with Kotlin
• Capacitación de Kotlin para programadores

Documentación para desarrolladores de Android:

• Cómo crear una lista con RecyclerView
• RecyclerView
• LayoutManager
• GridLayoutManager

En esta sección, se enumeran las posibles actividades para el hogar para los alumnos que trabajan en este codelab como parte de un curso dirigido por un instructor. Depende del instructor hacer lo siguiente:

• Si es necesario, asigna una tarea.
• Comunicarles a los alumnos cómo enviar las actividades para el hogar.
• Califica las actividades para el hogar.

Los instructores pueden usar estas sugerencias en la medida que quieran y deben asignar cualquier otra actividad para el hogar que consideren apropiada.

Si estás trabajando en este codelab por tu cuenta, usa estas actividades para el hogar para probar tus conocimientos.

Responde estas preguntas:

Pregunta 1

¿Cuáles de estas opciones son administradores de diseño que proporciona Android? Selecciona todas las opciones que correspondan.

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

Pregunta 2

¿Qué es un "intervalo"?

▢ El tamaño de una cuadrícula que crea GridLayoutManager.

▢ El ancho de una columna en la cuadrícula

▢ Las dimensiones de un elemento en una cuadrícula.

▢ La cantidad de columnas en una cuadrícula que tiene orientación vertical.

Comienza la siguiente lección: 7.4: Cómo interactuar con elementos RecyclerView

Este codelab es parte de una serie que te guía para compilar una app de seguimiento del sueño que muestra los datos de sueño en un RecyclerView. Te recomendamos que realices todos los codelabs en orden, ya que avanzan por las tareas paso a paso.

Los codelabs de esta serie son los siguientes:

• 7.1 Aspectos básicos de RecyclerView
• 7.2 DiffUtil y la vinculación de datos con RecyclerView
• 7.3 GridLayout con RecyclerView
• 7.4 Cómo interactuar con elementos RecyclerView
• 7.5 Encabezados en RecyclerView