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.