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 en secuencia. Todos los codelabs del curso se detallan en la página de destino de codelabs sobre los aspectos básicos de Kotlin para Android.

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 manera en la que se organizan los elementos de RecyclerView.

RecyclerView incluye administradores de diseño listos para usar con fines 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. Para compilar la app de seguimiento de sueño del codelab anterior, (Si no tienes la app del codelab anterior, puedes descargar el código de inicio para este codelab).

Conocimientos que ya deberías tener

Debes estar familiarizado con lo siguiente:

  • Compilar una interfaz de usuario básica mediante Activity, Fragments y Views
  • Cómo navegar entre fragmentos y usar safeArgs para pasar datos entre fragmentos
  • Permite ver modelos, ver 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 la base de datos y otras tareas de larga duración
  • Cómo implementar un RecyclerView básico con un Adapter, ViewHolder y un diseño de elementos
  • 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

  • Compila sobre la app de seguimiento del sueño del codelab anterior de esta serie.
  • Reemplaza la lista de datos de sueño que muestra RecyclerView en la app por una cuadrícula de datos de sueño.

La app de seguimiento 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. La pantalla muestra algunos datos de sueño del usuario. El botón Borrar borra de forma permanente todos los datos que la app recopiló para el usuario. En la segunda pantalla, que se muestra a la derecha, se selecciona una calificación de calidad del sueño.

Esta app usa una arquitectura simplificada con un controlador de IU, un modelo de vista 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 usar 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 personalizaciones. 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 directo para RecyclerView, y admite la posición horizontal y vertical de las vistas secundarias. Por ejemplo, puedes usar LinearLayoutManager para crear un carrusel de imágenes que el usuario se desplace de forma horizontal.

GridLayout

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

Desde la perspectiva del diseño, GridLayout es la mejor opción para listas que se pueden representar como íconos o imágenes, como listas dentro de una app de navegación de fotos. En la app de seguimiento de sueño, puedes mostrar cada noche de sueño como una cuadrícula de íconos grandes. Este diseño le brinda al usuario un resumen de su calidad de sueño de un vistazo.

Cómo GridLayout organiza 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 es equivalente al ancho de una columna).

En los primeros dos 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 ampliarlo si especificas cuántos intervalos ocupa. Por ejemplo, el elemento superior de la pantalla que se encuentra más a la derecha (que se muestra a continuación) ocupa tres intervalos.

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 monitor de sueño del codelab anterior o descargar la app de RecyclerViewGridLayout-Starter de GitHub.

Paso 1: Cambia el LayoutManager

  1. Si es necesario, descarga la app de 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 sleep_list RecyclerView.

Código para borrar:

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager
  1. Abre SleepTrackerFragment.kt.
  2. En OnCreateView(), justo antes de la sentencia return, crea un GridLayoutManager vertical nuevo de arriba hacia abajo de 3 intervalos.

    El constructor de GridLayoutManager toma hasta cuatro argumentos: un contexto, que es activity, los intervalos de números (columnas, en el diseño vertical predeterminado), una orientación (la configuración predeterminada es vertical) y si es un diseño inverso (el valor predeterminado es false). 
val manager = GridLayoutManager(activity, 3)
  1. Debajo de esa línea, indícale a RecyclerView que use esta GridLayoutManager. RecyclerView está 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 de list_item_sleep_night.xml muestra los datos usando una fila completa por noche. En este paso, se define un diseño de elemento cuadrado más compacto para la cuadrícula.

  1. Abre list_item_sleep_night.xml.
  2. Borra el TextView de sleep_length porque el nuevo diseño no lo necesita.
  3. Mueve el elemento quality_string TextView para que se muestre debajo del ImageView. Para hacer eso, debes actualizar varios aspectos. Este es el diseño final de 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}" />
  1. Verifica en la vista Design que quality_string TextView esté posicionado debajo de ImageView.

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

  1. Ejecuta la app y observa cómo se muestran los datos de sueño en una cuadrícula.

    Ten en cuenta que la ConstraintLayout aún ocupa todo el ancho. El elemento GridLayoutManager le otorga a tu vista un ancho fijo, según su intervalo. GridLayoutManager hace todo lo posible para cumplir con todas las restricciones al momento de diseñar la cuadrícula y de agregar espacios en blanco o recortar elementos.
  1. En SleepTrackerFragment, en el código que crea GridLayoutManager, cambia la cantidad de intervalos para GridLayoutManger a 1. Ejecuta la app para obtener una lista.
val manager = GridLayoutManager(activity, 1)
  1. Cambia la cantidad de intervalos para GridLayoutManager a 10 y ejecuta la app. Ten en cuenta que GridLayoutManager se ajustará a 10 elementos seguidos, pero los elementos ahora se recortarán.
  2. Cambia el recuento de intervalos a 5 y la dirección a GridLayoutManager.VERTICAL. Ejecuta la app y observa cómo puedes desplazarte horizontalmente. Necesitarás un diseño diferente para que se vea bien.
val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)
  1. No olvides volver a establecer el recuento de intervalos en 3 y la orientación en vertical.

Proyecto de Android Studio: RecyclerViewGridLayout
  • Los administradores de diseño gestionan la manera en que se organizan los elementos de RecyclerView.
  • RecyclerView incluye administradores de diseño listos para usar en 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 la perspectiva del diseño, GridLayout se usa mejor para las listas de elementos que se pueden representar como íconos o imágenes.
  • GridLayout organiza los elementos en una cuadrícula de filas y columnas. Si se supone que el desplazamiento es vertical, cada elemento de una fila ocupa lo que se conoce como
  • Puedes personalizar la cantidad de intervalos que ocupa un elemento, lo que crea cuadrículas más interesantes sin la necesidad de un administrador de diseño personalizado.
  • Crea un diseño de elemento para un elemento en la cuadrícula, y el administrador de diseño se encarga 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 manera programática.

Cursos de Udacity:

Documentación para desarrolladores de Android:

En esta sección, se enumeran las posibles tareas para los alumnos que trabajan con este codelab como parte de un curso que dicta un instructor. Depende del instructor hacer lo siguiente:

  • Si es necesario, asigna la tarea.
  • Informa a los alumnos cómo enviar los deberes.
  • Califica las tareas.

Los instructores pueden usar estas sugerencias lo poco o lo que quieran, y deben asignar cualquier otra tarea que consideren apropiada.

Si estás trabajando en este codelab por tu cuenta, usa estas tareas para poner a prueba 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 &spant?

▢ El tamaño de una cuadrícula creada por GridLayoutManager.

▢ El ancho de una columna en la cuadrícula.

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

▢ La cantidad de columnas de la cuadrícula tiene orientación vertical.

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