RecyclerView como cuadrícula escalonada en Android con ejemplo

GridView: un ViewGroup que muestra los elementos en una cuadrícula de desplazamiento bidimensional. En Vista de cuadrícula , cada cuadrícula tiene el mismo tamaño, es decir, la altura y el ancho de cada cuadrícula son iguales. Muestra elementos simétricos en las vistas. 

Vista de cuadrícula escalonada: este grupo de vista es la extensión de Vista de cuadrícula. En esta vista, la cuadrícula tiene un tamaño variable, es decir, su altura y anchura pueden variar. Muestra elementos asimétricos en las vistas. Establece automáticamente las vistas de los elementos según su altura y anchura.

Para usar RecyclerView para crear impresionantes vistas de cuadrícula, necesitamos usar StaggeredGridLayoutManager. LayoutManager es responsable de medir y posicionar las vistas de elementos en RecyclerView y también de reciclar las vistas de elementos cuando ya no están visibles para el usuario. Hay tres tipos de administradores de diseño integrados.

1. LinearLayoutManager: se utiliza para mostrar vistas de elementos en una lista vertical y horizontal.
2. GridLayoutManager: se utiliza para mostrar vistas de cuadrícula de vistas de elementos.
3. StaggeredLayoutManager: se utiliza para mostrar vistas de elementos en vistas escalonadas.

También podemos crear un administrador de diseño personalizado mediante la clase RecyclerView.LayoutManager.

StaggeredGridLayoutManager(int spanCount, int orientación) 

• Crea un diseño de cuadrícula escalonada con parámetros dados
• El primer parámetro, spanCount, se usa para establecer el número de columnas en orientación vertical o el número de filas en orientación horizontal.
• El segundo parámetro, orientación, se utiliza para establecer la orientación vertical u horizontal.

Cuadrícula escalonada con orientación vertical

RecyclerView recyclerView = (RecyclerView)findViewById(R.id.recyclerView);

// StaggeredGridLayoutManager con 3 columnas y orientación vertical

StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, LinearLayoutManager.VERTICAL);

// configurando el diseño de la vista del reciclador en cuadrícula escalonada

recyclerView.setLayoutManager(staggeredGridLayoutManager);
 

Cuadrícula escalonada con orientación horizontal

RecyclerView recyclerView = (RecyclerView)findViewById(R.id.recyclerView);

// StaggeredGridLayoutManager con 3 filas y orientación horizontal

StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, LinearLayoutManager.HORIZONTAL);

// configurando el diseño de la vista del reciclador en cuadrícula escalonada

recyclerView.setLayoutManager(staggeredGridLayoutManager);
 

Ejemplo

En este ejemplo, almacenaríamos datos en ArrayList , que se usa para completar RecyclerView . Después de eso, configuramos el administrador de diseño de RecyclerView como una vista de cuadrícula escalonada y luego, configuramos el Adaptador para RecyclerView para mostrar vistas de elementos. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java . 

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

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

Paso 2: Agregar dependencias

Vamos a utilizar el RecyclerView. Entonces, necesitamos agregar la dependencia de la misma. Para agregar la dependencia, vaya a Gradle Scripts > build.gradle(Module: app) y agregue las siguientes dependencias. Después de agregar estas dependencias, debe hacer clic en Sincronizar ahora .

dependencias {

  implementación ‘androidx.recyclerview:recyclerview:1.1.0’

}

Antes de continuar, agreguemos algunos atributos de color para mejorar la barra de la aplicación. Vaya a aplicación > res > valores > colores.xml y agregue los siguientes atributos de color. 

<resources>  
    <color name="colorPrimary">#0F9D58</color>  
    <color name="colorPrimaryDark">#16E37F</color>  
    <color name="colorAccent">#03DAC5</color>  
</resources>

Paso 3: trabajar con el archivo activity_main.xml

En este paso, crearemos un diseño RecyclerView en el archivo activity_main.xml . Vaya a aplicación > res > diseño > actividad_principal.xml y agregue el siguiente fragmento de código. 

<?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">
  
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

Paso 4: cree un nuevo archivo de diseño list_item.xml para los elementos de la lista de 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 asígnele el nombre list_item. El archivo de diseño list_item.xml contiene un ImageView que se usa para completar las filas de RecyclerView.

<?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:layout_margin="4dp">
  
    <!--For image src we have used ic_launcher
        it is used only for reference how it will look"-->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher" />
      
</RelativeLayout>

Paso 5: crear una clase de adaptador para RecyclerView

Ahora, crearemos una clase Adapter.java que extenderá RecyclerView.Adapter con ViewHolder. Vaya a la aplicación> java> paquete> haga clic con el botón derecho y cree una nueva clase java y asígnele el nombre Adaptador . En la clase Adapter, anularemos el método onCreateViewHolder() que inflará el diseño list_item.xml y lo pasará a View Holder. Luego , el método onBindViewHolder() donde configuramos los datos en las Vistas con la ayuda de View Holder. A continuación se muestra el fragmento de código para la clase Adapter.java .

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
  
// Extends the Adapter class to RecyclerView.Adapter
// and implement the unimplemented methods
public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {
    ArrayList images;
    Context context;
  
    // Constructor for initialization
    public Adapter(Context context, ArrayList images) {
        this.context = context;
        this.images = images;
    }
  
    @NonNull
    @Override
    public Adapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // Inflating the Layout(Instantiates list_item.xml layout file into View object)
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);
  
        // Passing view to ViewHolder
        Adapter.ViewHolder viewHolder = new Adapter.ViewHolder(view);
        return viewHolder;
    }
  
    // Binding data to the into specified position
    @Override
    public void onBindViewHolder(@NonNull Adapter.ViewHolder holder, int position) {
        // TypeCast Object to int type
        int res = (int) images.get(position);
        holder.images.setImageResource(res);
    }
  
    @Override
    public int getItemCount() {
        // Returns number of items currently available in Adapter
        return images.size();
    }
  
    // Initializing the Views
    public class ViewHolder extends RecyclerView.ViewHolder {
        ImageView images;
  
        public ViewHolder(View view) {
            super(view);
            images = (ImageView) view.findViewById(R.id.imageView);
        }
    }
}

Paso 6: trabajar con el archivo MainActivity.java

En la clase MainActivity.java creamos un ArrayList para almacenar imágenes. Estas imágenes se colocan en la carpeta dibujable ( aplicación > res > dibujable ). Puede usar cualquier imagen en lugar de estas. Y luego obtenemos la referencia RecyclerView y configuramos LayoutManager como StaggeredGridLayoutManager y Adapter, para mostrar elementos en RecyclerView. A continuación se muestra el código del archivo MainActivity.java.

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;
import java.util.ArrayList;
import java.util.Arrays;
  
public class MainActivity extends AppCompatActivity {
      
    RecyclerView recyclerView;
  
    // Using ArrayList to store images data
    ArrayList images = new ArrayList<>(Arrays.asList(R.drawable.img_1, R.drawable.img_2, R.drawable.img_3,
            R.drawable.img_4, R.drawable.img_5, R.drawable.img_6, R.drawable.img_7, R.drawable.img_8,
            R.drawable.img_9, R.drawable.img_10));
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Getting reference of recyclerView
        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
  
        // Setting the layout as Staggered Grid for vertical orientation
        StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(2, LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(staggeredGridLayoutManager);
  
        // Sending reference and data to Adapter
        Adapter adapter = new Adapter(MainActivity.this, images);
  
        // Setting Adapter to RecyclerView
        recyclerView.setAdapter(adapter);
    }
}

Salida: ejecutar en el emulador