Question

I am using MonoTouch.Dialog in my app; however, the form in question is implemented using a UIViewController to which which I added a TableView (so I can also add a UIToolbar).

I love the ImageLoader that comes in MonoTouch.Dialog.Utilities and am trying to use it in the GetCell() method of the DataSource for the TableView to render an image from a URL.

                var callback = new ImageLoaderCallback(controller, cell.ImageView, indexPath);  // ImageLoaderCallback implements IImageUpdated
                cell.ImageView.Image = ImageLoader.DefaultRequestImage(new Uri(picFV.Value), callback);

The problem is that until the URL is downloaded, the space for the ImageView is collapsed (so that the text to the right of the image is actually anchored on the left of the table).

What I’d like to do is display a temporary local image which has the same dimensions as the downloaded image, so that when the ImageLoader is done retrieving and rendering the image, the user experience isn’t as jarring.

I tried to do the following in the GetCell() call… cell.ImageView.Image is set to some other image (not shown below), and then I get a reference to what comes back from ImageLoader.DefaultRequestImage.

                var image = ImageLoader.DefaultRequestImage(new Uri(picFV.Value), callback);
                callback.Image = image;

the last line stuffs the image reference returned by ImageLoader into the callback’s state, and the callback will replace the cell’s ImageView.Image when the ImageLoader is done (see below):

    // callback class for the MonoTouch.Dialog image loader utility
    private class ImageLoaderCallback : IImageUpdated
    {
        private ListViewController controller;
        private UIImageView imageView;
        private NSIndexPath indexPath;

        public ImageLoaderCallback(ListViewController c, UIImageView view, NSIndexPath path)
        {
            controller = c;
            imageView = view;
            indexPath = path;
        }

        public UIImage Image { get; set; }

        void IImageUpdated.UpdatedImage(Uri uri)
        {
            if (uri == null)
                return;
            if (Image != null)
                imageView.Image = Image;
            // refresh the display for the row of the image that just got updated
            controller.TableView.ReloadRows(new NSIndexPath [] { indexPath }, UITableViewRowAnimation.None);                
        }
    }

However, this doesn’t work because it appears that the ImageLoader needs to be “pulled” by the TableView when it tries to render its ImageView (i.e. the ImageLoader callback never gets invoked because no one is pulling on the URL).

How do I accomplish this scenario?

Thanks!

Answer 1

I know this is an old question now, but I came across it when searching for the same thing and have seen the following blog post which states how to accomplish this. I haven’t yet tried it out but hopefully it might help you or anyone else coming across this in the future: http://yusinto.blogspot.co.uk/2012/05/background-image-downloading-with.html