CODEWITHSUNDEEP
iosuicollectionviewuicollectionviewlayout
Adam
Adam

Reputation: 2143

Placing a margin around each edge of the UICollectionView

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 X X X|
|X X X X X X X|
|X X X X X X X|
|X X X X X X X|
|X X X X X X X|
---------------

I would like to place a margin around each edge like so:

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

I tried to achieve this by placing the UICollectionView inside its hosting UIView by setting its Frame to simulate a border but it scrolls within the Frame so gets cut off at the top and bottom and the scroller also appears in the bounds of the frame.

I have looked at the API but I cannot see anything obvious to achieve this. Any ideas?

Upvotes: 21

Views: 32946

Answers (7)

Skaal
Skaal

Reputation: 1272

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)
}

Upvotes: 1

Vinayak Kini
Vinayak Kini

Reputation: 2919

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)
}

Upvotes: 15

Marcone
Marcone

Reputation: 905

On Xcode 8, if you're using the interface builder you can set the Section Insets right on the Size Inspector:

enter image description here

enter image description here

Upvotes: 1

Tyler Cloutier
Tyler Cloutier

Reputation: 2050

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.

Upvotes: 42

Tal Zion
Tal Zion

Reputation: 6526

Swift 2.0

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

Upvotes: 3

Heckscheibe
Heckscheibe

Reputation: 640

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)

Upvotes: 7

mmackh
mmackh

Reputation: 3630

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

Upvotes: 9

Related Questions