La création d'une interface utilisateur dynamique dans Android implique souvent l'affichage de collections de données dans des formats visuels attrayants. L'un de ces formats est le GridView, qui arrange les éléments dans une grille bidimensionnelle. Pour permettre un défilement horizontal de cette grille, une combinaison de HorizontalScrollView et d'une configuration appropriée du GridView est nécessaire. De plus, la personnalisation de l'apparence et du comportement de chaque cellule de la grille nécessite la création d'un adaptateur personnalisé.

Définition de la mise en page pour un élément de la grille Chaque élément affiché dans le GridView est défini par son propre fichier de mise en page XML. Ce fichier spécifie les vues qui composeront une cellule individuelle.

<!-- res/layout/grid_item_layout.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="120dp"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="8dp">

    <ImageView
        android:id="@+id/item_icon"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:scaleType="centerInside" />

    <TextView
        android:id="@+id/item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:textSize="12sp"
        android:text="Nom de l'application" />

</LinearLayout>

Mise en page principale intégrant le GridView horizontal La mise en page de l'activité principale contiendra un HorizontalScrollView enveloppant le GridView. Cela permet au contenu du GridView de dépasser la largeur de l'écran et d'être défilé horizontalement.

<!-- res/layout/activity_main.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <GridView
                android:id="@+id/main_grid_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:numColumns="auto_fit"
                android:verticalSpacing="10dp"
                android:horizontalSpacing="10dp"
                android:padding="10dp" />
        </LinearLayout>
    </HorizontalScrollView>

</LinearLayout>

Création d'un adaptateur personnalisé pour le GridView Un adaptateur personnalisé hérite de BaseAdapter et est responsable de la fourniture des vues pour chaque élément de données. Il gère l'inflation de la mise en page de l'élément de grille et le mappage des données aux vues.

// MainGridAdapter.java
package com.example.yourapp;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

public class MainGridAdapter extends BaseAdapter {

    private LayoutInflater inflater;
    private List<GridItemData> itemList;

    public MainGridAdapter(Context context, List<GridItemData> items) {
        inflater = LayoutInflater.from(context);
        this.itemList = items;
    }

    @Override
    public int getCount() {
        return itemList.size();
    }

    @Override
    public Object getItem(int position) {
        return itemList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            convertView = inflater.inflate(R.layout.grid_item_layout, parent, false);
            holder = new ViewHolder();
            holder.imageView = convertView.findViewById(R.id.item_icon);
            holder.textView = convertView.findViewById(R.id.item_text);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        GridItemData data = itemList.get(position);
        holder.imageView.setImageResource(data.getImageResourceId());
        holder.textView.setText(data.getItemName());

        return convertView;
    }

    private static class ViewHolder {
        ImageView imageView;
        TextView textView;
    }
}

Classe de données pour les éléments de la grille Une classe simple pour contenir les données de chaque élément de la grille.

// GridItemData.java
package com.example.yourapp;

public class GridItemData {
    private int imageResourceId;
    private String itemName;

    public GridItemData(int imageResourceId, String itemName) {
        this.imageResourceId = imageResourceId;
        this.itemName = itemName;
    }

    public int getImageResourceId() {
        return imageResourceId;
    }

    public String getItemName() {
        return itemName;
    }
}

Activité principale pour configurre et afficher le GridView L'activité principale initialise le GridView, charge les données et configure l'adaptateur. Des ajustements de mise en page sont appliqués pour permettre le défilement horizontal.

// MainActivity.java
package com.example.yourapp;

import android.app.Activity;
import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.GridView;
import android.widget.LinearLayout;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity {

    private GridView gridView;
    private List<GridItemData> dataList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        gridView = findViewById(R.id.main_grid_view);
        dataList = new ArrayList<>();

        // Charger les données d'exemple
        for (int i = 0; i < 20; i++) {
            dataList.add(new GridItemData(R.drawable.ic_launcher_background, "Élément " + (i + 1)));
        }

        // Configurer l'adaptateur et le GridView
        MainGridAdapter adapter = new MainGridAdapter(this, dataList);
        gridView.setAdapter(adapter);

        // Ajustements pour le défilement horizontal si nécessaire (souvent géré par le HorizontalScrollView)
        // La configuration de numColumns="auto_fit" et l'enveloppement dans HorizontalScrollView
        // sont généralement suffisants. Pour un contrôle plus fin de la largeur totale,
        // on pourrait ajuster dynamiquement les paramètres du GridView ici.
        // Par exemple, pour forcer une largeur spécifique basée sur le nombre d'éléments et la largeur des items.

        // Exemple d'ajustement dynamique des paramètres (si nécessaire) :
        // L'attribut numColumns="auto_fit" dans le XML gère déjà cela pour la plupart des cas.
        // Si une largeur totale explicite est requise, calculez-la et appliquez-la via LayoutParams.

         int numberOfColumns = 4; // Nombre de colonnes souhaité pour le calcul
         int itemWidth = (int) (getResources().getDimension(R.dimen.grid_item_width) / getResources().getDisplayMetrics().density); // Assurez-vous que R.dimen.grid_item_width est défini
         int spacing = (int) (getResources().getDimension(R.dimen.grid_spacing) / getResources().getDisplayMetrics().density); // Assurez-vous que R.dimen.grid_spacing est défini
         int totalWidth = dataList.size() * itemWidth + (dataList.size() - 1) * spacing; // Calcul approximatif

         ViewGroup.LayoutParams params = gridView.getLayoutParams();
         if (params instanceof LinearLayout.LayoutParams) {
              // Ajuster la largeur si le GridView est dans un LinearLayout horizontal
              // Note : L'utilisation de HorizontalScrollView simplifie ce processus.
         }

    }
}