Xamarin.Android GridView

Article
07/13/2023

GridView est unViewGroup qui affiche les éléments dans une grille à défilement à deux dimensions. Les éléments de grille sont automatiquement insérés dans la disposition à l’aide d’un ListAdapter.

Dans ce tutoriel, vous allez créer une grille de miniatures d’images. Lorsqu’un élément est sélectionné, un message toast affiche la position de l’image.

Démarrez un nouveau projet nommé HelloGridView.

Recherchez des photos que vous souhaitez utiliser, ou téléchargez ces exemples d’images. Ajoutez les fichiers image au répertoire Resources/Drawable du projet. Dans la fenêtre Propriétés , définissez l’action de génération pour chaque sur AndroidResource.

Ouvrez le fichier Resources/Layout/Main.axml et insérez les éléments suivants :

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:columnWidth="90dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>

Cela GridView remplira l’intégralité de l’écran. Les attributs sont plutôt explicites. Pour plus d’informations sur les attributs valides, consultez la GridView référence.

Ouvrez HelloGridView.cs et insérez le code suivant pour leMéthode OnCreate() :

protected override void OnCreate (Bundle bundle)
{
    base.OnCreate (bundle);

    SetContentView (Resource.Layout.Main);

    var gridview = FindViewById<GridView> (Resource.Id.gridview);
    gridview.Adapter = new ImageAdapter (this);

    gridview.ItemClick += delegate (object sender, AdapterView.ItemClickEventArgs args) {
        Toast.MakeText (this, args.Position.ToString (), ToastLength.Short).Show ();
    };
}

Une fois la disposition Main.axml définie pour l’affichage de contenu, est GridView capturé à partir de la disposition avec FindViewById. TheAdapter la propriété est ensuite utilisée pour définir un adaptateur personnalisé (ImageAdapter) comme source de tous les éléments à afficher dans la grille. le ImageAdapter est créé à l’étape suivante.

Pour effectuer une action lorsque l’utilisateur clique sur un élément de la grille, un délégué anonyme est abonné à l’événement ItemClick . Il montre un Toast qui affiche la position d’index (base zéro) de l’élément sélectionné (dans un scénario réel, la position peut être utilisée pour obtenir l’image de taille complète pour une autre tâche). Notez que les classes d’écouteur de style Java peuvent être utilisées à la place d’événements .NET.

Créez une classe appelée ImageAdapter qui sous-classes BaseAdapter:

public class ImageAdapter : BaseAdapter
{
    Context context;

    public ImageAdapter (Context c)
    {
        context = c;
    }

    public override int Count {
        get { return thumbIds.Length; }
    }

    public override Java.Lang.Object GetItem (int position)
    {
        return null;
    }

    public override long GetItemId (int position)
    {
        return 0;
    }

    // create a new ImageView for each item referenced by the Adapter
    public override View GetView (int position, View convertView, ViewGroup parent)
    {
        ImageView imageView;

        if (convertView == null) {  // if it's not recycled, initialize some attributes
            imageView = new ImageView (context);
            imageView.LayoutParameters = new GridView.LayoutParams (85, 85);
            imageView.SetScaleType (ImageView.ScaleType.CenterCrop);
            imageView.SetPadding (8, 8, 8, 8);
        } else {
            imageView = (ImageView)convertView;
        }

        imageView.SetImageResource (thumbIds[position]);
        return imageView;
    }

    // references to our images
    int[] thumbIds = {
        Resource.Drawable.sample_2, Resource.Drawable.sample_3,
        Resource.Drawable.sample_4, Resource.Drawable.sample_5,
        Resource.Drawable.sample_6, Resource.Drawable.sample_7,
        Resource.Drawable.sample_0, Resource.Drawable.sample_1,
        Resource.Drawable.sample_2, Resource.Drawable.sample_3,
        Resource.Drawable.sample_4, Resource.Drawable.sample_5,
        Resource.Drawable.sample_6, Resource.Drawable.sample_7,
        Resource.Drawable.sample_0, Resource.Drawable.sample_1,
        Resource.Drawable.sample_2, Resource.Drawable.sample_3,
        Resource.Drawable.sample_4, Resource.Drawable.sample_5,
        Resource.Drawable.sample_6, Resource.Drawable.sample_7
    };
}

Tout d’abord, cela implémente certaines méthodes requises héritées de BaseAdapter. Le constructeur et la Count propriété sont explicites. NormalementGetItem(int) doit retourner l’objet réel à la position spécifiée dans l’adaptateur, mais il est ignoré pour cet exemple. ÉgalementGetItemId(int) doit retourner l’ID de ligne de l’élément, mais il n’est pas nécessaire ici.

La première méthode nécessaire est GetView(). Cette méthode crée un nouveauViewpour chaque image ajoutée à .ImageAdapter Lorsque cela est appelé, unViewest passé, qui est normalement un objet recyclé (au moins après avoir été appelé une fois), il existe donc une case activée pour voir si l’objet est null. S’il est null, unImageView est instancié et configuré avec les propriétés souhaitées pour la présentation de l’image :

LayoutParams définit la hauteur et la largeur de l’affichage, ce qui garantit que, quelle que soit la taille du dessinable, chaque image est redimensionnée et rognée pour tenir dans ces dimensions, le cas échéant.
SetScaleType() déclare que les images doivent être rognées vers le centre (si nécessaire).
SetPadding(int, int, int, int) définit le remplissage pour tous les côtés. (Notez que, si les images ont des proportions différentes, moins de remplissage entraîne un rognage plus important de l’image si elle ne correspond pas aux dimensions données à l’ImageView.)

Si passé View à n’estGetView() pas null, le localImageView est initialisé avec l’objet recyclé View .

À la fin de laGetView() , l’entier position passé dans la méthode est utilisé pour sélectionner une image dans le thumbIds tableau, qui est défini comme ressource d’image pour le ImageView.

Il ne vous reste plus qu’à définir le thumbIds tableau des ressources pouvant être dessinées.

Exécutez l’application. Votre disposition de grille doit ressembler à ceci :

Essayez d’expérimenter les comportements de et GridViewImageView en ajustant leurs propriétés. Par exemple, au lieu d’utiliser LayoutParams , essayez d’utiliser SetAdjustViewBounds().

Références

Les parties de cette page sont des modifications basées sur le travail créé et partagé par le projet Open Source Android et utilisé selon les termes décrits dans la licence d’attribution Creative Commons 2.5.

Partager via

Xamarin.Android GridView

Références

Ressources supplémentaires