Tutorial: Collection View using Flow Layout

Note: Newer tutorial available. If you would like to learn how to implement Collection Views using Swift, read Tutorial: Collection View using Swift

One of the best features for developers that came in the iOS 6 SDK is UICollectionView. It is very similar to UITableView but you can customize it a lot more and it can scroll horizontal, goodbye scroll views! Most recently I used a collection view for a bottom navigation scroller and it worked really well.

A UICollectionView view has three main components:
1. Cells: Display your content in cells that are de-queued as they leave the screen.
2. Supplementary Views: Add labels, section headers and footers to define your content areas.
3. Decoration Views: Decorate the collection view to look like a bookshelf or a background image.

Start by adding the delegates to your header file and define your collection view.

@interface ViewController : UIViewController 

@property (nonatomic, strong) IBOutlet UICollectionView *collectionView;
@property (nonatomic, strong) IBOutlet UICollectionViewFlowLayout *flowLayout;

The most common layout for a UICollectionView is UICollectionViewFlowLayout. Flow layout organizes items into a grid with optional header and footer views for each section. The items in the collection view flow from one row or column (depending on the scrolling direction) to the next, with each row comprising as many cells as will fit. Cells can be the same sizes or different sizes.

Define the UICollectionView & UICollectionViewFlowLayout properties in the viewDidLoad method.

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self.collectionView registerClass:[CellClass class] forCellWithReuseIdentifier:@"classCell"];
    self.collectionView.backgroundColor = [UIColor clearColor];
    
    // Configure layout
    self.flowLayout = [[UICollectionViewFlowLayout alloc] init];
    [self.flowLayout setItemSize:CGSizeMake(191, 160)];
    [self.flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
    self.flowLayout.minimumInteritemSpacing = 0.0f;
    [self.collectionView setCollectionViewLayout:self.flowLayout];
    self.collectionView.bounces = YES;
    [self.collectionView setShowsHorizontalScrollIndicator:NO];
    [self.collectionView setShowsVerticalScrollIndicator:NO];
}

Most of the properties are self explanatory but the key is to define your cell class if you are using custom cells (just like table views) and setting the size of the cells, above they are set to 191×160. Choose the scroll direction (UICollectionViewScrollDirectionHorizontal or UICollectionViewScrollDirectionVertical) and the spacing in between each cell, I have it set to 0. Lastly define the layout, we’re using self.flowLayout that was defined in the header.

- (UIEdgeInsets)collectionView:
(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(0, 0, 0, 0);
}

The method above sets the spacing between sections within the collection view. You might breakup your data by sections if you have artists or albums in your data.

Setting up a UICollectionView is very similar to a UITableView, so you’ll recognized a lot of the methods below.

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
   return [dataArray count];
}

Above we’re defining how many sections and how many items in the section for the collection view. If you have more than one section, then you’ll need to define the number of items in each section within the numberOfItemsInSection method.

Below is the real meat of the UICollectionView, defining the cells with your data. If you choose to use a custom cell you can add images or whatever you need to display.

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    Cell *cell = [cv dequeueReusableCellWithReuseIdentifier:@"cellName" forIndexPath:indexPath];
    cell.label.text = [NSString stringWithFormat:@"%d",indexPath.item];
    return cell;
}

Finally you can drag the UICollectionView object into your view within your NIB. Move and scale the collection view to where you want to display it and review all of the properties within the inspector. Be sure to hookup the collectionView reference outlet and dataSource and delegates so the collection view can provide all the functionality available. Do the same for the Collection View Flow Layout. (See image on the right).