如何在2列中顯示帶有文本的圖像GridView

Question

如何使用文本（如名稱，價格等）顯示圖像

下面的代碼僅顯示沒有文本的圖像。

--- UI：

<?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="230dp" 
    android:numColumns="2" 
    android:verticalSpacing="10dp" 
    android:horizontalSpacing="10dp" 
    android:background="#ffffff" 
    android:stretchMode="columnWidth" 
    android:gravity="center" /> 

- 代碼：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 

using Android.App; 
using Android.Content; 
using Android.OS; 
using Android.Runtime; 
using Android.Views; 
using Android.Widget; 

namespace ModSpforce 
{ 
    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(200, 200); 
       imageView.SetScaleType(ImageView.ScaleType.CenterCrop); 
       imageView.SetPadding(3, 3, 3, 3); 
      } 
      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 
     }; 

    } 
} 

Answer 1

您可以虛增您GridView的細胞在適配器的GetView方法，所以你可以簡單地設計自己的項目的xml中的模板。

例如：

您GridView的背後代碼：

public ObservableCollection<MyItemModel> items = new ObservableCollection<MyItemModel>(); 
public MyGridViewAdapter adapter; 

protected override void OnCreate(Bundle bundle) 
{ 
    base.OnCreate(bundle); 
    SetContentView(Resource.Layout.Main); 

    //add your items here. 
    for (int i = 0; i < 50; i++) 
    { 
     items.Add(new MyItemModel { ImageSource = Resource.Drawable.Pika, Name = "Name " + i }); 
    } 
    adapter = new MyGridViewAdapter(this, items); 

    GridView gv = FindViewById<GridView>(Resource.Id.gridview); 
    gv.Adapter = adapter; 
} 

MyItemModel是該圖像的圖像資源和名稱，如：

public class MyItemModel 
{ 
    public string Name { get; set; } 
    public int ImageSource { get; set; } 
} 

而且MyGridViewAdapter是這個樣子：

public class MyGridViewAdapter : BaseAdapter<MyItemModel> 
{ 
    private ObservableCollection<MyItemModel> items; 
    private Activity context; 

    public MyGridViewAdapter(Activity context, ObservableCollection<MyItemModel> items) 
    { 
     this.items = items; 
     this.context = context; 
    } 

    public override MyItemModel this[int position] 
    { 
     get 
     { 
      return items[position]; 
     } 
    } 

    public override int Count 
    { 
     get 
     { 
      return items.Count; 
     } 
    } 

    public override long GetItemId(int position) 
    { 
     return position; 
    } 

    public override View GetView(int position, View convertView, ViewGroup parent) 
    { 
     View view = convertView; 
     if (view == null) 
     { 
      view = context.LayoutInflater.Inflate(Resource.Layout.MyGridViewCell, null); 
     } 
     var image = view.FindViewById<ImageView>(Resource.Id.image); 
     image.SetImageResource(items[position].ImageSource); 

     var name = view.FindViewById<TextView>(Resource.Id.name); 
     name.Text = items[position].Name; 

     return view; 
    } 
} 

最後的MyGridViewCell佈局是這樣的：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 
    <ImageView android:id="@+id/image" 
      android:layout_height="200dp" 
      android:layout_width="200dp" /> 
    <TextView android:id="@+id/name" 
      android:layout_height="wrap_content" 
      android:layout_width="200dp" 
      android:textColor="@android:color/holo_blue_light" /> 
</LinearLayout>