Xamarin.Android GridView

Článek
03/08/2024

GridView je ViewGroup zobrazí položky v dvojrozměrné posouvatelné mřížce. Položky mřížky se automaticky vloží do rozložení pomocí objektu ListAdapter.

V tomto kurzu vytvoříte mřížku miniatur obrázků. Když je položka vybrána, zobrazí se zpráva informační zprávy o umístění obrázku.

Spusťte nový projekt s názvem HelloGridView.

Najděte některé fotky, které chcete použít, nebo si tyto ukázkové obrázky stáhněte. Přidejte soubory obrázků do adresáře Resources/Drawable projektu. V okně Vlastnosti nastavte akci sestavení pro každý z nich na AndroidResource.

Otevřete soubor Resources/Layout/Main.axml a vložte následující:

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

Tím GridView se vyplní celá obrazovka. Atributy jsou spíše vysvětlující. Další informace o platných atributech najdete v GridView referenčních informacích.

Otevřete HelloGridView.cs a vložte následující kód pro OnCreate() Metoda:

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

Po nastavení rozložení Main.axml pro zobrazení GridView obsahu je zachycena z rozložení pomocí FindViewById. Adapter vlastnost se pak použije k nastavení vlastního adaptéru (ImageAdapter) jako zdroje pro všechny položky, které se mají zobrazit v mřížce. Vytvoří se ImageAdapter v dalším kroku.

Pokud chcete něco udělat, když kliknete na položku v mřížce, anonymní delegát se přihlásí k odběru ItemClick události. Zobrazuje Toast pozici indexu (založenou na nule) vybrané položky (ve scénáři reálného světa se dá použít k získání obrázku v plné velikosti pro některý jiný úkol). Všimněte si, že třídy naslouchacího procesu ve stylu Jazyka Java lze použít místo událostí .NET.

Vytvořte novou třídu s názvem ImageAdapter podtřídy 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
    };
}

Nejprve se implementují některé požadované metody zděděné z BaseAdapter. Konstruktor a Count vlastnost jsou vysvětlované. Normálně GetItem(int) by měl vrátit skutečný objekt na zadané pozici adaptéru, ale v tomto příkladu se ignoruje. Podobně GetItemId(int) by měla vrátit ID řádku položky, ale tady není potřeba.

První nezbytná metoda je GetView(). Tato metoda vytvoří novou. Viewpro každý obrázek přidaný do .ImageAdapter Při zavolání se View je předán, což je obvykle recyklovaný objekt (alespoň po jeho zavolání jednou), takže existuje kontrola, jestli je objekt null. Pokud má hodnotu null,ImageView vytvoří instanci a nakonfiguruje se s požadovanými vlastnostmi pro prezentaci obrázku:

LayoutParams nastaví výšku a šířku zobrazení – tím zajistíte, aby se velikost nakresleného obrázku podle potřeby změnila a ořízla tak, aby odpovídala těmto rozměrům.
SetScaleType() deklaruje, že obrázky by se měly oříznout směrem ke středu (v případě potřeby).
SetPadding(int, int, int, int) definuje odsazení pro všechny strany. (Mějte na paměti, že pokud mají obrázky různé poměry stran, pak menší odsazení způsobí větší oříznutí obrázku, pokud neodpovídá rozměrům zadaným imageView.)

Pokud předaný ViewGetView() není null, pak místníImageView inicializuje se recyklovaným View objektem.

Na konci GetView() metoda, position celé číslo předané do metody se používá k výběru obrázku z thumbIds pole, který je nastaven jako prostředek obrázku ImageViewpro objekt .

Zbývá jen definovat thumbIds pole nakreslených zdrojů.

Aplikaci spusťte. Rozložení mřížky by mělo vypadat přibližně takto:

Zkuste experimentovat s chováním GridViewImageView prvky úpravou jejich vlastností. Například místo použití LayoutParams příkazu try using SetAdjustViewBounds().

Reference

Části této stránky jsou upraveny na základě práce vytvořené a sdílené opensourcový projekt Androidu a používají se podle podmínek popsaných v licenci Creative Commons 2.5 Atribution License.

Xamarin.Android GridView

Reference

Další materiály