UICollectionView container padding

Question

I am trying to add padding to the container of a UICollectionView. I would like it to appear as such that there is a 10pt padding all around. So in the example screen, there is a 10pt padding on the bottom from:

layout.minimumInteritemSpacing = layout.minimumLineSpacing = 10;

I am using a UICollectionViewFlowLayout to layout the cells. I have also tried a "trick" where I add a 10pt view on top, but the content doesn't appear to scroll through the view since they are separate. enter image description here

score 81 · Accepted Answer · answered Jan 17 '15 at 19:25

81

Please try to put following code inside viewDidLoad():

collectionView!.contentInset = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

This will add padding to every side of the collectionView.

PS: I know the question is here for a while but it might help somebody ;)

answered Jan 17 '15 at 19:25

exmaxx

3,252
28
27

3

Thanks very much, this worked. Should get marked as answer! – Crashalot Apr 09 '16 at 20:20

score 6 · Answer 2 · answered Nov 07 '13 at 21:29

6

It seems like the sectionInset property of your UICollectionViewFlowLayout is what you need to modify.

You can use a UIEdgeInsetsMake to create a UIEdgeInsets with margins for top, left, right, and bottom, and set this to the sectionInset property.

Here's the documentation for UICollectionViewFlowLayout: https://developer.apple.com/library/ios/documentation/uikit/reference/UICollectionViewFlowLayout_class/Reference/Reference.html

answered Nov 07 '13 at 21:29

Marcel Puyat

325
3
8

It's a paging view (vertically). Setting the section header with an inset will only affect the first page. Any other ideas? – nmock Nov 07 '13 at 22:46

score 1 · Answer 3 · answered Jul 05 '20 at 06:41

I used a couple of methods from the UICollectionViewDelegateFlowLayout delegate to accomplish what I was looking for. I was attempting to add 'padding' to cells that had a shadow. This was to ensure they had the effect of 'floating,' and were not touching the edges of the UICollectionView.

First, call the sizeForItemAt indexPath method and give the cells a size:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: collectionView.bounds.width * 0.80, height: collectionView.bounds.height * 0.98)
}

Then, call the insetForSectionAt section method, and set the insets for the cells:

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

score 0 · Answer 4 · answered Oct 19 '21 at 10:06

If you're using configurations, set the contentInsetsReference on the layout's configuration to follow layoutMargins, then set layoutMargins on the collectionView itself.

var config = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
config.headerMode = .supplementary
        
let layout = UICollectionViewCompositionalLayout.list(using: config)
layout.configuration.contentInsetsReference = .layoutMargins
        
collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        
collectionView.layoutMargins = .init(top: 16, left: 64, bottom: 16, right: 64)

Ely · Answer 5 · 2022-06-23T12:18:48.927

In case you're using a UICollectionLayoutListConfiguration, it seems that to get smaller margins with certain appearances, you've to do that on section level like this:

private func createLayout() -> UICollectionViewLayout {
   let layout = UICollectionViewCompositionalLayout() { (sectionIndex, layoutEnvironment) -> NSCollectionLayoutSection? in
        
        // Create a list configuration as usual
        var config = UICollectionLayoutListConfiguration(appearance: .sidebarPlain)
        config.headerMode = .supplementary
        
        // Change the section's contentInsets to adjust the side margins
        let section = NSCollectionLayoutSection.list(using: config, layoutEnvironment: layoutEnvironment)
        section.contentInsets.leading = 10
        section.contentInsets.trailing = 10
        return section
    }
    return layout
}

Based on feedback from Apple (https://developer.apple.com/forums/thread/679863)

UICollectionView container padding

5 Answers5