Android: desliza para eliminar y deshacer en RecyclerView con Kotlin

Hemos visto muchas aplicaciones de Android en las que los datos se muestran en forma de lista. Si queremos eliminar cualquier elemento de esa vista del reciclador, simplemente podemos deslizar ese elemento para eliminarlo. Podemos ver este tipo de función en la aplicación Gmail en la que cuando se desliza un correo electrónico hacia la derecha, se mueve al archivo. En este artículo, crearemos una vista de reciclador simple e implementaremos un deslizamiento para eliminar y deshacer el elemento RecyclerView en Kotlin.

Nota : si está buscando implementar Swipe to Delete y Undo elementos de Recycler View en Java. Deslice para eliminar y deshacer elementos de Recycler View en Android con Java

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Cómo crear/iniciar un nuevo proyecto en Android Studio

Paso 2: Cree un diseño de tarjeta para elementos de tarjeta de vista de reciclador

Vaya a la aplicación > res > diseño > haga clic con el botón derecho en > Nuevo > Archivo de recursos de diseño y nombre el archivo como curso_rv_elemento. En este archivo, se escribe todo el código XML relacionado con los elementos de la tarjeta en RecyclerView. A continuación se muestra el código para el archivo Course_rv_item.xml.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    app:cardCornerRadius="5dp"
    app:cardElevation="4dp">
      
      <!--on below line we are creating a 
        linear layout for grid view item-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
  
        <!--on below line we are creating 
            a simple image view-->
        <ImageView
            android:id="@+id/idIVCourse"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_gravity="center"
            android:layout_margin="8dp"
            android:padding="5dp"
            android:src="@mipmap/ic_launcher" />
  
        <!--on below line we are creating 
            a simple text view-->
        <TextView
            android:id="@+id/idTVCourse"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:padding="4dp"
            android:text="@string/app_name"
            android:textAlignment="textStart"
            android:textColor="@color/black"
            android:textStyle="bold"
            tools:ignore="RtlCompat" />
  
    </LinearLayout>
  
</androidx.cardview.widget.CardView>

Paso 3: Cree una clase Java para datos modales

Vaya a la aplicación > java > Haga clic con el botón derecho en el nombre del paquete de su aplicación > Nuevo > Clase Kotlin y nombre el archivo como CourseRVModal. Agregue el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

package com.gtappdevelopers.kotlingfgproject
  
data class CourseRVModal(
    // on below line we are creating a 
    // two variable one for course 
    // name and other for course image
    var courseName: String,
    var courseImg: Int
)

Paso 4: crea una nueva clase de Kotlin para el adaptador

Del mismo modo, cree una nueva clase de Java y nombre el archivo como CourseRVAdapter. El adaptador es la clase principal responsable de RecyclerView. Contiene todos los métodos que son útiles en RecyclerView. La clase Adapter se usa para establecer los datos en cada elemento de nuestra vista de reciclador. 

package com.gtappdevelopers.kotlingfgproject
  
import android.content.Context
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
  
// on below line we are creating 
// a course rv adapter class.
class CourseRVAdapter(
    // on below line we are passing variables
    // as course list and context
    private val courseList: ArrayList<CourseRVModal>,
    private val context: Context
) : RecyclerView.Adapter<CourseRVAdapter.CourseViewHolder>() {
    override fun onCreateViewHolder(
        parent: ViewGroup,
        viewType: Int
    ): CourseRVAdapter.CourseViewHolder {
        // this method is use to inflate the layout file 
        // which we have created for our recycler view.
        // on below line we are inflating our layout file.
        val itemView = LayoutInflater.from(parent.context).inflate(
            R.layout.course_rv_item,
            parent, false
        )
        // at last we are returning our view holder 
        // class with our item View File.
        return CourseViewHolder(itemView)
    }
  
    override fun onBindViewHolder(holder: CourseRVAdapter.CourseViewHolder, position: Int) {
        // on below line we are setting data to our text view and our image view.
        holder.courseNameTV.text = courseList.get(position).courseName
        holder.courseIV.setImageResource(courseList.get(position).courseImg)
    }
  
    override fun getItemCount(): Int {
        // on below line we are returning 
        // our size of our list
        return courseList.size
    }
  
    class CourseViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        // on below line we are initializing our course name
        // text view and our image view.
        val courseNameTV: TextView = itemView.findViewById(R.id.idTVCourse)
        val courseIV: ImageView = itemView.findViewById(R.id.idIVCourse)
    }
}

