Xamarin.Android GridView

Artikel
07/13/2023

GridView ist einViewGroup , das Elemente in einem zweidimensionalen, scrollbaren Raster anzeigt. Die Rasterelemente werden mithilfe von ListAdapterautomatisch in das Layout eingefügt.

In diesem Tutorial erstellen Sie ein Raster mit Bildminiaturansichten. Wenn ein Element ausgewählt ist, zeigt eine Popupmeldung die Position des Bilds an.

Starten Sie ein neues Projekt mit dem Namen HelloGridView.

Suchen Sie einige Fotos, die Sie verwenden möchten, oder laden Sie diese Beispielbilder herunter. Fügen Sie die Bilddateien dem Verzeichnis Resources/Drawable des Projekts hinzu. Legen Sie im Fenster Eigenschaften die Buildaktion für jeden auf AndroidResource fest.

Öffnen Sie die Datei Resources/Layout/Main.axml , und fügen Sie Folgendes ein:

<?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"
/>

Dadurch GridView wird der gesamte Bildschirm ausgefüllt. Die Attribute sind eher selbsterklärend. Weitere Informationen zu gültigen Attributen finden Sie in der GridView Referenz.

Öffnen Sie HelloGridView.cs , und fügen Sie den folgenden Code für dieOnCreate()-Methode:

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

Nachdem das Layout Main.axml für die Inhaltsansicht festgelegt wurde, wird das GridView vom Layout mit FindViewByIderfasst. TheAdapter -Eigenschaft wird dann verwendet, um einen benutzerdefinierten Adapter (ImageAdapter) als Quelle für alle Elemente festzulegen, die im Raster angezeigt werden sollen. Wird ImageAdapter im nächsten Schritt erstellt.

Um etwas zu tun, wenn auf ein Element im Raster geklickt wird, wird das ItemClick Ereignis von einem anonymen Delegat abonniert. Es wird ein Toast angezeigt, das die Indexposition (nullbasiert) des ausgewählten Elements anzeigt (in einem realen Szenario könnte die Position verwendet werden, um das vollständige Bild für eine andere Aufgabe abzurufen). Beachten Sie, dass Listenerklassen im Java-Stil anstelle von .NET-Ereignissen verwendet werden können.

Erstellen Sie eine neue Klasse mit dem Namen ImageAdapter Unterklassen 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
    };
}

Zunächst werden einige erforderliche Methoden implementiert, die von BaseAdaptergeerbt werden. Der Konstruktor und die Count Eigenschaft sind selbsterklärend. NormalerweiseGetItem(int) sollte das tatsächliche Objekt an der angegebenen Position im Adapter zurückgeben, wird aber für dieses Beispiel ignoriert. EbensoGetItemId(int) sollte die Zeilen-ID des Elements zurückgeben, wird hier jedoch nicht benötigt.

Die erste erforderliche Methode ist GetView(). Diese Methode erstellt eine neueView für jedes Bild, das dem ImageAdapterhinzugefügt wird. Wenn dies aufgerufen wird, wird einView wird übergeben, wobei es sich normalerweise um ein wiederverwendetes Objekt handelt (zumindest nachdem es einmal aufgerufen wurde), sodass überprüft wird, ob das Objekt NULL ist. Wenn es NULL ist , einImageView wird instanziiert und mit den gewünschten Eigenschaften für die Bilddarstellung konfiguriert:

LayoutParams legt die Höhe und Breite für die Ansicht fest. Dadurch wird sichergestellt, dass unabhängig von der Größe des gezeichneten Bilds die Größe jedes Bilds entsprechend angepasst und zugeschnitten wird.
SetScaleType() deklariert, dass Bilder (falls erforderlich) in Richtung Mitte zugeschnitten werden sollen.
SetPadding(int, int, int, int) definiert die Auffüllung für alle Seiten. (Beachten Sie, dass, wenn die Bilder unterschiedliche Seitenverhältnisse aufweisen, eine geringere Auffüllung zu mehr Zuschneiden des Bilds führt, wenn es nicht mit den Dimensionen übereinstimmt, die der ImageView angegeben sind.)

Wenn die View übergebene an GetView()nicht NULL ist, dann die lokaleImageView wird mit dem wiederverwendeten View Objekt initialisiert.

Am Ende derGetView() -Methode: Die position an die -Methode übergebene ganze Zahl wird verwendet, um ein Bild aus dem thumbIds Array auszuwählen, das als Bildressource für festgelegt ImageViewist.

Sie müssen nur noch das thumbIds Array der ziehbaren Ressourcen definieren.

Führen Sie die Anwendung aus. Ihr Rasterlayout sollte etwa wie folgt aussehen:

Versuchen Sie, mit dem Verhalten von GridView und zu experimentieren.ImageView Elemente, indem sie ihre Eigenschaften anpassen. Versuchen Sie beispielsweise, anstelle von zu verwenden LayoutParams , die Verwendung von SetAdjustViewBounds().

Referenzen

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die vom Android Open Source-Projekt erstellt und freigegeben wurden und gemäß den in der Creative Commons 2.5 Attribution License beschriebenen Begriffen verwendet werden.

Freigeben über

Xamarin.Android GridView

Referenzen

Zusätzliche Ressourcen