Android RecyclerView en Kotlin

En este artículo, sabrá cómo implementar RecyclerView en Android usando Kotlin . Antes de continuar, infórmenos sobre RecyclerView. Un RecyclerView es una versión avanzada de ListView con un rendimiento mejorado. Cuando tenga una larga lista de elementos para mostrar, puede usar RecyclerView. Tiene la capacidad de reutilizar sus puntos de vista. En RecyclerView, cuando la Vista sale de la pantalla o no es visible para el usuario, no la destruirá, sino que reutilizará estas vistas. Esta característica ayuda a reducir el consumo de energía y proporciona una mayor capacidad de respuesta a la aplicación. Ahora veamos cómo implementar RecyclerView usando Kotlin.

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

En la pantalla de bienvenida de Android Studio, haga clic en Crear nuevo proyecto . Si ya tiene un proyecto abierto, vaya a Archivo > Nuevo > Nuevo proyecto. Luego, seleccione una ventana de Plantilla de proyecto, seleccione Actividad vacía y haga clic en Siguiente . Ingrese el nombre de su aplicación en el campo Nombre. Seleccione Kotlin en el menú desplegable Idioma.

Paso 2: agregue las dependencias

Vaya a app < ​​Gradle Scripts < gradle.build(Module: app ) y agregue las siguientes dependencias.

dependencies{
  // for adding recyclerview
  implementation 'androidx.recyclerview:recyclerview:1.2.0'
  
  // for adding cardview
  implementation 'androidx.cardview:cardview:1.0.0'
}

Paso 3: Vaya a activity_main.xml y agregue el siguiente código

Agregue RecyclerView a activity_main.xml , puede agregarlo arrastrando y soltando desde la sección de diseño o puede agregarlo manualmente escribiendo algunos caracteres iniciales de RecyclerView, luego el IDE le dará sugerencias para RecyclerView, luego seleccione RecyclerView y lo agregará automáticamente a su archivo de diseño.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:itemCount="5"
        tools:listitem="@layout/card_view_design" />
      
</LinearLayout>

Paso 4: Cree un nuevo archivo de recursos de diseño

Ahora cree un nuevo archivo de recursos de diseño que se utilizará para diseñar nuestro diseño CardView . Vaya a aplicación > res > diseño > haga clic con el botón derecho en diseño > Nuevo > Archivo de recursos de diseño y nombre ese archivo como card_view_design y agregue el código que se proporciona a continuación. En este archivo, puede diseñar el diseño para mostrarlo en RecyclerView.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_margin="10dp"
    app:cardElevation="6dp">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="5dp">
  
        <ImageView
            android:id="@+id/imageview"
            android:layout_width="40dp"
            android:layout_height="40dp" />
  
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="15dp"
            android:text="Item"
            android:textSize="20sp"
            android:textStyle="bold" />
  
    </LinearLayout>
  
</androidx.cardview.widget.CardView>

Paso 5: crea una nueva clase de Kotlin

Vaya a aplicación > java > nombre del paquete > haga clic con el botón derecho en > Nuevo > clase/archivo de Kotlin y elija Clase de datos de la lista. Nombre ese archivo como ItemsViewModel y luego haga clic en Aceptar. Este archivo contendrá la información de cada elemento que desee mostrar en su RecyclerView.

data class ItemsViewModel(val image: Int, val text: String) {
}

Paso 6: Crear clase de adaptador 

Vaya a aplicación > java > nombre del paquete > haga clic con el botón derecho en > Nuevo > clase/archivo de Kotlin y nombre ese archivo como CustomAdapter y luego haga clic en Aceptar . Después de esto, agregue el código proporcionado a continuación. Se agregan comentarios dentro del código para comprender el código con más detalle.

Esta clase contiene algunas funciones importantes para trabajar con RecyclerView, estas son las siguientes:

• onCreateViewHolder(): esta función configura las vistas para mostrar los elementos.
• onBindViewHolder(): esta función se utiliza para vincular los elementos de la lista a nuestros widgets, como TextView, ImageView, etc.
• getItemCount(): Devuelve el conteo de elementos presentes en la lista.

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
  
class CustomAdapter(private val mList: List<ItemsViewModel>) : RecyclerView.Adapter<CustomAdapter.ViewHolder>() {
  
    // create new views
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        // inflates the card_view_design view 
        // that is used to hold list item
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.card_view_design, parent, false)
  
        return ViewHolder(view)
    }
  
    // binds the list items to a view
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
  
        val ItemsViewModel = mList[position]
  
        // sets the image to the imageview from our itemHolder class
        holder.imageView.setImageResource(ItemsViewModel.image)
  
        // sets the text to the textview from our itemHolder class
        holder.textView.text = ItemsViewModel.text
  
    }
  
    // return the number of the items in the list
    override fun getItemCount(): Int {
        return mList.size
    }
  
    // Holds the views for adding it to image and text
    class ViewHolder(ItemView: View) : RecyclerView.ViewHolder(ItemView) {
        val imageView: ImageView = itemView.findViewById(R.id.imageview)
        val textView: TextView = itemView.findViewById(R.id.textView)
    }
}

Paso 7: Trabajar con MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt. Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // getting the recyclerview by its id
        val recyclerview = findViewById<RecyclerView>(R.id.recyclerview)
  
        // this creates a vertical layout Manager
        recyclerview.layoutManager = LinearLayoutManager(this)
  
        // ArrayList of class ItemsViewModel
        val data = ArrayList<ItemsViewModel>()
  
        // This loop will create 20 Views containing 
        // the image with the count of view
        for (i in 1..20) {
            data.add(ItemsViewModel(R.drawable.ic_baseline_folder_24, "Item " + i))
        }
  
        // This will pass the ArrayList to our Adapter
        val adapter = CustomAdapter(data)
  
        // Setting the Adapter with the recyclerview
        recyclerview.adapter = adapter
  
    }
}

Producción: