Aqui, estamos projetando um aplicativo Android para demonstrar o uso do layout GridView . O layout GridView é um ViewGroup que agrupa visualizações em uma grade de rolagem bidimensional de linhas e colunas. Os itens na visualização em grade são inseridos usando um ListAdapter. O layout por padrão é rolável e não precisamos usar ScrollView . Um exemplo de GridView é sua Galeria padrão.

Atributos de um GridView 

Exemplo de GridView usando adaptadores diferentes no Android

Um adaptador é uma conexão entre os componentes da IU, por exemplo ( TextView , ImageView ,) e a fonte de dados. Um adaptador ajuda a preencher o elemento de UI com os dados apropriados. No Android, os adaptadores comumente usados ​​que preenchem os dados no GridView são:

1. ArrayAdapter
2. BaseAdapter
3. Custom ArrayAdapter

Este tutorial utilizará o BaseAdapter, segue a estrutura da classe que estende o 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;
    }
}

Descrição do método: 

• getCount(): este método retorna a contagem do total de elementos a serem exibidos.
• getItem (int i): este método obtém um índice e retorna um objeto.
• getItemId (int i): este método obtém um índice e retorna o id do item que está sendo exibido no GridView.
• getView (int I, visualização da visualização, grupo ViewGroup): este é o método mais importante que retorna uma visualização que é exibida na visualização em grade. O int i é o índice, a visualização pode ser (ImageView ou TextView) e o grupo de visualização é o contêiner que hospeda a Visualização, por exemplo , LinearLayout , RelativeLayout , etc.

Exemplo

Um exemplo de GIF é fornecido abaixo para se ter uma ideia sobre o que faremos neste artigo. Observe que vamos implementar este projeto usando a   linguagem Java . 

Implementação passo a passo

Etapa 1: Criar um novo projeto

Para criar um novo projeto no Android Studio, consulte Como criar / iniciar um novo projeto no Android Studio . Observe que selecione Java como a linguagem de programação.

Etapa 2: Trabalhar com o arquivo activity_main.xml

Abra o arquivo activity_main.xml e insira um componente GridView nele. O Layout parecerá em branco inicialmente, mas será inflado pela classe do adaptador personalizado durante o tempo de execução. 

Abaixo está o código para o  arquivo 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: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>

Etapa 3: Criação de um novo arquivo XML de layout 

Criação de um novo arquivo denominado grid_layout.xml na mesma pasta do arquivo activity_main.xml . Esta visualização personalizada hospedará um ImageView. O principal motivo para usar adaptadores personalizados é exibir visualizações complexas em GridView ou ListView em vez de algum texto simples. A visualização customizada é nomeada como grid_layout.xml com LinearLayout como sua raiz e uma ImageView simples.

Abaixo está o código para o  arquivo 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>

Etapa 4: Criando uma classe de adaptador personalizado 

Chamará essa classe de MyBaseAdapter, que estenderá a classe BaseAdapter e herdará os métodos mostrados acima. O principal método que precisamos percorrer é o 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;
}

O LayoutInflator é o responsável por analisar nosso arquivo grid_layout.xml personalizado. observe que esta operação é cara e só deve ser realizada quando necessário. daí seu lugar dentro de uma instrução if. Por fim, obtemos uma referência ao layout e a armazenamos na variável de visualização. então, usando isso, podemos inicializar a visualização da imagem e definir a imagem e retornar a visualização. Neste exemplo, a visão mostrada é bastante simples, mas podemos ter uma visão mais completa, como exibir o id de uma pessoa que pode ter uma visão personalizada da imagem, TextView, etc. Todo o código do MyBaseAdapter.java é fornecido abaixo .

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;
    }
}

Etapa 5 : Trabalhar com o arquivo MainActivity.java

Os dados a serem usados ​​são imagens de diferentes logotipos de estúdio Android salvos na pasta drawable . 

Para usar essas imagens, precisamos armazená-las em um array e passá-lo para o 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 as mesmas 5 imagens são repetidas. Agora configurando o adaptador básico personalizado no arquivo MainActivity.java .

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

Primeiro, obtemos uma referência do layout da grade do arquivo XML usando o método fineViewById() , então criamos o objeto de myBaseAdapter que leva dois argumentos Context e o array de itens. Finalmente, configuramos o adaptador. Abaixo está o código completo para o  arquivo MainActivity .java . Os comentários são adicionados dentro do código para entender o código em mais detalhes.

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);
    }
}

Saída