Android: RecyclerView como cuadrícula escalonada con Kotlin

La vista de cuadrícula escalonada se ha visto en la mayoría de las aplicaciones, como Pinterest, en la que cada elemento de la vista de cuadrícula toma su propia altura y se alinea dentro de la vista de cuadrícula de acuerdo con eso. En este artículo, veremos cómo implementar el Administrador de diseño de cuadrícula escalonada en nuestra Vista de reciclador en Android.

Nota : si está buscando implementar el Administrador de diseño de cuadrícula escalonada en su vista de reciclador de Android. Consulte el siguiente artículo: Administrador de diseño de cuadrícula escalonada en Android Recycler View en 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 dependencia de Picasso

Como estamos cargando imágenes dentro de nuestra Vista de reciclador usando la URL de la imagen. Entonces usaremos Picasso para cargar estas imágenes desde la URL de la imagen. Por añadir la dependencia de Picasso. Vaya a Gradle Scripts>build.gradle file y agregue la siguiente dependencia en el archivo buid.gradle. 

implementation 'com.squareup.picasso:picasso:2.71828'

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

Paso 3: cree un archivo de diseño para cada elemento de nuestro RecyclerView

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 photo_rv_item. 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 photo_rv_item.xml.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="4dp">
 
    <!--on below line we are
        creating a simple image view-->
    <ImageView
        android:id="@+id/idIVImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />
 
</RelativeLayout>

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

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

package com.gtappdevelopers.kotlingfgproject
 
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import androidx.recyclerview.widget.RecyclerView
import com.squareup.picasso.Picasso
 
class PhotoRVAdapter(
    // on below line we are passing variables as list
    private val photoList: ArrayList<String>,
) : RecyclerView.Adapter<PhotoRVAdapter.PhotoViewHolder>() {
    override fun onCreateViewHolder(
        parent: ViewGroup,
        viewType: Int
    ): PhotoRVAdapter.PhotoViewHolder {
        // 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.photo_rv_item,
            parent, false
        )
        // at last we are returning our view holder
        // class with our item View File.
        return PhotoRVAdapter.PhotoViewHolder(itemView)
    }
 
    override fun onBindViewHolder(holder: PhotoRVAdapter.PhotoViewHolder, position: Int) {
        // on below line we are loading image from image url in our image view.
        Picasso.get().load(photoList.get(position)).into(holder.photoIV)
    }
 
    override fun getItemCount(): Int {
        // on below line we are returning
        // the size of our list
        return photoList.size
    }
 
    class PhotoViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        // on below line we are initializing our image view.
        val photoIV: ImageView = itemView.findViewById(R.id.idIVImage)
    }
 
}

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="Staggered Grid Layout Manager"
        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/idRVPhotos"
        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 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 androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import androidx.recyclerview.widget.StaggeredGridLayoutManager
 
class MainActivity : AppCompatActivity() {
 
    // on below line we are creating variables for
    // our swipe to refresh layout,
    // recycler view, adapter and list.
    lateinit var photoRV: RecyclerView
    lateinit var photoRVAdapter: PhotoRVAdapter
    lateinit var photoList: ArrayList<String>
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
         
        // on below line we are initializing
        // our views with their ids.
        photoRV = findViewById(R.id.idRVPhotos)
 
        // on below line we are
        // initializing our list
        photoList = ArrayList()
 
        // on below line we are initializing our adapter
        photoRVAdapter = PhotoRVAdapter(photoList)
 
        // on below line we are setting layout manager for our recycler view
        val staggeredGridLayoutManager = StaggeredGridLayoutManager(2, LinearLayoutManager.VERTICAL)
        photoRV.layoutManager = staggeredGridLayoutManager
 
        // on below line we are setting
        // adapter to our recycler view.
        photoRV.adapter = photoRVAdapter
 
        // on below line we are adding data to our list
        photoList.add("https://videocdn.geeksforgeeks.org/geeksforgeeks/2DTranslationinComputerGraphics/2DTranslationinComputerGraphics20220628122713-small.png")
        photoList.add("https://videocdn.geeksforgeeks.org/geeksforgeeks/PythonProgramforFibonacciSeries/FibonacciseriesinPython20220627183541-small.png")
        photoList.add("https://pbs.twimg.com/media/FV6-TWhUsAY92R_.jpg")
        photoList.add("https://videocdn.geeksforgeeks.org/geeksforgeeks/PerformCRUDOperationusingFirebaseinFlutter/PerformCRUDOperationusingFirebaseinFlutter20220627152121-small.png")
        photoList.add("https://videocdn.geeksforgeeks.org/geeksforgeeks/CProgramtoConvertLowercasetoUppercaseviceversa/CProgramtoConvertLowercasetoUppercase20220627145001-small.png")
        photoList.add("https://videocdn.geeksforgeeks.org/geeksforgeeks/OptimalPageReplacementAlgorithminOS/OptimalPageReplacement20220627124822-small.png")
        photoList.add("https://videocdn.geeksforgeeks.org/geeksforgeeks/JavaProgramtoFindQuotientRemainder/JavaProgramtoFindQuotientandRemainder20220626125601-small.png")
        photoList.add("https://videocdn.geeksforgeeks.org/geeksforgeeks/FirstandFollowinCompilerDesign/FirstFollowinCompilerDesign20220624172015-small.png")
        photoList.add("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png")
        photoList.add("https://media.geeksforgeeks.org/wp-content/uploads/20220531202857/photo6102488593462309569.jpg")
        photoList.add("https://practice.geeksforgeeks.org/_next/image?url=https%3A%2F%2Fmedia.geeksforgeeks.org%2Fimg-practice%2Fbanner%2Fdsa-self-paced-thumbnail.png%3Fv%3D19171&w=1920&q=75")
        photoList.add("https://practice.geeksforgeeks.org/_next/image?url=https%3A%2F%2Fmedia.geeksforgeeks.org%2Fimg-practice%2Fbanner%2Fcompetitive-programming-live-thumbnail.png%3Fv%3D19171&w=1920&q=75")
 
        // on below line we are notifying adapter
        // that data has been updated.
        photoRVAdapter.notifyDataSetChanged()
 
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: