Placing a margin around each edge of the UICollectionView

Question

When the UICollectionView is populated with items they always go right to the edges of the UICollectionView like so:

---------------
|X X X X X X X|
|X X X X         


        

Answer 1

In

(UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath {
}

you can give your cells some margin on the left side.

Or you can create custom cells, which have a margin.

or you can set the property .sectionInset of your CollectionviewFlowLayout, which should be the easiest way (if you use FlowLayout)

Answer 2

Swift 4 updated (Vinayak Kini answer) :

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
}

Answer 3

You can make use of the following function.

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
  {
      return UIEdgeInsetsMake(50, 50,15,50);
  }

You will have to play around with the number to figure out how to force the collectionviewCells in a single line.

UIEdgeInsetsMake ( CGFloat top,CGFloat left,CGFloat bottom,CGFloat right); 

For Swift 3

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsetsMake(10, 4, 10, 4)
}

Answer 4

You can pretty much control every aspect of the grid with collectionview's protocol. Here's an example:

- (UICollectionViewFlowLayout *)collectionViewFlowLayout
{
    UICollectionViewFlowLayout *flowLayout = [UICollectionViewFlowLayout new];
    flowLayout.itemSize = CGSizeMake(180, 255);
    flowLayout.sectionInset = UIEdgeInsetsMake(10, 30, 0, 30);
    flowLayout.minimumInteritemSpacing = 0.0f;
    flowLayout.minimumLineSpacing = 0.0f;
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    return flowLayout;
}

The one you would want to change in your case is the sectionInsets

Answer 5

I know this is an old question, but don't forget that UICollectionView inherits from UIScrollView.

UICollectionView *collectionView = [[UICollectionView alloc] init];
collectionView.contentInset = UIEdgeInsetsMake(x.x, x.x, x.x, x.x);

// Swift 3 for good measure
let collectionView = UICollectionView()
collectionView.contentInset = UIEdgeInsets(top: x.x, left: x.x, bottom: x.x, right: x.x)

Be aware that both contentInset and sectionInset may change the spacing of cells in your view. For more information on that, see this post.

Answer 6

Swift 2.0

self.automaticallyAdjustsScrollViewInsets = false
self.collectionView.contentInset = UIEdgeInsets(top: 10, left: 0, bottom: 0, right: 0)