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>

如何在2列GridView中显示带有文本的图像

1 个答案: