I 5.3. Providing a Flow Layout to a Collection View

Problem

You want to provide a grid-like layout to your collection view so that your content can render in a way similar to that shown in Figure 5-1.

Solution

Create an instance of the UICollectionViewFlowLayout class, instantiate your collection view controller using the initWithCollectionViewLayout: designated initializer of the UICollectionViewController class, and pass your layout object to this method.

A flow layout can easily be instantiated, but before it can be passed to a collection view, it has to be configured. Here we are going to discuss the various properties that you can tweak on an instance of the UICollectionViewFlowLayout class and how they can affect the rendering of your collection view cells:

minimumLineSpacing A floating point value that dictates to the flow layout the minimum number of points it has to reserve between each row. The layout object may decide to allocate more space in order to make the layout look good, but it must not allocate less. If your collection view is too small for the items to fit into it, your items will be clipped, just like any other view in the iOS SDK.

minimumInteritemSpacing A floating point value to indicate the minimum number of points that the layout should reserve between cells on the same row. Again, this is the minimum number of points, and the layout, depending on the size of the collection view, may decide to increase this number.

itemSize A CGSize that specifies the size of every cell in the collection view.

scrollDirection A value of type UICollectionViewScrollDirection that tells the flow layout how the collection view’s contents have to be scrolled. You can have the contents scroll either vertically or horizontally, but not both. The default value of this property is UICollectionViewScrollDirectionVertical, but you can change it to UICollectionViewScrollDirectionHorizontal.

sectionInset A value of type UIEdgeInsets that specifies the margins around every section. The margins are basically spaces that will not be occupied by any cells. You can use the UIEdgeInsetsMake function to create these insets, which are made out of top, left, bottom, and right edges, each of type float. Don’t worry if you find this explanation confusing; we will look at an example soon.

Now you are going to modify your app delegate to provide a valid flow layout to our collection view controller:

#import "AppDelegate.h"
#import "ViewController.h"

@implementation AppDelegate

- (UICollectionViewFlowLayout *) flowLayout{

    UICollectionViewFlowLayout *flowLayout =
    [[UICollectionViewFlowLayout alloc] init];

    flowLayout.minimumLineSpacing = 20.0f;
    flowLayout.minimumInteritemSpacing = 10.0f;
    flowLayout.itemSize = CGSizeMake(80.0f, 120.0f);
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    flowLayout.sectionInset = UIEdgeInsetsMake(10.0f, 20.0f, 10.0f, 20.0f);

    return flowLayout;
}

- (BOOL)            application:(UIApplication *)application
  didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{

    /* Instantiate the collection view controller with a valid flow layout */
    ViewController *viewController =
    [[ViewController alloc]
     initWithCollectionViewLayout:[self flowLayout]];

    self.window = [[UIWindow alloc] initWithFrame:
                   [[UIScreen mainScreen] bounds]];

    self.window.backgroundColor = [UIColor whiteColor];

    /* Set the collection view as the root view controller of our window */
    self.window.rootViewController = viewController;
    [self.window makeKeyAndVisible];
    return YES;

}

Our collection view controller’s implementation stays the same as in Recipe 5.2. If you run your app now, all you will see is a black screen because the default implementation of our collection view controller doesn’t even set the background color of the collection view to white. That’s all right for now. At least our app isn’t crashing anymore because of a lack of layout objects.