This post will demonstrate a modified version of the previous ListView post that will download the images from a web URL for each item rather than using local images from the application's Asset folder.
Be sure to enable "Internet" under the project application options. If you run a test on the emulator without checking this option it will work, but it will fail when deployed to an actual device.
URLImageViewHelper will facilitate using asynchronous downloads of the images so that the UI is not blocked waiting for an image to be downloaded. When the image becomes available, it will be added to the existing row. URLImageViewHelper will also cache the images so they don't need to be downloaded again if they are re-used.
The helper method in the data adapter will be changed in this example to return a web URL for the images rather than a path to the local assets.
We'll modify the GetView method in the data adapter class PeopleAdapter from the previous post example to use the extension method from URLImageViewHelper to load the ImageView asynchronously using the SetUrlDrawable method. For each row, the Resource.Drawable.photo placeholder will be displayed until the people.ImgURL is available from the web. The UI won't be blocked waiting for each download to complete.
The placeholder image is in the Resources | drawable folder.
The placeholder image will appear briefly until the actual images are available.
The real images will "pop in" once they are downloaded in a background process.
URLImageViewHelper adds extension methods to the ImageView class. There are several variations that can be used to handle image processing.
In general, an extension method can be added to existing methods by creating a static class and method and then using the this keyword before the type that is being extended. Additional parameters can be added at the end. To use the extension methods, make sure to include them with the appropriate using statement, in this case using UrlImageViewHelper; The extended methods will then appear in the intellisense options for the extended type (in this case, ImageView). For more information on creating an extension method see http://www.dotnetperls.com/extension.
method for the asynchronous download as well.