Xamarin.Android GridView

GridView adalah ViewGroup yang menampilkan item dalam kisi dua dimensi yang dapat digulir. Item kisi secara otomatis dimasukkan ke tata letak menggunakan ListAdapter.

Dalam tutorial ini, Anda akan membuat kisi gambar mini gambar. Saat item dipilih, pesan toast akan menampilkan posisi gambar.

Mulai proyek baru bernama HelloGridView.

Temukan beberapa foto yang ingin Anda gunakan, atau unduh gambar sampel ini. Tambahkan file gambar ke direktori Sumber Daya/Gambar proyek. Di jendela Properti , atur Tindakan Build untuk masing-masing ke AndroidResource.

Buka file Resources/Layout/Main.axml dan sisipkan yang berikut ini:

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

Ini GridView akan mengisi seluruh layar. Atributnya agak jelas. Untuk informasi selengkapnya tentang atribut yang valid, lihat GridView referensi.

Buka HelloGridView.cs dan sisipkan kode berikut untuk OnCreate() Metode:

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

Setelah tata letak Main.axml diatur untuk tampilan konten, GridView diambil dari tata letak dengan FindViewById. Tje Adapter properti kemudian digunakan untuk mengatur adaptor kustom (ImageAdapter) sebagai sumber untuk semua item yang akan ditampilkan di kisi. ImageAdapter dibuat di langkah berikutnya.

Untuk melakukan sesuatu saat item di kisi diklik, delegasi anonim berlangganan peristiwa tersebut ItemClick . Ini menunjukkan Toast yang menampilkan posisi indeks (berbasis nol) dari item yang dipilih (dalam skenario dunia nyata, posisi dapat digunakan untuk mendapatkan gambar berukuran penuh untuk beberapa tugas lain). Perhatikan bahwa kelas pendengar gaya Java dapat digunakan alih-alih peristiwa .NET.

Buat kelas baru yang disebut ImageAdapter subkelas BaseAdaptertersebut :

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

Pertama, ini menerapkan beberapa metode yang diperlukan yang diwarisi dari BaseAdapter. Konstruktor dan Count propertinya menjelaskan sendiri. Biasanya GetItem(int) harus mengembalikan objek aktual pada posisi yang ditentukan dalam adaptor, tetapi diabaikan untuk contoh ini. Juga GetItemId(int) harus mengembalikan id baris item, tetapi tidak diperlukan di sini.

Metode pertama yang diperlukan adalah GetView(). Metode ini membuat yang baru View untuk setiap gambar yang ditambahkan ke ImageAdapter. Ketika ini dipanggil, View diteruskan, yang biasanya merupakan objek daur ulang (setidaknya setelah ini dipanggil sekali), jadi ada pemeriksaan untuk melihat apakah objek null. Jika null,ImageView dibuat dan dikonfigurasi dengan properti yang diinginkan untuk presentasi gambar:

• LayoutParams mengatur tinggi dan lebar untuk Tampilan—ini memastikan bahwa, tidak peduli ukuran gambar yang dapat digambar, setiap gambar diubah ukurannya dan dipangkas agar pas dalam dimensi ini, sebagaimana mewajibkan.

• SetScaleType() menyatakan bahwa gambar harus dipangkas ke tengah (jika perlu).

• SetPadding(int, int, int, int) menentukan padding untuk semua sisi. (Perhatikan bahwa, jika gambar memiliki rasio aspek yang berbeda, maka lebih sedikit padding akan menyebabkan lebih banyak pemangkasan gambar jika tidak cocok dengan dimensi yang diberikan ke ImageView.)

Jika yang diteruskan View ke GetView()tidak null, maka lokal ImageView diinisialisasi dengan objek daur ulang View .

Di akhir GetView() metode, bilangan position bulat yang diteruskan ke metode digunakan untuk memilih gambar dari thumbIds array, yang ditetapkan sebagai sumber daya gambar untuk ImageView.

Yang tersisa hanyalah menentukan thumbIds array sumber daya yang dapat digambar.

Jalankan aplikasi lagi. Tata letak kisi Anda akan terlihat seperti ini:

Coba bereksperimen GridView dengan perilaku dan ImageView dengan menyesuaikan propertinya. Misalnya, alih-alih menggunakan LayoutParams coba gunakan SetAdjustViewBounds().

Referensi

• GridView
• ImageView
• BaseAdapter

Bagian halaman ini adalah modifikasi berdasarkan pekerjaan yang dibuat dan dibagikan oleh Proyek Sumber Terbuka Android dan digunakan sesuai dengan istilah yang dijelaskan dalam Lisensi Atribusi Creative Commons 2.5.