Thumbnail view of images

Question

I want to show some images as a thumbnail in View controller but i dont know how to do this. Can anyone please give me some ideas or sample code if possible.

Answer 1

Are you asking how to create thumbnails from larger images, or about how to build a view controller which displays them nicely?

Building a view controller:

You could use TTPhotoViewController from the Three20 project (description), which acts similarly to the iPhone's built in camera roll to view images.

You can look at the Scrolling sample code from apple, referred to in this question about using it for thumbnails.

If you want to build one yourself, you might consider using a GridView from the moriarty library, either as a large grid in a UIScrollView, or on a more efficient row-by-row basis in a UITableView. There's a previous question on optimized image loading in a UIScrollView.

Creating thumbnails from larger images:

The code-easiest way to scale down an image is to simply display it in a UIImageView with a frame set to the smaller size that you want - it's scaled for you.

If you want to save a thumbnail, or care about memory usage, you can create a hard-scaled version. The sample code below is taken from this blog post, and can be added to UIImage as a category method:

- (UIImage*) imageScaledToSize: (CGSize) newSize {
  UIGraphicsBeginImageContext(newSize);
  [self drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
  UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();

  return newImage;
}

Finally, here's a previous question on masking out round corners on an image, similar to the app icons used on the home screen.

Answer 2

There are multiple issues with thumbnails; perhaps you could clarify which ones you are most concerned about?

1. How to display a smaller version of an existing image

2. How to speed up paging by caching the thumbnails (instead of just dynamically shrinking the originals)

3. How to allow the user to page through the thumbnails

4. How to synchronize the thumbnails with the originals, in the event that your images are editable or the user can add to them