Xamarin.Android GridView

GridView è un ViewGroup che visualizza gli elementi in una griglia bidimensionale scorrevole. Gli elementi della griglia vengono inseriti automaticamente nel layout usando un oggetto ListAdapter.

In questa esercitazione si creerà una griglia di anteprime di immagini. Quando viene selezionato un elemento, verrà visualizzata la posizione dell'immagine in un messaggio di tipo avviso popup.

Avviare un nuovo progetto denominato HelloGridView.

Trova alcune foto che vuoi usare o scarica queste immagini di esempio. Aggiungere i file di immagine alla directory Resources/Drawable del progetto. Nella finestra Proprietà impostare l'azione di compilazione per ogni su AndroidResource.

Aprire il file Resources/Layout/Main.axml e inserire quanto segue:

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

In questo GridView modo verrà riempita l'intera schermata. Gli attributi sono piuttosto autoesplicativi. Per altre informazioni sugli attributi validi, vedere il GridView riferimento.

Aprire HelloGridView.cs e inserire il codice seguente per OnCreate() Metodo:

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

Dopo aver impostato il layout Main.axml per la visualizzazione contenuto, viene GridView acquisito dal layout con FindViewById. La Adapter viene quindi utilizzata per impostare un adattatore personalizzato (ImageAdapter) come origine per tutti gli elementi da visualizzare nella griglia. L'oggetto ImageAdapter viene creato nel passaggio successivo.

Per eseguire un'operazione quando si fa clic su un elemento nella griglia, viene sottoscritto un delegato anonimo all'evento ItemClick . Mostra un oggetto Toast che visualizza la posizione di indice (in base zero) dell'elemento selezionato (in uno scenario reale, la posizione può essere usata per ottenere l'immagine di dimensioni complete per un'altra attività). Si noti che le classi listener in stile Java possono essere usate invece di eventi .NET.

Creare una nuova classe denominata ImageAdapter sottoclassi 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
    };
}

In primo luogo, implementa alcuni metodi obbligatori ereditati da BaseAdapter. Il costruttore e la Count proprietà sono autoesplicativi. Normalmente GetItem(int) deve restituire l'oggetto effettivo nella posizione specificata nell'adattatore, ma viene ignorato per questo esempio. Allo stesso modo GetItemId(int) deve restituire l'ID riga dell'elemento, ma non è necessario.

Il primo metodo necessario è GetView(). Questo metodo crea un nuovo metodo View per ogni immagine aggiunta a ImageAdapter. Quando viene chiamato, un View viene passato, che in genere è un oggetto riciclato (almeno dopo che è stato chiamato una volta), quindi è disponibile un controllo per verificare se l'oggetto è Null. Se è null, un valoreImageView viene creata un'istanza e configurata con le proprietà desiderate per la presentazione dell'immagine:

• LayoutParams imposta l'altezza e la larghezza per la visualizzazione. Ciò garantisce che, indipendentemente dalle dimensioni dell'oggetto drawable, ogni immagine venga ridimensionata e ritagliata in base a queste dimensioni, in base alle esigenze.

• SetScaleType() dichiara che le immagini devono essere ritagliate verso il centro (se necessario).

• SetPadding(int, int, int, int) definisce la spaziatura interna per tutti i lati. Si noti che, se le immagini hanno proporzioni diverse, meno riempimento causerà un ritaglio più elevato dell'immagine se non corrisponde alle dimensioni specificate in ImageView.

Se l'oggetto View passato a GetView() non è Null, il localeImageView viene inizializzato con l'oggetto riciclato View .

Alla fine del GetView()metodo, l'intero position passato al metodo viene usato per selezionare un'immagine dalla thumbIds matrice, che viene impostata come risorsa immagine per .ImageView

Tutto ciò che rimane è definire la thumbIds matrice di risorse disegnabili.

Eseguire l'applicazione. Il layout della griglia dovrebbe essere simile al seguente:

Provare a sperimentare i comportamenti di GridView e ImageView elementi modificando le relative proprietà. Ad esempio, anziché usare LayoutParams prova a usare SetAdjustViewBounds().

Riferimenti

• GridView
• ImageView
• BaseAdapter

Le parti di questa pagina sono modifiche basate sul lavoro creato e condiviso dal progetto Open Source Android e usato in base ai termini descritti nella licenza Creative Commons 2.5 Attribuzione.