Create the view collection

Create a new SingleView Application. Drag out a collection view, make it fill the view

Screen Shot 2017-01-09 at 10.17.49 AM.png

Add pin it to the outsides of the ViewController view.

Add a label to the ViewCell and add some default constraints

Screen Shot 2017-01-09 at 10.41.23 AM.png

Create a custom view cell

Screen Shot 2017-01-09 at 10.43.08 AM.png

Define the customer cell to be the one for your collection view

Screen Shot 2017-01-09 at 10.45.03 AM.png

Give it an identifier

Screen Shot 2017-01-09 at 10.45.23 AM.png

Connect the label you added to the Cell you just created via control drag.

Screen Shot 2017-01-09 at 10.50.31 AM.png

Be a UICollectionViewDataSource

We now need to setup some data for our view. Do that in your ViewController.

Make yourself a datasource

Screen Shot 2017-01-09 at 10.52.06 AM.png

Register yourself as the datasource by control dragging the CollectionView in your storyboard to your ViewController (yellow dot).

Screen Shot 2017-01-09 at 10.53.19 AM.png

You should now see yourself connected by checking your CollectionViews connection inspector.

Screen Shot 2017-01-09 at 10.53.32 AM.png

Control drag the CollectionView from your storyboard over to your ViewController

Screen Shot 2017-01-09 at 10.56.18 AM.png

Create an array to hold some fake data, implement the two necessary datasource methods, and then use your customer cell to read from the fake data.

It should all look something like this.

Screen Shot 2017-01-09 at 11.01.57 AM.png

When you run this now you should see data.

Screen Shot 2017-01-09 at 11.03.14 AM.png

Become the UICollectionViewDelegate

To do anything when a user selects your data we need to become a delegate for the collection. Do so like this.

Make yourself a delegate

Screen Shot 2017-01-09 at 11.04.27 AM.png

Implement this method

Screen Shot 2017-01-09 at 11.05.20 AM.png

And, most importantly because I always forget to do this, register yourself as a delegate by making yourself one in viewDidLoad() programmatically…

Screen Shot 2017-01-09 at 11.06.46 AM.png

And when you run now you can select the Collection view items and you should see output at the bottom.

Screen Shot 2017-01-09 at 11.08.01 AM.png

Here is the code in it’s entirety


#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UICollectionViewDataSource, UICollectionViewDelegate>



#import "ViewController.h"
#import "TrackCell.h"

@interface ViewController ()
@property (strong, nonatomic) IBOutlet UICollectionView *collectionView;
@property (strong, nonatomic) NSArray *tracks;

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.collectionView.delegate = self;

    self.tracks = @[@"foo", @"bar", @"baz"];
    [self.collectionView reloadData];

#pragma UICollectionViewDataSource

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
    return self.tracks.count;

- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
    static NSString *cellIdentifier = @"TrackCell";
    TrackCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];

    // get the track
    NSString *text = [self.tracks objectAtIndex:indexPath.row];

    // populate the cell
    cell.label.text = text;
    cell.backgroundColor = [UIColor blueColor];
    // return the cell
    return cell;

#pragma UICollectionViewDelegate

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
    NSString *selected = [self.tracks objectAtIndex:indexPath.row];
    NSLog(@"selected=%@", selected);