Adding a subview to a UICollectionViewCell that takes up entire cell frame

Question

I am trying to simply add a UIView to a UICollectionViewCell that takes up the entire cell's frame. The code I have now only displays a single cell in the top left corner (I suspect each cell is getting layer out on top of each other). How exactly can I do this?

I plan on subclassing UIView later so as to customize the view that I am adding to the cell. I don't want to subclass UICollectionViewCell however based on the way I will be using it.

#pragma mark - Collection view data source

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 6;
}

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

    UIView *menuItem = [[UIView alloc] init];
    menuItem.frame = cell.frame;
    menuItem.backgroundColor = [UIColor greenColor];
    [cell addSubview:menuItem];

    return cell;
}

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

Solution 1

You'll need to use bounds, not frame. If you don't know the difference between the two or why this matters, you should read up on this and get comfortable with it before going further:

menuItem.frame = cell.bounds;

You'll also want to set an autoresizing mask, since the cell won't initially be at the correct size:

menuItem.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

And, really, you should be adding this to the cell's contentView property:

[cell.contentView addSubview:menuItem];
menuItem.frame = cell.contentView.bounds;

That said, if you plan on adding lots of subviews to menuItem, I recommend subclassing UICollectionViewCell instead of trying to build it in your cellForItemAtIndexPath: method. It will be much easier to control if the layout and setup is encapsulated in a different class, and you can respond to height / width changes by overriding layoutSubviews.

Solution 2

You should only interact with the cell's contentView in this case.

UIView *menuItem = [UIView new];
menuItem.frame = cell.contentView.bounds;
menuItem.backgroundColor = [UIColor greenColor];
[cell.contentView addSubview:menuItem];

Comments

[DBoyer]

Ok maybe your are right. Thank you for all the help I think I will just do it by subclassing UICollectionViewCell as you suggested.

[shokaveli]

Great tip with autoresizing mask... i have been trying to solve that problem (incorrect sizing initially) for a LONG while now..thanks!

[Script Kitty]

I'm now having issues with the reusable cell... if I add a subview to cell number 1, then iOS reuses that and it appears in cell 17 or 18. Any solutions?

[Aaron Brager]

@script kitty that’s how table cells work… if you add a view it will stay there until you change or remove it

[Script Kitty]

I ended up cleaning up the view in the prepareForReuse method. Thanks for your answer!