Cells in UICollectionView are overlapping

Question

I'm using a ViewController in which I add a UICollectionView this way:

UICollectionViewFlowLayout *collectionViewFlowLayout = [[UICollectionViewFlowLayout alloc] init];
[collectionViewFlowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
[collectionViewFlowLayout setMinimumInteritemSpacing:2];
[collectionViewFlowLayout setMinimumLineSpacing:4];
[collectionViewFlowLayout setHeaderReferenceSize:CGSizeMake(320, 30)];

CGRect collectionViewFrame = self.view.bounds;
self.collectionView = [[UICollectionView alloc] initWithFrame:collectionViewFrame collectionViewLayout:collectionViewFlowLayout];
self.collectionView.autoresizingMask = UIViewAutoresizingFlexibleHeight;

self.collectionView.delegate = self;
self.collectionView.dataSource = self;

[self.collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:myCellIdentifier];

[self.view addSubview:self.collectionView];

And this is how I'm initializing my custom cell object (I made sure the frame for each cell filled the whole width of the screen, so that the cells would be rendered one after another vertically in the UICollectionView):

CGSize mySize = CGSizeMake(320, 158);
self.myTitle = [[UILabel alloc ] initWithFrame:CGRectMake(0, 0, mySize.width, mySize.height)];
[self.myTitle setTextColor:[UIColor whiteColor]];
[self.myTitle setBackgroundColor:[UIColor greenColor]];
[self.myTitle setTextAlignment:NSTextAlignmentLeft];
[self.myTitle setNumberOfLines:1];
[self.myTitle setText:@"My Title"];
[self addSubview:self.myTitle];

This is how I initialize the frame of the cell in initWithNibName:

CGSize mySize = CGSizeMake(320, 158);
self = [super initWithFrame:CGRectMake(0, 0, mySize.width, mySize.height)];

And here's my cellForItemAtIndexPath code:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = (UICollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:myCellIdentifier forIndexPath:indexPath];

    return cell;
}

Now I have four of these cells, yet they are overlapping. What am I doing wrong? Thanks!

Can you show how you're setting the size of your cells? It looks like you might be setting your labels to have larger frames than the cells that contain them. — Mick MacCallum
I am also facing the issue, if it's solved then would you let me know how to solve it? — Paresh Thakor

Ladislav Ladislav · Accepted Answer · 2014-02-25T15:52:38

Implement UICollectionViewFlowLayout delegate call:

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
return CGSizeMake(320, 158);
}

Or since all the sizes are constant just specify the size in your Flow layout like so:

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
flowLayout.itemSize = CGSizeMake(320, 158);

Cells in UICollectionView are overlapping

2 Answers