Android GridView en Kotlin

Una vista de cuadrícula es un tipo de vista de adaptador que se utiliza para mostrar los datos en el formato de diseño de cuadrícula. Para configurar los datos en la vista de cuadrícula, se utiliza el adaptador con la ayuda del método setAdapter(). Este adaptador ayuda a configurar los datos de la base de datos o la lista de arrays en los elementos de la vista de cuadrícula. En este artículo, veremos cómo implementar Grid View en Android usando el lenguaje 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 Grid View en Android usando Java. Consulte el siguiente artículo: Vista de cuadrícula 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: 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"?>
<RelativeLayout
    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"
    tools:context=".MainActivity">
 
    <!--on below line we are creating a grid view-->
    <GridView
        android:id="@+id/idGRV"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:horizontalSpacing="6dp"
        android:numColumns="2"
        android:verticalSpacing="6dp" />
 
</RelativeLayout>

Paso 3: cree un archivo de diseño XML para cada elemento de GridView

Cree un archivo XML para cada elemento de la cuadrícula que se mostrará en GridView. 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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    app:cardCornerRadius="5dp"
    app:cardElevation="5dp">
 
    <!--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="vertical">
 
        <!--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="5dp"
            android:padding="4dp"
            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="center"
            android:textColor="@color/black" />
 
    </LinearLayout>
 
</androidx.cardview.widget.CardView>

Paso 4: crea una clase modal para almacenar datos

Modal Class es la clase JAVA que maneja los datos que se agregarán a cada elemento GridView de GridView. Para crear una clase modal. Vaya a aplicación > java > 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 GridViewModal 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 GridViewModal(
    // 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 5: crear la clase de adaptador 

Adapter Class agrega los datos de Modal Class en cada elemento de GridView que se mostrará en la pantalla. Para crear una clase de adaptador. Vaya 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 GridRVAdapter y agréguele el siguiente código. 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 GridRVAdapter(
    // on below line we are creating two
    // variables for course list and context
    private val courseList: List<GridViewModal>,
    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 the 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 6: agregar imágenes a la carpeta dibujable 

Copia tus imágenes. Y navegue a la 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. Consulte este artículo Cómo agregar una imagen a una carpeta dibujable en Android Studio

Paso 7: 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.GridView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import java.util.*
import kotlin.collections.ArrayList
 
class MainActivity : AppCompatActivity() {
    // on below line we are creating
    // variables for grid view and course list
    lateinit var courseGRV: GridView
    lateinit var courseList: List<GridViewModal>
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        // initializing variables of grid view with their ids.
        courseGRV = findViewById(R.id.idGRV)
        courseList = ArrayList<GridViewModal>()
        
        // on below line we are adding data to
        // our course list with image and course name.
        courseList = courseList + GridViewModal("C++", R.drawable.c)
        courseList = courseList + GridViewModal("Java", R.drawable.java)
        courseList = courseList + GridViewModal("Android", R.drawable.android)
        courseList = courseList + GridViewModal("Python", R.drawable.python)
        courseList = courseList + GridViewModal("Javascript", R.drawable.js)
 
        // on below line we are initializing our course adapter
        // and passing course list and context.
        val courseAdapter = GridRVAdapter(courseList = courseList, this@MainActivity)
        
        // on below line we are setting adapter to our grid view.
        courseGRV.adapter = courseAdapter
         
        // on below line we are adding on item
        // click listener for our grid view.
        courseGRV.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()
        }
 
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: