Photo Browser as iOS Camera Roll

Some weeks ago, I was working on an App where I wanted to develop some kind of photo browser as Camera Roll. Therefore, I wanted something that let you

  • pick images from Camera Roll or a generic folder,
  • display them as the iPhone or iPad does,
  • in landscape and portrait mode,
  • with common tap and pinch gestures,
  • without consuming a lot of memory.

After a while, I found out PhotoScroller sample code provided by Apple. In this project, there is a nice iOS 6 API where a UIPageViewController takes care of the initialization and deletion of ImageViewControllers (basically, these are ViewControllers that display an image). Since I had no particular constraints about the iOS version, I thought it was great for my needs.

Unfortunately, I was not completely right. If you take a look at the PhotoScroller code, you see that images are tiled! In particular there are more than 600 photos for displaying just 3 ones. Displaying tiled images is great for performance and memory issues; but in my App I couldn’t get pre-tiled images and tiling on the fly is really expensive (from both computational and memory points of view). So I started writing code in order to fix this problem.

What you can download below the post is what I finally come up with. In particular I have decided to follow two strategies:

  • downscaling of images having sizes greater than 2592 x 1936 pixels,
  • views backed by CATiledLayer instead of CALayer for asynchronous drawing.

The reason why I chose 2592 x 1936 depends on the fact I debugged using an iPhone 4 and iPad mini. In any case, you can change this parameters by simply set a bunch of constants. Within the project there are two important classes: ImageVC and TilingImage. The first one is a ViewController that shows a placeholder while it is waiting for the second one asynchronously load the image. The idea is pretty close to PhotoScroller, but you don’t need tiles.

I manages images through a database where I asynchronously store and delete them using CoreData API: take a look at RootVC.m, SourceImage+Creation.m and PhotoBrowser.xcdatamodeld in order to understand how it works. Moreover I show a grid of thumbnails where you can pick an image using a UICollectionView.

There are a lot of comments inside the project: I hope this helps you to understand how the App works. If you need more information I recommend you watching WWDC 2012 Session 223 – Enhancing User Experience with Scroll Views.

Download Photo Browser

Any other question? Please, leave a comment below. 🙂

Leave a Reply

Required fields are marked *.