Cómo organizar los elementos de un RecyclerView con LayoutManager
Antonio Leiva

En el vídeo anterior sobre RecyclerView, dejamos apartado a propósito el tema de los LayoutManager, porque quería hablarlo más en profundidad.

En el de hoy verás los siguientes puntos:

  • Qué es un LayoutManager
  • Qué tipos de LayoutManager existen por defecto: LinearLayoutManager, GridLayoutManager y StaggeredGridLayoutManager
  • Que puedes crear tu propio LayoutManager (pero que no te lo recomiendo)
  • Cómo funcionan LinearLayoutManager y GridLayoutManager con ejemplos
  • Cómo hacer el scroll horizontal
  • Cómo invertir el scroll

Aquí tienes el vídeo:

Remotando el apartado anterior, recordaremos cuando hablamos de que el LayoutManager es el que organiza las vistas dentro del ReciclerView, nos identifica como se colocan las vistas una vez que se van cargando dentro de este componente, técnicamente podemos nosotros mismos crear LayoutManager desde cero pero es una tarea que por experiencia te adelante que es bastante complicada y normalmente con los LayoutManager que nos provee ya la propia librería nos va hacer mas que suficiente, ademas, sí todo esto no es suficiente, existen librerías externas que te proveen del LayoutManager extras, pero en el post de hoy nos vamos a centrar en los LayoutManager principales. En el caso del RecyclerView nos provee ya de 3 por defecto.

  • LinearLayoutManager: Este LayoutManager nos permite colocar las vistas una debajo de otra. Vendría a ser el típico listado de un único elemento por columna, tanto este LayoutManager como todos los demás que vamos ver, nos permite tanto organizar los elementos de forma vertical, como de forma horizontal de tal forma que el scroll se moverá de forma vertical u horizontal en función de la definición que hagamos del LayoutManager.
  • GridLayoutManager: Nos permite hacer un grid donde tenemos un numero determinado de columnas y el grid se moverá de forma vertical o también lo podemos poner de forma horizontal.
  • StaggeredGridLayoutManager: Es equivalente a GridLayoutManager en el que cada una de las celdas pueden tener alturas diferentes de tal forma que se forma un grid en cascada en el que si tenemos elementos que tienen distintas alturas va a quedar bastante interesante el resultado.

Regresando un poco a lo que ya habíamos hecho con el LinearLayoutManager que lo definimos dentro del propio Layout en nuestro activiy_main en el XML lo podemos hacer por código, lo vamos a quitar de donde lo tenemos y lo haremos por código, porque muchas veces si queremos hacer algo mucho mas complejo no lo vas a poder definir exclusivamente en el XML sino que lo vas a tener que hacer directamente desde el propio código. Eliminamos lo que dejamos en azul.

y nos vamos a la clase MainActivity donde definiremos el LayoutManager por código.

val layoutManager = LinearLayoutManager(this)
recycler.layoutManager = layoutManager

Hasta este punto deberíamos poder seguir viendo nuestra aplicación funcionando igual.

Ahora que estamos usando el LayoutManager no nos interesa poner valores fijos a las vistas, sino lo que queremos es que el LayoutManager adapte el tamaño de esas vistas al tamaño disponible.

Por tanto nos vamos a ir a view_movie y en la propiedad layout_width vamos hacer un match_parent y también lo colocaremos en el padre para que nos tome el cambio.

si nos fijamos esto ocuparía todo el espacio de la pantalla

podemos recargar y observar como ahora ocupa toda la pantalla cada película.

Para usar nuestro LinearLayoutManager horizontal tenemos que irnos a la MainActivity y agregarle un segundo argumento a nuestro LinearLauoutManager(this, LinearLayoutManager.HORIZONTAL, false)

Vamos a ver ahora como funciona el GridLayoutManager, vas a ver que es muy similar solo que existe un parámetro extra que podemos configurar para identificar el numero de columnas que vamos a mostrar en pantalla.

Modificamos lo que teníamos anteriormente y agregamos el GridLayoutManager, donde le pasaremos los siguientes argumentos, el contexto “this” y spamcount (numero de columnas).

val layoutManager = GridLayoutManager(this, 2)

podemos agregar tres columnas y cambiar la orientación, pero como el ImageView no esta muy bien optimizado para el grid horizontal, se nos cortara un poco la imagen. también podemos cambiar la orientación de navegación en vez de empezar arriba y desplazarnos hacia abajo lo invertimos con el ultimo argumento en true.

Quizá también te interese…

Cómo simular una base de datos reactiva en Room con Fakes

Cómo simular una base de datos reactiva en Room con Fakes

En el desarrollo de aplicaciones móviles es muy común utilizar bases de datos para almacenar y gestionar la información que se utiliza en la aplicación. En el caso de Android, una de las opciones más populares es Room, una librería de persistencia de datos que...

Descargar una página web en Android con OkHttp

Descargar una página web en Android con OkHttp

En este tutorial vamos a aprender cómo descargar una página web en Android utilizando la librería OkHttp y la librería activity-ktx para facilitar el manejo de los ciclos de vida de nuestra aplicación. Configuración de la App Para empezar, necesitamos incluir las...

Usar Ktor Client para hacer peticiones HTTP en Android

Usar Ktor Client para hacer peticiones HTTP en Android

Ktor es un framework de servidor y cliente de Kotlin diseñado para crear aplicaciones web y móviles de forma rápida y fácil. En este artículo, veremos cómo usar Ktor client en una aplicación Android para hacer peticiones a una API. Configurar las dependencias de Ktor...

0 comentarios

Enviar un comentario

Los datos personales que proporciones a través de este formulario quedarán registrados en un fichero de DevExpert, S.L.U., con el fin de gestionar los comentarios que realizas en este blog. La legitimación se realiza a través del consentimiento de la parte interesada. Si no se acepta, no podrás comentar en este blog. Los datos que proporciona solo se utilizan para evitar el correo no deseado y no se usarán para nada más. Puede ejercer los derechos de acceso, rectificación, cancelación y oposición en contacto@devexperto.com.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acepto la política de privacidad *