How to make a UICollectionViewCell span entire row?

Question

Context

• I am trying to create something similar to a Table view using UICollectionView.

• I am using Xcode7 and storyboarding.

• The way I do it is that I drag the collection view across the entire controller view.

• And then I drag the entire cell across the row and align it with the right and left boundaries.

Problem

• But, when I place a label inside the cell, then it gets displayed correctly only when the device is in a horizontal position.
• When the device is vertical, it gets cut off at the left boundary.

Question

How do I ensure that the width of the collection view cell matches that of the container width?

Answer 1

It is because you are not using autolayout. You can achieve this entirely in storyboard or through code. Using Storyboard

1. Add UICollectionView in your UIViewController in storyboard.
2. Drag UICollectionView to fill up in your UIViewController.
3. Add Constraints as shown in image.
4. Drag UICollectionView to fill up in UICollectionView.
5. Add UILabel (Or whatever you want to have in cell). Also add constraints in that element.
6. Build and run.

Answer 2

1) Implement the function of cell size and return the collection width:

-(CGSize) collectionView: (UICollectionView*) collectionView layout:(UICollectionViewLayout*) collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath*) indexPath {
    CGFloat height = 50; //set the wanted height
    return CGSizeMake(collectionView.frame.size.width,height);
}

2) Reload the collection when the screen size change (i.e. orientation change).