This is the first part in a new series of tutorials for iOS 6. This tutorial takes a simple overview of the new UICollectionViewController and replicates the photo view in the built in iPhone camera app. If you are familiar with how to use a UITableView then this tutorial should be a breeze so lets get started.

YouTube responded to TubePress with an HTTP 410 - No longer available

First launch Xcode and create a new Single View Application. First go to your Storyboard and remove the UIViewController that is there by default. From the object library drag on a new UICollectionView.

Select the CollectionViewCell and resize it until it is 100×100. This will create a nicely spaced grid when you have several cells in the CollectionView.

To create a square cell hold the shift key when resizing and the cell will resize proportionately.

Add a new UICollectionViewController class to your project, in this tutorial my controller is named SSCollectionViewController, and implement the following two delegate methods.

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath; 

In the Identity inspector change the class of the UICollectionViewController to your new class.

You can read images from disk, however for this tutorial I am just going to add 10 images from various trips I have been on and corresponding icons. First of all we have to create a custom UICollectionViewCell so that we can display the image icons. So add another custom class that extends UICollectionViewCell, again mine is called SSCollectionViewCell. Set the cell on your CollectionView inside you Storyboard to be of this type and dont forget to set the cell Identifier to Cell in the Attributes inspector.

Create a UIImageView IBOutlet in your custom cell class and on your Storyboard Drag on a UIImageView from the object library and drop it onto your cell and hook it up to your cells outlet.

To complete the implementation of the two UICollectionViewDataSource use the following implementation.

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 20;
}
 
dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *identifier = @"Cell";
 
    SSCollectionViewCell *cvc = (SSCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
 
    int i = indexPath.row%10;
 
    cvc.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"imageicon%d@2x.jpg",i]];
    return cvc;
}

This implementation will show 20 images, since I only had 10 I repeat the images once all ten have been shown using the modulo function. If you run the app at this stage you will see the images displayed in a scrollable grid just like the Camera app photo viewer. To finish this up lets add a detail view so that you can see the images full screen and that will finish up this tutorial.

Now create a UIViewController class for this new detail view, and add a UIImageView outlet to the class as we did before for the CollectionViewCell. Also add a UIImage property so that you can set which image you wish to display before the detail view is displayed.

Go back to your Storyboard and select your CollectionViewController, go to the menu and select Editor->EmbedIn->UINavigationController. Now drag on a new UIViewController from the object library onto your Storyboard. Set the class of this controller in the Attribute Inspector, drag on a UIImageView from the object library and hook it up to the outlet. Finally, right click on your CollectionViewCell and drag out a segue to your new UIViewController and select push as the selection segue type. Select the segue and set the identifier name to something like “DetailImageSegue”. We are now finished with storyboard.

The last step in the process is to make sure the appropriate image is set on the detail view and displayed. To do this you have to implement prepareForSegue in the SSCollectionViewController, to set the image to be displayed.

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{
    if([segue.identifier isEqualToString:@"DetailImageSegue"]){
        SSCollectionViewCell *cell = (SSCollectionViewCell *)sender;
        NSIndexPath *indexPath = [self.collectionView indexPathForCell:cell];
 
        int i = indexPath.row%10;
 
        SSDetailImageViewController *divc = (SSDetailImageViewController *)[segue destinationViewController];
        divc.img =  [UIImage imageNamed:[NSString stringWithFormat:@"image%d@2x.jpg",i]];
    }
}

This handles the DetailImageSegue, setting the image to be displayed in the detail view. To ensure this image is displayed in your viewDidLoad in the detail view controller set the UIImageView to display this image.

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.imageView.image = img;
}

If you try and set the image view directly in the prepare for segue you will not see the image as the outlets are not hooked up at that point so the UIImageView will be nil.

That is this tutorial finished, you can download the source for this on github. I hope it helps you out in your next project.

If you enjoyed this tutorial any contribution to help keep them coming more regularly would be very much appreciated.