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…

3 formas de pasar varios Listeners a un RecyclerView

3 formas de pasar varios Listeners a un RecyclerView

Seguro que has visto muchos ejemplos donde un RecyclerView recibe un listener para, por ejemplo realizar, una acción cuando se hace click en el elemento. class MoviesAdapter(private val listener: (Movie) -> Unit) : ListAdapter<Movie, MoviesAdapter.ViewHolder>(...)...

Clases y constructores en Kotlin con Android Studio

Clases y constructores en Kotlin con Android Studio

Veremos un repaso las clases y constructores de Kotlin para solventar esas inquietudes que nos surgen a la hora de seguir este curso, que pueden ser como funciona realmente y porque se presentan las clases de ese modo, como es la interacción y el constructor a la hora...

Temas, colores, tipografías y formas en Jetpack Compose

Temas, colores, tipografías y formas en Jetpack Compose

Si vienes del sistema clásico de vistas, recordarás que toda la definición de temas se hacía de una forma bastante tediosa a través de styles en XML. Si odias tu vida (o estás en una App donde mezclas XMLs y Jetpack Compose), aún puedes seguir usando esos temas...

0 comentarios

Enviar un comentario

Los datos personales que proporciones a través de este formulario quedarán registrados en un fichero de Antonio Leiva Gordillo, 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.

Acepto la política de privacidad *