How to create a UICollectionView Objective-C

 

Create the view collection

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

Add pin it to the outsides of the ViewController view.

Add a label to the ViewCell and add some default constraints

Create a custom view cell

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

Give it an identifier

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

Be a UICollectionViewDataSource

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

Make yourself a datasource

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

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

Control drag the CollectionView from your storyboard over to your ViewController

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.

When you run this now you should see data.

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

Implement this method

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

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

Here is the code in it’s entirety

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UICollectionViewDataSource, UICollectionViewDelegate>

@end

ViewController.m

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

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

@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);
}

@end