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
Aug 22, 2017 @ 23:21:59
> Here is the code in it’s entirety
in its* entirety
it’s = it is
Besides that, this is a great tutorial.
Jun 03, 2019 @ 07:59:03
Thanks a lot, you saved me a lot of apple documentation surfing.
Aug 05, 2021 @ 04:40:55
This helps me in 2021, thanks
Apr 20, 2022 @ 17:17:59
Thanks for the tutorial! Just a word of help for anyone that gets this error:
2022-04-20 13:15:11.435501-0400 UserInterface3[21277:578533] *** Terminating app due to uncaught exception ‘NSInternalInconsistencyException’, reason: ‘could not dequeue a view of kind: UICollectionElementKindCell with identifier TrackCell – must register a nib or a class for the identifier or connect a prototype cell in a storyboard’
I had to add this line to viewDidLoad:
[self.collectionView registerClass:TrackCell.self forCellWithReuseIdentifier:@”TrackCell”];
It’s possible I missed a step somewhere, but it didn’t run until I added that.
Apr 21, 2022 @ 21:32:47
I take back my correction. I want to be sure there is accurate information here as it is a top result when Googling Objective C and UICollectionView. I fiddled with this error for a while. I missed the step “Give it an identifier”, and after doing that the code ran fine. I had to remove the line that I mentioned I added to viewDidLoad(). With that line added the labels did not show up on the cells.
If you don’t have the identifier added then adding that line allows the app to startup without immediately returning an exception, but the labels do not show properly. The labels are nil.
I also had something else wrong with the TrackCell that I had added to the CollectionView. I could not figure out what was wrong with it, but eventually I deleted it and recreated it and the new one worked fine.
So the short of it is, if you get the error “could not dequeue a view of kind: UICollectionElementKindCell with identifier TrackCell ” that means you don’t have the cell with that reuse identifier properly there.
Thanks again for the tutorial. It is a big help.