Paso 5: trabajar con el archivo activity_main.xml

Esta es la pantalla principal que muestra todos los datos en forma de cuadrícula. Aquí tenemos que implementar Recycler View. A continuación se muestra el fragmento de código del diseño XML en el archivo activity_main.xml. 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <!--on below line we are creating a 
        text for heading of our app-->
    <TextView
        android:id="@+id/idTVHeading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:gravity="center"
        android:padding="4dp"
        android:text="Swipe to Delete and Undo"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="18sp"
        android:textStyle="bold" />
  
    <!--on below line we are creating a recycler view-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/idRVCourses"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/idTVHeading" />
  
</RelativeLayout>

Paso 6: trabajar con el archivo MainActivity.kt

Vaya a aplicación>java>nombre del paquete de su aplicación>archivo MainActivity.kt y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

package com.gtappdevelopers.kotlingfgproject
  
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.ItemTouchHelper
import androidx.recyclerview.widget.RecyclerView
import com.google.android.material.snackbar.Snackbar
  
class MainActivity : AppCompatActivity() {
  
    // on below line we are creating variables for
    // our swipe to refresh layout, recycler view, adapter and list.
    lateinit var courseRV: RecyclerView
    lateinit var courseRVAdapter: CourseRVAdapter
    lateinit var courseList: ArrayList<CourseRVModal>
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
          
        // on below line we are initializing
        // our views ith their ids.
        courseRV = findViewById(R.id.idRVCourses)
  
        // on below line we are initializing our list
        courseList = ArrayList()
  
        // on below line we are initializing our adapter
        courseRVAdapter = CourseRVAdapter(courseList, this)
  
        // on below line we are setting adapter
        // to our recycler view.
        courseRV.adapter = courseRVAdapter
  
        // on below line we are adding data to our list
        courseList.add(CourseRVModal("Android Development", R.drawable.android))
        courseList.add(CourseRVModal("C++ Development", R.drawable.c))
        courseList.add(CourseRVModal("Java Development", R.drawable.java))
        courseList.add(CourseRVModal("Python Development", R.drawable.python))
        courseList.add(CourseRVModal("JavaScript Development", R.drawable.js))
  
        // on below line we are notifying adapter
        // that data has been updated.
        courseRVAdapter.notifyDataSetChanged()
  
        // on below line we are creating a method to create item touch helper
        // method for adding swipe to delete functionality.
        // in this we are specifying drag direction and position to right
        // on below line we are creating a method to create item touch helper
        // method for adding swipe to delete functionality.
        // in this we are specifying drag direction and position to right
        ItemTouchHelper(object : ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.RIGHT) {
            override fun onMove(
                recyclerView: RecyclerView,
                viewHolder: RecyclerView.ViewHolder,
                target: RecyclerView.ViewHolder
            ): Boolean {
                // this method is called
                // when the item is moved.
                return false
            }
  
            override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
                // this method is called when we swipe our item to right direction.
                // on below line we are getting the item at a particular position.
                val deletedCourse: CourseRVModal =
                    courseList.get(viewHolder.adapterPosition)
  
                // below line is to get the position
                // of the item at that position.
                val position = viewHolder.adapterPosition
  
                // this method is called when item is swiped.
                // below line is to remove item from our array list.
                courseList.removeAt(viewHolder.adapterPosition)
  
                // below line is to notify our item is removed from adapter.
                courseRVAdapter.notifyItemRemoved(viewHolder.adapterPosition)
  
                // below line is to display our snackbar with action.
                // below line is to display our snackbar with action.
                // below line is to display our snackbar with action.
                Snackbar.make(courseRV, "Deleted " + deletedCourse.courseName, Snackbar.LENGTH_LONG)
                    .setAction(
                        "Undo",
                        View.OnClickListener { 
                            // adding on click listener to our action of snack bar.
                            // below line is to add our item to array list with a position.
                            courseList.add(position, deletedCourse)
  
                            // below line is to notify item is
                            // added to our adapter class.
                            courseRVAdapter.notifyItemInserted(position)
                        }).show()
            } 
            // at last we are adding this
            // to our recycler view.
        }).attachToRecyclerView(courseRV)
  
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: