Three20 Tutorial for iOS: How To Use the Three20 Photo Viewer

A Three20 tutorial that shows you how to use the open source Three20 library’s photo viewer inside your apps. By Ray Wenderlich.

Leave a rating/review
Save for later
You are currently viewing page 3 of 3 of this article. Click here to view the first page.

Displaying the TTPhotoViewController

The last step is to replace PhotoViewerAppDelegate.m with the following:

#import "PhotoViewerAppDelegate.h"
#import "PhotoViewController.h"

@implementation PhotoViewerAppDelegate
@synthesize window;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {    
    [[TTURLRequestQueue mainQueue] setMaxContentLength:0];
    TTNavigator *navigator = [TTNavigator navigator];
    navigator.window = window;
    TTURLMap *map = navigator.URLMap;
    [map from:@"tt://appPhotos" toSharedViewController:[PhotoViewController class]];
    [navigator openURLAction:[TTURLAction actionWithURLPath:@"tt://appPhotos"]];
    [window makeKeyAndVisible];
    return YES;

- (void)dealloc {
    [window release];
    [super dealloc];


The real meat is in application:didFinishLaunchingWithOptions. The first thing we do here is set the maximum content length of the TTURLRequestQueue to 0, which means unlimited. If we forget to do this, Three20 will retrieve an error if we try to retrieve a file that is over a set limit. This is intended to warn you in case you didn't mean to download something that big, but we don't want those restrictions for the sake of this tutorial.

Next we start up a TTNavigator and a mapping from the tt://appPhotos URL to our PhotoViewController, and then navigate to that URL. If you're unfamiliar how this works, you may wish to review the Introduction to Three20 tutorial.

And that's it! Compile and run the sucker, and you should be able to navigate through your set of images with style! You'll notice that the app shows the small images that ship with the app at first, then downloads the high res images in the background for you. Pretty cool, eh?

Photo Viewer Screenshot 1
Photo Viewer Screenshot 2
Photo Viewer Screenshot 3
Photo Viewer Screenshot 4

Where To Go From Here?

Here is a sample project with all of the code we've developed in the above Three20 tutorial.

The TTPhotoViewer is just one of the many great pieces of functionality available in Three20. A great way to get an overview of what's available is to go through the TTCatalog project that comes with Three20.

Additionally, if you want to make a photo viewer but don't want to use Three20, you could always write your own. The UIScrollView class actually contains much of the functionality to make this possible - see WWDC talk #104 for some great info on this.

If you have any comments or questions just drop a line below - and let me know how you're using or planning to use Three20 in your apps!