GridView usando BaseAdapter en Android con ejemplo

Aquí, estamos diseñando una aplicación de Android para demostrar el uso del diseño GridView . El diseño de GridView es un ViewGroup que agrupa vistas en una cuadrícula bidimensional de desplazamiento de filas y columnas. Los elementos de la vista de cuadrícula se insertan mediante un ListAdapter. El diseño por defecto es desplazable y no necesitamos usar ScrollView . Un ejemplo de GridView es su Galería predeterminada.

Atributos de un GridView 

Ejemplo de GridView usando diferentes adaptadores en Android

Un adaptador es una conexión entre los componentes de la interfaz de usuario, por ejemplo ( TextView , ImageView ) y la fuente de datos. Un adaptador ayuda a llenar el elemento de la interfaz de usuario con los datos apropiados. En Android, los adaptadores de uso común que completan los datos en GridView son:

1. ArrayAdapter
2. Adaptador base
3. Adaptador de array personalizada

Este tutorial usará BaseAdapter, a continuación se muestra la estructura de la clase que extiende el adaptador base. 

public class MyAdapter extends BaseAdapter 
{
    @Override public int getCount() 
    {
      return 0; 
    }
  
    @Override public Object getItem(int i)
    {
      return null;
    }
  
    @Override public long getItemId(int i) 
    {
      return 0; 
    }
  
    @Override
    public View getView(int i, View view, ViewGroup viewGroup)
    {
      return null;
    }
}

Descripción del método: 

• getCount(): este método devuelve el recuento del total de elementos que se mostrarán.
• getItem(int i): este método toma un índice y devuelve un objeto.
• getItemId (int i): este método toma un índice y devuelve la identificación del elemento que se muestra en GridView.
• getView(int I, View view, ViewGroup group): este es el método más importante que devuelve una vista que se muestra en la vista de cuadrícula. El int i es el índice, la vista puede ser (ImageView o TextView), y el grupo de vista es el contenedor que aloja la Vista, por ejemplo , LinearLayout , RelativeLayout , etc.

Ejemplo

qué artículo. 

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: trabajar con el archivo activity_main.xml

activity_main.xml El diseño se verá en blanco inicialmente, pero la clase de adaptador personalizada lo inflará durante el tiempo de ejecución. 

actividad_principal.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ImageGrid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <GridView
        android:id="@+id/grid_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="auto_fit"
        android:horizontalSpacing="10dp"
        android:verticalSpacing="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
      
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 3: Creación de un nuevo archivo XML de diseño 

Crear un nuevo archivo llamado grid_layout.xml en la misma carpeta que el archivo activity_main.xml . Esta vista personalizada alojará un ImageView. La razón principal para usar adaptadores personalizados es mostrar vistas complejas en GridView o ListView en lugar de un texto simple. La vista personalizada se llama grid_layout.xml con LinearLayout como su raíz y un ImageView simple.

grid_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    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"
    android:orientation="vertical">
  
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="center"
        tools:srcCompat="@tools:sample/avatars" />
      
</LinearLayout>

Paso 4: crear una clase de adaptador personalizada 

Llamará a esta clase MyBaseAdapter que extenderá la clase BaseAdapter y heredará los métodos que se muestran arriba. El método principal que debemos recorrer es el método getView. 

@Override
public View getView(int i, View view, ViewGroup viewGroup)
{
    if (view == null) 
    {
      LayoutInflater inflater = (LayoutInflater)c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
      view = inflater.inflate(R.layout.grid_layout, viewGroup);
    }
  
    ImageView imageView = view.findViewById(R.id.imageView);
    imageView.setImageResource(items[i]);
    return view;
}

El LayoutInflator es el responsable de analizar nuestro archivo grid_layout.xml personalizado. tenga en cuenta que esta operación es costosa y solo debe realizarse cuando sea necesario. de ahí su lugar dentro de una sentencia if. Finalmente, obtenemos una referencia al diseño y la almacenamos en la variable de vista. luego, usando eso, podemos inicializar la vista de la imagen y configurar la imagen y devolver la vista. En este ejemplo, la vista que se muestra es bastante simple, pero podemos tener una vista más completa, como mostrar la identificación de una persona que puede tener una vista personalizada de Image, TextView, etc. El código completo de MyBaseAdapter.java se proporciona a continuación . .

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
  
public class MyBaseAdapter extends BaseAdapter {
    Context c;
    int items[];
  
    MyBaseAdapter(Context c, int arr[]) 
    {
        this.c = c;
        items = arr;
    }
  
    @Override
    public int getCount() 
    {
        return items.length;
    }
  
    @Override
    public Object getItem(int i)
    {
        return null;
    }
  
    @Override
    public long getItemId(int i)
    {
        return 0;
    }
  
    @Override
    public View getView(int i, View view, ViewGroup viewGroup) 
    {
        if (view == null) 
        {
            LayoutInflater inflater = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            view = inflater.inflate(R.layout.grid_layout, null);
        }
        ImageView imageView = view.findViewById(R.id.imageView);
        imageView.setImageResource(items[i]);
        return view;
    }
}

Paso 5 Trabajar con el archivo MainActivity.java

Los datos que se usarán son imágenes de diferentes logotipos de Android Studio guardados en la carpeta dibujable . 

Para usar estas imágenes, debemos almacenarlas en una array y pasarla al adaptador personalizado.

int[] itemsarray = new int[] {
    R.drawable.android_1, R.drawable.android_2,
    R.drawable.android_3, R.drawable.android_4,
    R.drawable.android_5, R.drawable.android_1,
    R.drawable.android_2, R.drawable.android_3,
    R.drawable.android_4, R.drawable.android_5
};

Observe que se repiten las mismas 5 imágenes. Ahora configurando el adaptador base personalizado en el archivo MainActivity.java .

GridView gridView = findViewById(R.id.grid_view);
  
// create a object of myBaseAdapter
MyBaseAdapter baseAdapter = new MyBaseAdapter(this, itemsarray);
gridView.setAdapter(baseAdapter);

Primero, obtenemos una referencia del diseño de cuadrícula del archivo XML utilizando el método fineViewById() , luego creamos el objeto de myBaseAdapter que toma dos argumentos Contexto y la array de elementos. Finalmente, configuramos el adaptador. Actividad principal

import android.os.Bundle;
import android.widget.GridView;
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    int[] itemsarray = new int[]{
            R.drawable.android_1, R.drawable.android_2,
            R.drawable.android_3, R.drawable.android_4,
            R.drawable.android_5, R.drawable.android_1,
            R.drawable.android_2, R.drawable.android_3,
            R.drawable.android_4, R.drawable.android_5
    };
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        GridView gridView = findViewById(R.id.grid_view);
  
        // create a object of myBaseAdapter
        MyBaseAdapter baseAdapter = new MyBaseAdapter(this, itemsarray);
        gridView.setAdapter(baseAdapter);
    }
}

Producción