2列にテキストを含む画像を表示する方法

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

- コード：あなたは、単にあなたの項目のを設計することができますので、あなたは、あなたのアダプタのGetView方法であなたのGridViewのセルを膨らませることができ

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

xmlのテンプレート。例えば

：あなたのGridViewの背後

コード：

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

そしてMyGridViewAdapterこのようなものです：

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はこのように、この画像の画像リソースと名前のためにあります：

最後に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>