GridView usando Custom ArrayAdapter en Android con ejemplo

Este artículo creará una aplicación para demostrar el uso de CustomArrayAdapters en GridView . GridViews son contenedores de vista que muestran vistas en dos dimensiones (filas y columnas) y se usan en mis aplicaciones de Android. Un ejemplo simple sería la aplicación de galería. El adaptador conecta los elementos de la interfaz de usuario con la fuente de datos. Ayuda a completar los datos mientras nos ocupamos de ellos. por ejemplo, cuando el usuario se desplaza por una aplicación de galería, GridView se completa automáticamente sin especificar nada. Hay diferentes adaptadores por nombrar algunos. 

• ArrayAdapter 
• Adaptador base 
• Adaptador de array personalizada 

Este artículo cubrirá el Custom ArrayAdapter. 

¿Por qué usar un Custom ArrayAdapter? 

Android ya proporciona la implementación de un ArrayAdapter , que se puede usar con una sola línea como se muestra a continuación. Se usan cuando Siempre que tenemos una lista de elementos únicos, podemos usar ArrayAdapter. Por ejemplo, una lista de contactos telefónicos, países o nombres. A continuación se muestra la sintaxis del ArrayAdapter utilizado para mostrar datos de texto.

Sintaxis:

ArrayAdapter (contexto contextual, recurso int, textViewResourceId int, objetos T [])

Parámetros:

Contexto: es el contexto de la aplicación que se está utilizando 

recurso: el segundo parámetro es la identificación del recurso que se usa para establecer el diseño (archivo xml). 

textViewResourceId: Id del elemento TextView donde se mostrarán los datos 

objetos: son los elementos de datos almacenados en una array. 

El problema o la limitación de este método es que no podemos usar diseños complejos, por ejemplo. Imagine que estuviéramos creando una aplicación como Netflix o Prime donde cada elemento se compone de muchos elementos, por ejemplo , ImageView , TextView , etc. Estas vistas complejas no son posibles con la implementación simple de ArrayAdapter para esto, necesitamos crear nuestro adaptador personalizado por extendiendo la clase ArrayAdapter. El código siguiente muestra la estructura de Custom ArrayAdapter.

public class CustomAdapter extends ArrayAdapter
{
 
    public CustomAdapter(Context context, int resource, List objects)
    {
        super(context, resource, objects);
    }
    @Override public int getCount()
    {
        return super.getCount();
    }
 
    @Override
    public View getView(int position, View convertView, ViewGroup parent)
    {
        return super.getView(position, convertView, parent);
    }
}

Los dos métodos importantes utilizados son: 

1. getCount(): devuelve el número de elementos de datos presentes en la Lista.
2. getView(): este es el método importante donde se inicializará y devolverá la vista personalizada.

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

Abra el archivo activity_main.xml e inserte un componente GridView en él. 

A continuación se muestra el código para el  archivo activity_main.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: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:horizontalSpacing="10dp"
        android:numColumns="auto_fit"
        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 

Creando un nuevo archivo llamado custom_view.xml en la misma carpeta que el archivo activity_main.xml . Esta vista personalizada albergará un ImageView y un TextView . 

A continuación se muestra el código para el  archivo custom_view.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"
        tools:srcCompat="@tools:sample/avatars" />
 
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textAlignment="center" />
     
</LinearLayout>

Paso 4: Creando una nueva clase Java

Ahora, para mantener la información de nuestra vista personalizada, necesitamos crear una clase de captador y definidor. Podemos hacer cosas sin esto simplemente usando dos arrays, una para imágenes y otra para texto, pero ¿qué pasa si queremos modificar su vista para agregar un botón? Entonces nuevamente necesitará una tercera array. Por lo tanto, una clase que contiene la vista personalizada es una opción más flexible. Crea la clase En la misma carpeta que MainActivity.java crea una nueva clase llamada items . A continuación se muestra el código para el  archivo items.java .

public class items
{
    private int image_id;
    private String text;
 
    public int getImage_id()
    {
        return image_id;
    }
 
    public void setImage_id(int image_id)
    {
        this.image_id = image_id;
    }
 
    public String getText()
    {
        return text;
    }
 
    public void setText(String text)
    {
        this.text = text;
    }
 
    items(int img, String text)
    {
        image_id = img;
        this.text = text;
    }
}

Nota: Para una imagen, almacenamos la identificación de la imagen y no la imagen.

Paso 5: Implementando la clase CustomAdapter

Cree una nueva clase clasificada como CustomAdapter.java en la misma carpeta que items.java . El método principal del Adaptador es getView() . 

