Capítulo 15 – Recyclerview en Kotlin

curso android en kotlin

Llegamos a algo imprescindible en el desarrollo de aplicaciones móviles, las listas. Antaño se usaban ListView en android, pero con el tiempo Google sacó las RecyclerView, listas más customizables, potentes y eficientes.

Configurando nuestro proyecto

Lo primero que haremos será crear un nuevo proyecto o podemos usar el del capítulo anterior, pues reutilizaremos código de ahí.

curso android en kotlin

Una vez creado iremos al build.gradle del módulo app e implementaremos una dependencia. Una dependencia es básicamente código externo del proyecto el cual podemos implementar para aprovecharlo, en este caso implementaremos el Recyclerview que por defecto no lo trae.

Así que vamos a la parte de las dependencies{}  y añadimos

Y también añadiremos una librería llamada Picasso que la usaremos para la gestión de imágenes.

Nos aparecerá en la parte superior una barra que nos dirá que es necesario sincronizar el gradle, así que le damos. Si todo sale bien ya tendremos esta parte configurada, si te da error de sdk posiblemente es que tengas varias versiones diferentes (CompileSDKVersion, buildToolsVersion…) todas a 25. Debería quedar así.

Editando nuestra layout y creando una celda

El layout principal será el contenedor del RecyclerView, pero luego para inflarlo tendremos que crear un adapter (hablaremos de él un poco más abajo) y una celda que será la que muestre cada una de las filas de la lista.

activity_main.xml

En este ejemplo seguiremos con los objetos superhéroe del capítulo anterior así que la celda que hagamos llevará un ImageView para el logo del superhéroe y tres textos, uno para el nombre real, el nombre de superhéroe y el de la compañía (DC o Marvel). Vamos a res/layout y creamos un archivo llamado item_superhero_list.xml

Si no me equivoco todos los atributos de arriba ya los hemos visto excepto los «tools:text» la función tools lo que hace es ayudarnos a ver algo de un modo más sencillo. Aquí por ejemplo está poniendo un texto para poder ir maquetando mejor la vista, pero cuando compile la aplicación, ese texto no estará, así que podríamos decir que es un molde. Si tenéis alguna otra duda podéis dejar un comentario.

Ahora vamos a crear un modelo superhéroe del cual haremos varias listas para cargar en el recyclerview, como esto ya está hecho en el capítulo anterior solo os voy a dejar la clase aquí para que la copien.

Creando nuestros objetos superhéroes

Volvemos a MainActivity.kt  y vamos a crear dos funciones, una que configurará nuestro recyclerview con el adapter y otra que generará la lista de objetos superhéroes.

Aunque la clase no está terminada, quería que vieran el modelo de superhéroe creado, para que ahora entiendan mejor que vamos a hacer en el adapter.

Creando el adapter

Ahora vamos a crear el adapter del Recyclerview. Un adapter es la clase que hace de puente entre la vista (el recyclerview) y los datos. Así que creamos una nueva clase llamada RecyclerAdapter.kt

La clase RecyclerAdapter se encargará de recorrer la lista de superhéroes que le pasaremos más tarde, y llamando a otra clase interna que tendrá, este rellenará los campos.

Vamos a ir viendo método por método, así que hasta el final de la explicación la clase tendrá fallos.

Lo primero que hacemos es decirle a la clase que tendrá un RecyclerAdapter y un ViewHolder. Después creamos las dos variables que necesitamos para el adapter, una lista de superhéroes (que rellenaremos en la clase principal y se la mandaremos aquí y el contexto de la mainAcitivity para poder trabajar con la librería Picasso.

Lo primero es un simple constructor (tiene el mismo nombre que la clase y lo único que hará será recibir la lista y el contexto que le pasamos desde la clase principal).

Los siguientes tres métodos tienen delante la palabra reservada override, esto es porque son métodos obligatorios que se implementan de la clase RecyclerView. onBindViewHolder() se encarga de coger cada una de las posiciones de la lista de superhéroes y pasarlas a la clase ViewHolder(todavía no está hecha) para que esta pinte todos los valores.

Después tenemos onCreateViewHolder() que como su nombre indica lo que hará será devolvernos un objeto ViewHolder al cual le pasamos la celda que hemos creado.

Y para finalizar el método getItemCount() nos devuelve el tamaño de la lista, que lo necesita el RecyclerView.

Para finalizar el adapter queda hacer la clase ViewHolder de la que tanto hemos hablado. No es necesaria hacerla dentro del adapter, pero como van tan ligadas la una a la otra creo que es lo mejor.

Lo primero que hace esta clase es hacer referencia a los items de la celda, el view.findViewByID() busca los items a través de la id que le ponemos, y luego añadimos el as X donde X es el tipo del componente (ImageView, TextView…).

Dentro tiene el método bind(superhero:Superhero, context: Context) que dicho método lo llamamos desde el onBindViewHolder() para que rellene los datos. Después de añadir todos los textos que queremos, hacemos 2 cositas más. La primera es que llamamos a itemView que es la vista (celda) que estamos rellenando y le ponemos un setOnClickListener que pintará en pantalla el nombre del superhéroe en el que hemos hecho click. Y para finalizar seleccionamos el ImageView y con el método que hemos creado le pasamos la URL de la imagen. Esta url la usará Picasso para descargarla de internet y pintarla en nuestra lista. Pero para que Picasso pueda hacer eso, debemos ponerle permiso de internet a nuestra app.

Vamos a AndroidManifest.xml y añadimos el permiso después de abrir la etiqueta manifest.

Y nuestro adapter completo sería así.

Ahora volvemos al MainActivity.kt para finalizar el método que nos queda. Primero crearemos dos variables, la del RecyclerView y la del adapter que acabamos de terminar.

El recyclerview lo tenemos que instanciar en el método setUpRecyclerView() por lo que tenemos que ponerle la propiedad lateinit a la variable, indicándole a Kotlin que la instanciaremos más tarde.

Para finalizar creamos el método, lo primero que hará será buscar en el layout el Recycler y asignarselo a la variable que creamos. El siguiente método se usa para evitar problemas cuando el padre que contiene la lista cambia y puede estropear el recycler.

Luego llamamos a nuestro adapter y le pasamos los campos que necesite, en este caso getSuperheros (que devuelve una lista de superhéroes) y this (el contexto). Y para finalizar se lo asignamos a el recyclerview.

Ahora solo necesitamos compilar para ver el resultado de nuestra aplicación.

curso android en kotlin

Comparte 🙂
error0

17 comentarios sobre “Capítulo 15 – Recyclerview en Kotlin

  1. Josue Gonzalez Contestar

    Amigo, gracias por todo.
    Pero a patir del capitulo anterior y mas aun en este ya tu explicación no era tan precisa como al inicio, supongo que puedes estar agotado se que no es fácil, pero hay muchos datos que no explicas como instanciar, viewHolder entre otras, tranqui, traqnui no te estoy pidiendo que lo expliques en una respuesta si bien es cierto podemos googlear pero creo que la finalidad del curso se perdió aquí, aprendí todo hasta el capitulo 13 pero aquí ya no hay explicación sino trabajo hecho, no se si tenias prisa por sacar un producto pero en mi perspectiva personal creo que se te paso una explicación mas detallada.

    Igual no dejo de agradecerte, pero para futuro espero tomes en cuenta mi comentario.

    • Aris Autor del artículoContestar

      Buenas, agradezco todo tipo de críticas constructivas. Creo que el curso sigue el mismo plano, pero que la carga de trabajo aumenta. Si es posible que deje cosas sin explicar, más por despistes míos que otra cosa, es por ello que siempre digo que pregunten en los comentarios porque cada vez tengo menos tiempo para escribir, además que yo también estoy aprendiendo.

      Un saludo y espero que el próximo capítulo te guste más.

  2. Pingback: Capítulo 20 - Consumiendo APIS con Retrofit 2 - Curso Kotlin Para android

    • Aris Autor del artículoContestar

      Buenas, este al ser bastante sencillo no lo tengo subido. Si tienes alguna duda puedes preguntar y trataré de echarte un cable ^^.

      Para los cursos más complejos está todo el proyecto subido (y de aquí en adelante será así con todos).

      Un saludo

  3. Luis Emilio Guerrero G. Contestar

    Rellenar el Recyclerview con Arrays es importante, pero mejor seria hacerlo desde una base de datos externa, de tal manera que podamos observar como se realiza la conexión, como se extrae la información, como quedaría el codigo del archivo php que retorne el json, como se rellena el recyclerview y como se cambia a otra activity o a otro fragment dando click en una fila del recyclerview, no solo mostrar un mensaje.

    Me gustaría que incluyas un buscador en la action bar para poder filtrar el recyclereview, a lo mejor es mucho pedir, pero creo que ayudaría a aumentar el interés por el curso de usuarios que ya tengan un poco mas de conocimientos en programación.

    Exito

    • Aris Autor del artículoContestar

      No creo que una cosa quite la otra, es decir, si sabes pintar un recyclerview te da igual de donde vienen los datos porque están abstraídos. Ya hay un capítulo donde te enseña a hacer llamadas a back, por lo que con esa respuesta solo tendrías que añadir el contenido de este turorial.

      Respecto a la petición me la apunto. Últimamente no puedo dedicarle mucho tiempo al curso pero en breve habrá una novedad enorme.

  4. Pingback: Capítulo 21 - Gestión de permisos en Android - Curso Kotlin Para android

  5. gonzalo cabrera Contestar

    Te falto añadir que en el main layout debiamos poner el recyclerview manualmente con el design (sino no funciona, da el error de unsolved reference en el MainActivity.kt), para un novato como yo en kotlin puede ser confuso pero para ti es el abc supongo, pero te lo hago tomar en cuenta

    • Aris Autor del artículoContestar

      Buenas, puedes especificar un poco más? No entiendo exactamente que es lo que no entendiste, así lo actualizo 🙂

  6. nolasco Contestar

    Creo que Gonzalo se refiere al tools:context del activity que si copiar no coincide con el local de cada uno

    • Aris Autor del artículoContestar

      Vale, es que eso lo suelo quitar siempre (no es necesario) pero se me habrá colado. Ahora lo quito. Thx!

Deja un comentario

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