How to UICollectionView

Drag out Single View Controller. Add a CollectionView.

Pin it to the walls.

Implement the interfaces

The create an data struct and fill it with data.

Create a UICollectionViewCell.

Add a label to the cell in the story board.

Connect the cell in the storyboard to the UICollectionViewCell we just created.

Give it an id.

Hook it up to an IBOutlet.

Instantiate and populate the cell in the delegate methods.

Add the CollectionView as a property.

Make yourself the delegate.

Set yourself as the DataSource by control dragging from CollectionView to yellow ViewController in storyboard.

Should now run and populate.

To make the flow horizontal change the flow.

And to make rows selectable implement.

Which will print out.

Optionally you can also implement these following methods for more layout control.

Code

TrackCell.h

#import

@interface TrackCell : UICollectionViewCell
@property (weak, nonatomic) IBOutlet UILabel *name;
@end

TrackCell.m

#import "TrackCell.h"
@implementation TrackCell
@end

ViewController.m

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

@interface ViewController () <UICollectionViewDataSource, UICollectionViewDelegate>
@property (weak, nonatomic) IBOutlet UICollectionView *collectionView;
@property (nonatomic, strong) NSArray *tracks;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.tracks = [NSArray arrayWithObjects:@"Egg Benedict", @"Mushroom Risotto", @"Full Breakfast", nil];

    self.collectionView.delegate = self;
}

#pragma mark - UICollectionViewDataSource

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

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
                  cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *identifier = @"TrackCell";

    TrackCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
    cell.name.text = (NSString *)self.tracks[indexPath.row];
    return cell;
}

#pragma mark - UICollectionViewDelegate

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"%@", self.tracks[indexPath.row]);
}

@end

Advertisement