RecyclerView usando GridLayoutManager en Android con ejemplo

RecyclerView es la versión improvisada de ListView en Android. Se introdujo por primera vez en Marshmallow . La vista Recycler en Android es la clase que amplía ViewGroup e implementa la interfaz de desplazamiento. Se puede utilizar en forma de ListView o en forma de Grid View. 

¿Cómo usar RecyclerView como GridView?

Al implementar la vista Recycler en Android, generalmente tenemos que configurar el administrador de diseño para mostrar nuestra Vista Recycler. Hay dos tipos de administradores de diseño para que Recycler View los implemente. 

1. Administrador de diseño lineal: en el administrador de diseño lineal, podemos alinear nuestra vista de reciclador en forma de desplazamiento horizontal o vertical especificando su orientación como vertical u horizontal. 
2. Grid Layout Manager: En Grid Layout Manager podemos alinear nuestro reciclador en forma de cuadrícula. Aquí tenemos que mencionar el número de columnas que se mostrarán en la cuadrícula de Recycler View.

Diferencia entre RecyclerView y GridView

1. Implementación del titular de la vista

En GridView no era obligatorio usar la implementación del titular de vista, pero en RecyclerView es obligatorio usar la implementación del titular de vista para Recycler View. Hace que el código sea complejo, pero muchas de las dificultades que se enfrentan en GridView se resuelven en RecyclerView. 

2. Rendimiento de la vista del reciclador

RecyclerView es una versión improvisada de ListView. Se ha improvisado el rendimiento de Recycler View. En RecyclerView, los elementos están delante y detrás de las entradas visibles. 

Ejemplo de GridLayoutManager en RecyclerView

qué

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Project, simplemente consulte este artículo sobre Cómo crear un nuevo proyecto en Android Studio y asegúrese de que el idioma sea Java . Para implementar Recycler View, se necesitan tres subpartes que son útiles para controlar RecyclerView. Estas tres subpartes incluyen: 

• Diseño de la tarjeta: el diseño de la tarjeta es un archivo XML que representará cada elemento de cuadrícula individual dentro de la vista de Recycler.
• View Holder: View Holder Class es la clase java que almacena la referencia a los Elementos de la UI en el Diseño de la Tarjeta y pueden ser modificados dinámicamente durante la ejecución del programa por la lista de datos.
• Clase de datos: la clase de datos es una clase de objeto que contiene información que se mostrará en cada elemento de la vista del reciclador que se mostrará en la Vista del reciclador.

Paso 2: agregue el repositorio de Google en el archivo build.gradle del proyecto de la aplicación.

script de compilación {

 repositorios {

     Google()

     mavenCentral()

}

Todos los componentes de Jetpack están disponibles en el repositorio de Google Maven, inclúyelos en el archivo build.gradle

todos los proyectos {

 repositorios {

     Google()

    mavenCentral()

 }

}

Paso 3: 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 card_layout . 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 card_layout.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="120dp"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    app:cardCornerRadius="5dp"
    app:cardElevation="5dp">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
 
        <ImageView
            android:id="@+id/idIVcourseIV"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:contentDescription="@string/image"
            android:src="@mipmap/ic_launcher" />
 
        <TextView
            android:id="@+id/idTVCourse"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:textAlignment="center" />
 
    </LinearLayout>
 
</androidx.cardview.widget.CardView>

Paso 4: 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 Java y nombre el archivo como RecyclerData . Esta clase manejará los datos de cada elemento de Recycler que se va a mostrar. A continuación se muestra el código para el archivo RecyclerData.java .

public class RecyclerData {
 
    private String title;
    private int imgid;
 
    public String getTitle() {
        return title;
    }
 
    public void setTitle(String title) {
        this.title = title;
    }
 
    public int getImgid() {
        return imgid;
    }
 
    public void setImgid(int imgid) {
        this.imgid = imgid;
    }
 
    public RecyclerData(String title, int imgid) {
        this.title = title;
        this.imgid = imgid;
    }
}

Paso 5: cree una nueva clase Java para el adaptador

Del mismo modo, cree una nueva clase de Java y nombre el archivo como RecyclerViewAdapter . El adaptador es la clase principal responsable de RecyclerView. Contiene todos los métodos que son útiles en RecyclerView. 

Nota: View Holder Class también se implementa en Adapter Class. 

Estos métodos para manejar Recycler View incluyen:  

• onCreateViewHolder: este método aumenta los elementos de diseño de la tarjeta para Recycler View.
• onBindViewHolder: este método establece los datos en vistas específicas de los elementos de la tarjeta. También maneja métodos relacionados con clics en elementos de la vista Recycler.
• getItemCount: este método devuelve la longitud de RecyclerView.

A continuación se muestra el código del archivo RecyclerViewAdapter.java . Se agregan comentarios dentro del código para comprender el código con más detalle. 

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.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
 
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.RecyclerViewHolder> {
 
    private ArrayList<RecyclerData> courseDataArrayList;
    private Context mcontext;
 
    public RecyclerViewAdapter(ArrayList<RecyclerData> recyclerDataArrayList, Context mcontext) {
        this.courseDataArrayList = recyclerDataArrayList;
        this.mcontext = mcontext;
    }
 
    @NonNull
    @Override
    public RecyclerViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // Inflate Layout
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_layout, parent, false);
        return new RecyclerViewHolder(view);
    }
 
    @Override
    public void onBindViewHolder(@NonNull RecyclerViewHolder holder, int position) {
        // Set the data to textview and imageview.
        RecyclerData recyclerData = courseDataArrayList.get(position);
        holder.courseTV.setText(recyclerData.getTitle());
        holder.courseIV.setImageResource(recyclerData.getImgid());
    }
 
    @Override
    public int getItemCount() {
        // this method returns the size of recyclerview
        return courseDataArrayList.size();
    }
 
    // View Holder Class to handle Recycler View.
    public class RecyclerViewHolder extends RecyclerView.ViewHolder {
 
        private TextView courseTV;
        private ImageView courseIV;
 
        public RecyclerViewHolder(@NonNull View itemView) {
            super(itemView);
            courseTV = itemView.findViewById(R.id.idTVCourse);
            courseIV = itemView.findViewById(R.id.idIVcourseIV);
        }
    }
}

Paso 6: 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"?>
<!--XMl Layout for RecyclerView-->
<androidx.constraintlayout.widget.ConstraintLayout
    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">
 
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/idCourseRV"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 7: trabajar con el archivo MainActivity.java 

Este es el archivo java principal en el que estableceremos LayoutManager, el adaptador y estableceremos los datos en RecyclerView, que se mostrará en RecyclerView. A continuación se muestra el código del archivo MainActivity.java . 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.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
 
public class MainActivity extends AppCompatActivity {
 
    private RecyclerView recyclerView;
    private ArrayList<RecyclerData> recyclerDataArrayList;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerView=findViewById(R.id.idCourseRV);
 
        // created new array list..
        recyclerDataArrayList=new ArrayList<>();
 
        // added data to array list
        recyclerDataArrayList.add(new RecyclerData("DSA",R.drawable.ic_gfglogo));
        recyclerDataArrayList.add(new RecyclerData("JAVA",R.drawable.ic_gfglogo));
        recyclerDataArrayList.add(new RecyclerData("C++",R.drawable.ic_gfglogo));
        recyclerDataArrayList.add(new RecyclerData("Python",R.drawable.ic_gfglogo));
        recyclerDataArrayList.add(new RecyclerData("Node Js",R.drawable.ic_gfglogo));
 
        // added data from arraylist to adapter class.
        RecyclerViewAdapter adapter=new RecyclerViewAdapter(recyclerDataArrayList,this);
         
        // setting grid layout manager to implement grid view.
        // in this method '2' represents number of columns to be displayed in grid view.
        GridLayoutManager layoutManager=new GridLayoutManager(this,2);
         
        // at last set adapter to recycler view.
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(adapter);
    }
}

Producción:  

Puede consultar el enlace del proyecto que se menciona a continuación, donde puede obtener todo el código para implementar RecyclerView con Grid Layout Manager. Si desea implementar On Click Listener para Recycler Items en Grid Layout, consulte esta publicación para ver la implementación de RecyclerView . 

Enlace del proyecto: Haga clic aquí