Xamarin.Android GridView

GridViewViewGroup öğeleri iki boyutlu, kaydırılabilir bir kılavuzda görüntüler. Kılavuz öğeleri, kullanılarak ListAdapterdüzene otomatik olarak eklenir.

Bu öğreticide, resim küçük resimlerinden oluşan bir kılavuz oluşturacaksınız. Bir öğe seçildiğinde, görüntünün konumunu gösteren bir bildirim iletisi görüntülenir.

HelloGridView adlı yeni bir proje başlatın.

Kullanmak istediğiniz bazı fotoğrafları bulun veya bu örnek görüntüleri indirin. Görüntü dosyalarını projenin Resources/Drawable dizinine ekleyin. Özellikler penceresinde, her birinin Derleme Eylemini AndroidResource olarak ayarlayın.

Resources/Layout/Main.axml dosyasını açın ve aşağıdakileri ekleyin:

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

Bu GridView işlem tüm ekranı doldurur. Öznitelikler oldukça açıklayıcıdır. Geçerli öznitelikler hakkında daha fazla bilgi için başvuruya GridView bakın.

öğesini açın HelloGridView.cs ve şu kodu ekleyin: OnCreate() Yöntem:

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

İçerik görünümü için Main.axml düzeni ayarlandıktan sonra, GridView ile FindViewByIddüzenden yakalanır. Adapter özelliği daha sonra kılavuzda görüntülenecek tüm öğelerin kaynağı olarak bir özel bağdaştırıcı (ImageAdapter) ayarlamak için kullanılır. ImageAdapter bir sonraki adımda oluşturulur.

Kılavuzdaki bir öğeye tıklandığında bir şey yapmak için, anonim bir temsilci olaya abone ItemClick olur. Seçili öğenin dizin konumunu (sıfır tabanlı) görüntüleyen bir Toast gösterir (gerçek bir dünya senaryosunda, konum başka bir görevin tam boyutlu görüntüsünü almak için kullanılabilir). .NET olayları yerine Java stili dinleyici sınıflarının kullanılabileceğini unutmayın.

adlı alt sınıflar BaseAdapteradlı ImageAdapter yeni bir sınıf oluşturun:

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

İlk olarak, bu öğesinden BaseAdapterdevralınan bazı gerekli yöntemleri uygular. Oluşturucu ve Count özelliği kendi kendine açıklayıcıdır. Normal GetItem(int) bağdaştırıcıda belirtilen konumdaki gerçek nesneyi döndürmelidir, ancak bu örnek için yoksayılır. Benzer şekil -de GetItemId(int) öğenin satır kimliğini döndürmelidir, ancak burada gerekli değildir.

Gerekli ilk yöntemdir GetView(). Bu yöntem yeni bir View öğesine eklenen her görüntü için ImageAdapter. Bu çağrıldığında, View geçirilir ve bu normalde geri dönüştürülen bir nesnedir (en azından bir kez çağrıldıktan sonra), bu nedenle nesnenin null olup olmadığını görmek için bir denetim yapılır. Null ise,ImageView örneği oluşturulur ve görüntü sunusu için istenen özelliklerle yapılandırılır:

• LayoutParams Görünümün yüksekliğini ve genişliğini ayarlar; bu, çizilebilir resmin boyutu ne olursa olsun, her görüntünün bu boyutlara uygun şekilde yeniden boyutlandırılmasını ve kırpılmasını sağlar.

• SetScaleType() görüntülerin ortaya doğru kırpılması gerektiğini bildirir (gerekirse).

• SetPadding(int, int, int, int) tüm taraflar için doldurmayı tanımlar. (Görüntülerin farklı en boy oranları varsa, ImageView'a verilen boyutlarla eşleşmemesi durumunda daha az doldurmanın görüntünün daha fazla kırpılma işlemine neden olacağını unutmayın.)

View geçirilen GetView()değeri null değilse, yerelImageView geri dönüştürülen View nesneyle başlatılır.

En sonunda GetView() yöntemine position geçirilen tamsayı, diziden thumbIds bir görüntü seçmek için kullanılır ve bu, için ImageViewgörüntü kaynağı olarak ayarlanır.

Geriye kalan tek şey, çizilebilir kaynak dizisini thumbIds tanımlamaktır.

Uygulamayı çalıştırın. Kılavuz düzeniniz şuna benzer olmalıdır:

ve'nin GridView davranışlarıyla denemeler yapmayı deneyin ImageView öğelerinin özelliklerini ayarlayarak. Örneğin, kullanmak LayoutParams yerine kullanmayı SetAdjustViewBounds()deneyin.

Başvurular

• GridView
• ImageView
• BaseAdapter

Bu sayfanın bazı bölümleri, Android Açık Kaynak Projesi tarafından oluşturulan ve paylaşılan çalışmaya dayalı değişikliklerdir ve Creative Commons 2.5 İlişkilendirme Lisansı'nda açıklanan koşullara göre kullanılır.