Implemente Android Pull-to-Refresh con ListVIew usando Kotlin

Deslizar para actualizar el diseño se usa en la mayoría de las aplicaciones de redes sociales como Facebook o Instagram. En estas aplicaciones, los usuarios pueden simplemente deslizar hacia abajo para actualizar las publicaciones o fuentes dentro de las aplicaciones para cargar las nuevas. Deslizar para actualizar el diseño detecta el deslizamiento vertical y muestra una barra de progreso. Después de eso, la vista de lista se actualizará con los nuevos datos de la base de datos. En este artículo, veremos cómo implementar Pull to Refresh ListView en Android usando Kotlin. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.

Nota : si está buscando implementar una función similar dentro de la aplicación de Android usando el lenguaje Java. Consulte el siguiente artículo: Tire para actualizar con vista de lista en Android usando Java 

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.

Paso 2: agregar dependencias a build.gradle

Estamos usando SwipeRefreshLayout. Entonces, necesitamos agregar la dependencia para ello. Para agregar la dependencia, vaya a Gradle Scripts > build.gradle(Module: app) y agregue la siguiente dependencia. Después de agregar la dependencia, debe hacer clic en Sincronizar ahora.

implementation ‘androidx.swiperefreshlayout:swiperefreshlayout:1.1.0’ 

Después de agregar esta dependencia, simplemente sincronice su proyecto para instalar la dependencia. 

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml . Se agregan comentarios dentro del código para comprender el código con más detalle.

<?xml version="1.0" encoding="utf-8"?>
<!--on below line we are creating a swipe to refresh layout-->
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/idSwipeToRefresh"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <!--on below line we are creating a list view-->
    <ListView
        android:id="@+id/idListView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
   
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

Paso 4: cree un archivo de diseño XML para cada elemento de ListView

Cree un archivo XML para cada elemento de la cuadrícula que se mostrará en ListView. Haga clic en la aplicación> res> diseño> clic derecho> archivo de recursos de diseño y luego nombre el archivo como gridview_item. A continuación se muestra el código para el archivo gridview_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="0dp">
       
    <!--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 5: crea una clase modal para almacenar datos

Modal Class es la clase JAVA que maneja los datos que se agregarán a cada elemento ListView de ListView. Para crear una clase modal. Vaya a aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Java/Kotlin y especifique el nombre como ListViewModal y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

package com.gtappdevelopers.kotlingfgproject
 
// on below line we are creating a modal class.
data class ListViewModal(
    // we are creating a modal class with 2 member
    // one is course name as string
    // and other course img as int.
    val courseName: String,
    val courseImg: Int
)

Paso 6: crear la clase de adaptador

Adapter Class agrega los datos de Modal Class en cada elemento de ListView que se mostrará en la pantalla. Para crear una clase de adaptador. Navegue a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Java/Kotlin y especifique el nombre como CourseLVAdapter y agréguele el código a continuación. Se agregan comentarios en el código para conocer en detalle. 

package com.gtappdevelopers.kotlingfgproject
 
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import android.widget.ImageView
import android.widget.TextView
 
// on below line we are creating
// an adapter class for our grid view.
internal class CourseLVAdapter(
    // on below line we are creating two variables
    // for course list and context
    private val courseList: List<ListViewModal>,
    private val context: Context
) :
    BaseAdapter() {
     
    // in base adapter class we are creating variables for
    // layout inflater, course image view and course text view.
    private var layoutInflater: LayoutInflater? = null
    private lateinit var courseTV: TextView
    private lateinit var courseIV: ImageView
 
    // below method is use to return the count of course list
    override fun getCount(): Int {
        return courseList.size
    }
 
    // below function is use to return the item of grid view.
    override fun getItem(position: Int): Any? {
        return null
    }
     
    // below function is use to return item id of grid view.
    override fun getItemId(position: Int): Long {
        return 0
    }
 
    // in below function we are getting individual item of grid view.
    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View? {
        var convertView = convertView
        // on blow line we are checking if layout inflater
        // is null, if it is null we are initializing it.
        if (layoutInflater == null) {
            layoutInflater =
                context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        }
        // on below line we are checking if convert view is null.
        // If it is null we are initializing it.
        if (convertView == null) {
            // on below line we are passing the layout file
            // which we have to inflate for each item of grid view.
            convertView = layoutInflater!!.inflate(R.layout.gridview_item, null)
        }
        // on below line we are initializing our course image view
        // and course text view with their ids.
        courseIV = convertView!!.findViewById(R.id.idIVCourse)
        courseTV = convertView!!.findViewById(R.id.idTVCourse)
         
        // on below line we are setting image for our course image view.
        courseIV.setImageResource(courseList.get(position).courseImg)
         
        // on below line we are setting text in our course text view.
        courseTV.setText(courseList.get(position).courseName)
         
        // at last we are returning our convert view.
        return convertView
    }
}

Paso 7: Agregar imágenes a la carpeta dibujable.

Copia tus imágenes. Navegue a aplicación> res> dibujable> Haga clic con el botón derecho en él y pegue todas las imágenes que son copias dentro de la carpeta dibujable.

Paso 8: trabajar con el archivo 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.

package com.gtappdevelopers.kotlingfgproject
 
import android.os.Bundle
import android.widget.AdapterView
import android.widget.ListView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
import java.util.*
import kotlin.collections.ArrayList
 
class MainActivity : AppCompatActivity() {
    // on below line we are creating variables for list view,
    // swipe to refresh layout and course list
    lateinit var courseLV: ListView
    lateinit var swipeToRefreshLV: SwipeRefreshLayout
    lateinit var courseList: List<ListViewModal>
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
         
        // initializing variables of list view and
        // swipe refresh view with their ids.
        courseLV = findViewById(R.id.idListView)
        swipeToRefreshLV = findViewById(R.id.idSwipeToRefresh)
        courseList = ArrayList<ListViewModal>()
         
        // on below line we are adding data to our
        // course list with image and course name.
        courseList = courseList + ListViewModal("C++", R.drawable.c)
        courseList = courseList + ListViewModal("Java", R.drawable.java)
        courseList = courseList + ListViewModal("Android", R.drawable.android)
        courseList = courseList + ListViewModal("Python", R.drawable.python)
        courseList = courseList + ListViewModal("Javascript", R.drawable.js)
 
        // on below line we are initializing our course adapter
        // and passing course list and context.
        val courseAdapter = CourseLVAdapter(courseList = courseList, this@MainActivity)
         
        // on below line we are setting adapter to our grid view.
        courseLV.adapter = courseAdapter
         
        // on below line we are adding on item click listener for our grid view.
        courseLV.onItemClickListener = AdapterView.OnItemClickListener { _, _, position, _ ->
            // inside on click method we are simply displaying
            // a toast message with course name.
            Toast.makeText(
                applicationContext, courseList[position].courseName + " selected",
                Toast.LENGTH_SHORT
            ).show()
        }
 
        // on below line we are initializing our swipe to refresh
        // layout by calling set ib refresh listener method
        swipeToRefreshLV.setOnRefreshListener {
             
            // on below line we are setting refreshing to false/
            swipeToRefreshLV.isRefreshing = false
             
            // on below line we are creating a variable
            // for our original list
            val originalList = courseList.toMutableList()
             
            // on below line we are shuffling our list.
            val shuffledList = originalList.shuffled()
             
            // on below line we are initializing our course adapter
            // and passing course list and context.
            val courseAdapter = CourseLVAdapter(courseList = shuffledList, this@MainActivity)
             
            // on below line we are setting adapter to our list view.
            courseLV.adapter = courseAdapter
        }
 
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: