GridView escalonado en Android con ejemplo

StaggeredGridLayout es un LayoutManager en Android Studio similar a GridView , pero en StaggeredGridLayout cada cuadrícula tiene su propio alto y ancho.

Diferencia entre GridView y GridView escalonado 

Disposición de cuadrícula escalonada

1. Los de los niños están en un formato de cuadrícula escalonada.
2. Admite diseño horizontal y vertical.
3. Ejemplo: Pinterest, una aplicación de fondo de pantalla, una aplicación de estado, etc.

Vista en cuadrícula

1. El infantil en formato rejilla rectangular
2. También es compatible con el diseño horizontal y vertical.
3. Ejemplo: Flipkart, Amazon, aplicación de fondo de pantalla, etc.

Ejemplo

qué

Implementación paso a paso

Paso 1: Creación de 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 elija Java como lenguaje, aunque vamos a implementar este proyecto en lenguaje Java.

Paso 2: antes de ir a la sección de codificación, primero haga una tarea previa

Vaya a la sección Gradle Scripts > build.gradle (Módulo: aplicación) e importe las siguientes dependencias y haga clic en » sincronizar ahora » en la ventana emergente anterior.

dependencias
{

// Agregando la vista del reciclador 

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

}

Paso 3: Diseño de la interfaz de usuario 

En el archivo activity_main.xml agregue un RecyclerView como se muestra a continuación. 

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

Ahora creamos un nuevo archivo de recursos de diseño ( recyclerview_row.xml ) dentro de él, agregamos un ImageView simple y lo configuramos  android:scaleType=”fitXY” El código completo de recyclerview_row.xml se muestra a continuación

<?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="8dp">
  
    <!-- simple image view -->
    <ImageView
        android:id="@+id/imgView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/k1" />
</RelativeLayout>

Paso 4: Parte de codificación

Primero, creamos una clase RecyclerViewAdapter.java y la extendemos a RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder>  e implementamos sus métodos como se muestra a continuación. 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 androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
  
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
  
    // ArrayList
    ArrayList<Integer> Image;
    Context context;
  
    // constructor
    public RecyclerViewAdapter(Context context, ArrayList<Integer> Image) {
        super();
        this.context = context;
        this.Image = Image;
    }
  
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.recyclerview_row, viewGroup, false);
        ViewHolder viewHolder = new ViewHolder(v);
        return viewHolder;
    }
  
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int i) {
        // setting image resource
        viewHolder.imgview.setImageResource(Image.get(i));
    }
  
    @Override
    public int getItemCount() {
        return Image.size();
    }
  
    public static class ViewHolder extends RecyclerView.ViewHolder {
  
        public ImageView imgview;
        public ViewHolder(View itemView) {
            super(itemView);
            
            // getting ImageView reference
            imgview = (ImageView) itemView.findViewById(R.id.imgView);
        }
    }
}

Ahora abra el archivo MainActivity.java allí dentro de la clase, en primer lugar, cree el objeto RecyclerViewAdapter, la clase RecyclerView y un ArrayList  para almacenar ID de imágenes .

// creando objeto recyclerviewadapter

RecyclerViewAdapter recyclerViewAdapter;

// creando lista de arreglos

ArrayList<Integer> ImageList;

// creando objeto de vista de reciclador

RecyclerView RecyclerView;

Ahora, dentro del método onCreate() , vincula esos objetos con sus respectivos ID que se proporcionan en el archivo activity_main.xml .

 // agregar valores a arrayList

 ImageList = new ArrayList<>(Arrays.asList(

               R.dibujable.k1, R.dibujable.k2,

               R.divisible.k3, R.divisible.k4,

               R.divisible.k5, R.divisible.k6,

               R.divisible.k7, R.divisible.k8,

               R.dibujable.k9)

 );

 RecyclerView = findViewById(R.id.recycleViewStagged);

Ahora, dentro del método onCreate() , creamos un   RecyclerView.LayoutManager (Obtenga más información sobre StaggeredGridLayoutManager ) y lo configuramos en RecyclerView 

// configurando recyclerView layoutManager

RecyclerView.LayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);

recyclerView.setLayoutManager(layoutManager);

Ahora inicializamos y setAdapter()

recyclerViewAdapter = new RecyclerViewAdapter(this, ImageList);

// configurar el adaptador de vista de reciclaje

recyclerView.setAdapter(recyclerViewAdapter);

A continuación se muestra el código completo 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.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;
import java.util.ArrayList;
import java.util.Arrays;
  
public class MainActivity extends AppCompatActivity {
  
    // creating recyclerviewadapter object
    RecyclerViewAdapter recyclerViewAdapter;
      
    // creating arrayList
    ArrayList<Integer> ImageList;
      
    // creating recycler view object
    RecyclerView recyclerView;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // adding values to arrayList
        ImageList = new ArrayList<>(Arrays.asList(
                R.drawable.k1, R.drawable.k2,
                R.drawable.k3, R.drawable.k4,
                R.drawable.k5, R.drawable.k6,
                R.drawable.k7, R.drawable.k8,
                R.drawable.k9)
        );
  
        recyclerView = findViewById(R.id.recycleViewStagged);
  
        // setting recyclerView layoutManager
        RecyclerView.LayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);
        recyclerViewAdapter = new RecyclerViewAdapter(this, ImageList);
          
        // setting recycle view adapter
        recyclerView.setAdapter(recyclerViewAdapter);
    }
}

Producción: