Xamarin Android：GridView中本地图片替换为URL图片数组

Hey there! Let's work through this GridView image loading problem together—you’ve already got the database IDs sorted, so we just need to connect those IDs to full image URLs and then safely load those web images into your GridView without blocking the UI. Here’s a step-by-step breakdown:

1. First: Fetch Image URLs from Your Database #

Since you already have the database IDs, the first move is to query your database to get the corresponding image URLs (assuming your table stores the full URL or a filename you can append to a base URL). Let’s write a simple method to pull those URLs into a List<string>:

// Replace this with your actual database logic
private List<string> GetImageUrlsFromDatabase(List<int> existingImageIds)
{
    var imageUrls = new List<string>();
    
    // Example using SQL Server (adjust for your database type: SQLite, etc.)
    using (var connection = new SqlConnection("Your_Database_Connection_String"))
    {
        connection.Open();
        // Parameterize your query to avoid SQL injection!
        var query = "SELECT ImageUrl FROM YourImagesTable WHERE Id IN (@ImageIds)";
        
        using (var command = new SqlCommand(query, connection))
        {
            // Handle list of IDs (adjust syntax based on your database)
            command.Parameters.AddWithValue("@ImageIds", string.Join(",", existingImageIds));
            
            using (var reader = command.ExecuteReader())
            {
                while (reader.Read())
                {
                    string url = reader.GetString(reader.GetOrdinal("ImageUrl"));
                    imageUrls.Add(url);
                }
            }
        }
    }
    
    // If your DB stores filenames instead of full URLs, append a base URL here:
    // imageUrls = imageUrls.Select(filename => $"https://your-domain.com/images/{filename}").ToList();
    
    return imageUrls;
}

2. Create a Custom GridView Adapter for Web Images #

Your original adapter used local drawables, but web images need asynchronous loading (loading on the main thread will cause ANRs!). The easiest and most reliable way to handle this is with Glide—a popular image-loading library that handles caching, threading, and error handling out of the box.

First, install the Xamarin.Glide NuGet package into your project. Then build your custom adapter:

public class WebImageGridAdapter : BaseAdapter<string>
{
    private readonly Context _context;
    private readonly List<string> _imageUrls;

    public WebImageGridAdapter(Context context, List<string> imageUrls)
    {
        _context = context;
        _imageUrls = imageUrls;
    }

    public override string this[int position] => _imageUrls[position];
    public override int Count => _imageUrls.Count;
    public override long GetItemId(int position) => position;

    public override View GetView(int position, View convertView, ViewGroup parent)
    {
        ImageView imageView;

        // Reuse views to boost performance (critical for smooth GridView scrolling)
        if (convertView == null)
        {
            imageView = new ImageView(_context);
            // Set layout dimensions and scaling (adjust to your needs)
            imageView.LayoutParameters = new GridView.LayoutParams(250, 250);
            imageView.SetScaleType(ImageView.ScaleType.CenterCrop);
        }
        else
        {
            imageView = (ImageView)convertView;
        }

        // Use Glide to load the web image asynchronously
        Glide.With(_context)
             .Load(_imageUrls[position])
             .Placeholder(Resource.Drawable.loading_placeholder) // Show while loading
             .Error(Resource.Drawable.error_placeholder) // Show if load fails
             .Into(imageView);

        return imageView;
    }
}

3. Hook Up the Adapter to Your GridView #

Now just fetch the URLs and set the adapter in your Activity/Fragment:

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    SetContentView(Resource.Layout.your_activity_layout);

    // Get your existing list of database IDs (you already have this!)
    var imageIds = new List<int> { 1, 2, 3, 4 }; // Replace with your actual IDs

    // Fetch the corresponding image URLs
    var imageUrls = GetImageUrlsFromDatabase(imageIds);

    // Attach the adapter to your GridView
    var gridView = FindViewById<GridView>(Resource.Id.your_gridview_id);
    gridView.Adapter = new WebImageGridAdapter(this, imageUrls);
}

4. Don’t Forget the Internet Permission #

Add this line to your AndroidManifest.xml to allow your app to access the web:

<uses-permission android:name="android.permission.INTERNET" />

Alternative: No Third-Party Library? #

If you don’t want to use Glide, you can load images manually with async/await—but be warned: you’ll lose out on caching and built-in performance optimizations. Here’s a quick example of manual loading:

private async Task<Bitmap> LoadBitmapFromUrl(string url)
{
    try
    {
        using (var client = new HttpClient())
        {
            var imageBytes = await client.GetByteArrayAsync(url);
            return BitmapFactory.DecodeByteArray(imageBytes, 0, imageBytes.Length);
        }
    }
    catch
    {
        // Return a fallback error image if loading fails
        return BitmapFactory.DecodeResource(Resources, Resource.Drawable.error_placeholder);
    }
}

Then update the GetView method to use this (remember to update the UI on the main thread):

public override async View GetView(int position, View convertView, ViewGroup parent)
{
    // ... View reuse logic ...

    var bitmap = await LoadBitmapFromUrl(_imageUrls[position]);
    ((Activity)_context).RunOnUiThread(() => imageView.SetImageBitmap(bitmap));

    return imageView;
}

内容的提问来源于stack exchange，提问作者Jayson E Garcia