Photo applications are very popular with iPhone users. One of the core features of popular photo applications is the Photo Gallery. In this tutorial you will learn to use the Three20 iPhone development Library that is used in the Facebook iPhone application to create a photo gallery to use in your next iPhone application.
Three20 is an iPhone development library. It’s the code that powers the Facebook iPhone app. We will use a small piece of Three20 (TTThumbsViewController) to create a photo gallery similar to the one provided by Apple’s Photos app.
1. Create a new Xcode project and Add the Three20 Library
Open Xcode and create a new iPhone project, selecting “Window Based Application” as the default application type. Name the application “Three20PhotoDemo” or insert a more creative title of your choosing.
Clone the Three20 git repository with the following terminal command:
Drag the Three20.xcodeproj file (located in “three20/src/Three20″) and drop it onto the root of your Xcode project’s “Groups and Files” sidebar. Make sure that you are grabbing the correct Three20.xcodeproj! The one in “three20/src” is the legacy project which is being phased out. When the dialog appears make sure “Copy items” is unchecked and “Reference Type” is “Relative to Project” before clicking “Add”.
Now you need to link the Three20 static library to your project. Click the “Three20.xcodeproj” item that has just been added to the sidebar. Under the “Details” table, you will see a single item: libThree20.a. Check the checkbox on the far right of libThree20.a.
Now you need to add Three20 as a dependency of your project, so Xcode compiles it whenever you compile your project. Expand the “Targets” section of the sidebar and double-click your application’s target. Under the “General” tab you will see a “Direct Dependencies” section. Click the “+” button, select “Three20″, and click “Add Target”.
Now you need to add the bundle of images and strings to your app. Locate “Three20.bundle” under “Three20/src” and drag and drop it into your project. When the dialog appears make sure “Create Folder References” is selected, “Copy items” is unchecked, and “Reference Type” is “Relative to Project” before clicking “Add”.
Now you need to add the Core Animation (QuartzCore) framework to the project. Right click on the “Frameworks” group in your project (or equivalent) and select Add > Existing Frameworks. Then select QuartzCore.framework and add it to the project.
Open your “Project Settings” and go to the “Build” tab. Be sure to select the the All Configurations option. Look for “Header Search Paths” and double-click it. Add the relative path from your project’s directory to the “three20/Build/Products/three20″ directory. For example, if your project and the Three20 source are in the same parent, you would enter “../three20/Build/Products/three20″.
Also in your “Project Settings”, go to “Other Linker Flags” under the “Linker” section, and add “-ObjC” and “-all_load” to the list of flags.
2. Create Your Interface
Since Three20 does not use Interface Builder, we need to make some final adjustments to the project.
First delete MainWindow.xib
Then open your main.m file and change the last statement to include the name of your Application Delegate.
NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
int retVal = UIApplicationMain(argc, argv, nil, @"Three20PhotoDemoAppDelegate");
Lastly, open your Application’s plist file and delete the MainWindow Nib file entry.
3. Map URLs to Three20
Three20 uses URLs to navigate from controller to controller. It is modeled after Ruby on Rails routing. We won’t go too deep into everything about URL navigation in Three20. You can read more about it at the URL Navigation section of the Three20 website.
In your Application Delegate implementation file, you will want to import your new Photo Album class.
Create an NSArray for your Photos in your Album Controller implementation file by importing PhotoSource.h and Photo.h. In Three20, the URL for local items inside of your App Bundle is the bundle:// protocol. Later we will change to the http protocol for web-based photos.
For each photo, you simply create a Photo object and provide the photo’s width, height, location and thumbnail location. You also have the option of providing a caption for each photo if you wish.
[self createPhotos]; // method to set up the photos array
self.photoSource = [[PhotoSource alloc]
6. Displaying a Single Photo
Displaying a single photo by clicking on one from the Thumbnail viewer is provided to you for free by Three20. In addition, the library also provides all of the native functions such as pinch-to-zoom, swiping to navigate and tapping to hide/show the navigation arrows and back button.
7. Using Remote Web Photos from Flickr
In order to switch from using photos stored in our app’s bundle, we simply need to change all the URLs for our photos in the array. Our new createPhotos method now looks like this:
As you can see, we now have a full featured gallery that we can use in an app to show pictures from either the web or from our app’s bundle. Three20 gives us a simple way to add a photo gallery feature to your app without having to do any of the difficult work.