@NonNull
@Override
public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent)
{
    View v = convertView;
    if (v == null) {
       
        // getting reference to the main layout and
        // initializing
        LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        v = inflater.inflate(custom_layout_id, null);
    }
 
    // initializing the imageview and textview
      // and setting data
    ImageView imageView = v.findViewById(R.id.imageView);
    TextView textView = v.findViewById(R.id.textView);
 
    // get the item using the  position param
    items item = items_list.get(position);
 
    imageView.setImageResource(item.getImage_id());
    textView.setText(item.getText());
    return v;
}

Vista pública inflada (recurso int, raíz de ViewGroup)

Infle una nueva jerarquía de vista desde el recurso xml especificado. Lanza una excepción InflateException si hay un error.

resource int: ID para cargar un recurso de diseño XML (p. ej., R.layout.main_page)

root ViewGroup: Vista opcional para ser el padre de la jerarquía generada. Este valor puede ser nulo.

Este método primero analiza el archivo custom_view.xml usando el método inflate () . Este método es bastante costoso computacionalmente y debe usarse solo cuando sea necesario, por ejemplo. cuando el adaptador tiene que llenar nuevos elementos cuando el usuario llega al final de la pantalla. Después de obtener la referencia de la vista, inicializamos la vista de imagen y la vista de texto del archivo custom_view.xml, configuramos los datos y devolvemos la vista. A continuación se muestra el código completo del  archivo CustomAdapter.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.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import java.util.ArrayList;
import java.util.List;
 
public class CustomAdapter extends ArrayAdapter<items> {
 
    List<items> items_list = new ArrayList<>();
    int custom_layout_id;
 
    public CustomAdapter(@NonNull Context context, int resource, @NonNull List<items> objects) {
        super(context, resource, objects);
        items_list = objects;
        custom_layout_id = resource;
    }
 
    @Override
    public int getCount() {
        return items_list.size();
    }
 
    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
 
        View v = convertView;
        if (v == null) {
            // getting reference to the main layout and
            // initializing
            LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            v = inflater.inflate(custom_layout_id, null);
        }
 
        // initializing the imageview and textview and
        // setting data
        ImageView imageView = v.findViewById(R.id.imageView);
        TextView textView = v.findViewById(R.id.textView);
 
        // get the item using the  position param
        items item = items_list.get(position);
 
        imageView.setImageResource(item.getImage_id());
        textView.setText(item.getText());
        return v;
    }
}

Paso 6 : trabajar con el archivo MainActivity.java

Para las imágenes, aquí hemos utilizado íconos de Android Studio. Las imágenes están presentes en la carpeta res/drawable . debería verse así 

En el archivo MainActivity:

1. Inicialice la lista de elementos

List<items> itemsList = new ArrayList<>();
itemsList.add(new items(R.drawable.android_1, "image_1"));
itemsList.add(new items(R.drawable.android_2, "image_2"));
itemsList.add(new items(R.drawable.android_3, "image_3"));
itemsList.add(new items(R.drawable.android_4, "image_4"));
itemsList.add(new items(R.drawable.android_5, "image_5"));
itemsList.add(new items(R.drawable.android_1, "image_6"));
itemsList.add(new items(R.drawable.android_2, "image_7"));
itemsList.add(new items(R.drawable.android_3, "image_8"));
itemsList.add(new items(R.drawable.android_4, "image_9"));
itemsList.add(new items(R.drawable.android_5, "image_10"));

2. Obtenga la referencia de GridView y luego configure el adaptador personalizado

GridView gridView = findViewById(R.id.grid_view);
CustomAdapter customAdapter = new CustomAdapter(this, R.layout.custom_view, itemsList);
gridView.setAdapter(customAdapter);

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 android.widget.GridView;
import androidx.appcompat.app.AppCompatActivity;
import java.util.ArrayList;
import java.util.List;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        List<items> itemsList = new ArrayList<>();
        itemsList.add(new items(R.drawable.android_1, "image_1"));
        itemsList.add(new items(R.drawable.android_2, "image_2"));
        itemsList.add(new items(R.drawable.android_3, "image_3"));
        itemsList.add(new items(R.drawable.android_4, "image_4"));
        itemsList.add(new items(R.drawable.android_5, "image_5"));
        itemsList.add(new items(R.drawable.android_1, "image_6"));
        itemsList.add(new items(R.drawable.android_2, "image_7"));
        itemsList.add(new items(R.drawable.android_3, "image_8"));
        itemsList.add(new items(R.drawable.android_4, "image_9"));
        itemsList.add(new items(R.drawable.android_5, "image_10"));
 
        GridView gridView = findViewById(R.id.grid_view);
        CustomAdapter customAdapter = new CustomAdapter(this, R.layout.custom_view, itemsList);
        gridView.setAdapter(customAdapter);
    }
}

Estructura del Proyecto Final

Producción