1) Create Master-Detail Application & Replace the MasterViewController
First we want to create a Master-Detail Application just because it sets up a Master-Detail relationship even though thats the first thing we are going to break :). So go ahead and create a new project in XCode4 based on a Master-Detail Application type. Use ARC, Storyboards and CoreData because we will use CoreData to store information. Your storyboard should look like this:
Master-Detail Storyboard
Now select the Master scene until its highlighted in blue and delete it with the Delete key. We simply replace it by dragging in a UICollectionViewController onto the storyboard in its place. This places a UICollectionViewController scene with a small empty collectionview cell in the top left corner. I made a few adjustments to mine and here is what it looks like but Ill go over those later:
UICollectionViewController Storyboard
The changes I made to it are the following:
a – Select the entire scene (again until its highlighted blue) and change its Class type from UICollectionViewController to MasterViewController.
b – Enlarged the UICollectionViewCell from 50×50 to 145×145 in the Dimension’s Inspector
Here are some clips of the Identity Inspector of the MasterViewController and Dimension’s Inspector of the UICollectionViewCell:
We did set the new UICollectionViewController to a new class, the MasterViewController class. We must do the same with the UICollectionViewCell but we must create its class first.
2) Modify the MasterViewController class with the following in the .m file:
The MyCustomCell Class is the one we will create in the next section. For now we are simply filling in the cell’s image data with some fetched managed object which we will also create later. A couple of more interesting tidbits for example; we gave our UICollectionViewCell a reuse identifier and we gave our segue an identifier as well. We must make sure these identifiers also exist in the storyboard inspectors for the cell and segue respectively.
3) Create UICollectionViewCell Class & Connect it
Let’s go ahead and Create a New File in our project, base it off of Objective C Class. Type in UICollectionViewCell as the subclass and name it MyCustomCell. We are simply going to define a class for our UICollectionViewCell and once we are finished, we must go to Storyboard and set our cell to use this new class type.
Add a UIImageView property to the class so that your .h file looks like this:
#import <UIKit/UIKit.h>
@interface MyCustomCell : UICollectionViewCell{
IBOutlet UIImageView *imageView;
}
-(void)setImage:(UIImage *)image;
@end
and now implement the setter in your .m so that it looks like this:
#import “MyCustomCell.h”
@implementation MyCustomCell
-(void)setImage:(UIImage *)image{
[imageView setImage:image];
}
@end
4) Create the data model. First let’s do the easiest part, which is creating the data model. Select your project’s xcdatamodel file and create a new Entity, call it Snapshots if you’d like. Now add 3 attributes to it and make them of this type:
Core Data Entity Data Model
Once that is done, we have a storage container for our data. Let’s look at the code used by our app to access this store and manipulate it.
if (![self.fetchedResultsController performFetch:&error]) {
// Replace this implementation with code to handle the error appropriately.
// abort() causes the application to generate a crash log and terminate. You should not use this function in a shipping application, although it may be useful during development.
I know its long, but its pretty simple. The first method, – (NSFetchedResultsController *)fetchedResultsController, basically opens up the store, fetches all entities by the name “Snapshots” and places them into a special object called NSFetchedResultsController.
The didChangeSection method is called when there is a change within a section. We only have 1 section in our UICollectionView.
The didChangeObject method is called when a particular object is changed within our UICollectionView.
The controllerDidChangeContent actually manages the changes made. Basically we update our two arrays, _sectionChanges and _objectChanges with each change in the data in order to keep our UICollectionView current.
5) Connect to Flickr API. So what constitutes a change in those sections and objects? There is an acronym that datastore managers use, CRUD, which basically says that everytime you create, read, update or delete you create a transaction. Thats basically what we want to track (except for the read part :)). So whenever we download a new photo to our datastore, update a photo or delete one, we trigger changes in objects and thus in sections.
We want to use the Flickr API to get images from the web and populate our collection view. We are basically going to perform a fetch to Flickr API using our own key or identifier. You must register for one at flickr.com/.
a – Get FlickrAPIKey and add it here to this string constant atop your .m file like so:
