UICollectionView: How to add space between Footer and Header?

Question

I have a CollectionView using the standard FlowLayout class with horizontal scrolling and a header and footer in each section.

Now there's zero pixels between the footer and the header views (i.e between the sections). I'd like to add a little spacing between them, but not above the first section or after the last one. So I can't just add that space in the header and footer views itself.

I would have expected something like "interSectionSpacing", but apparently there is no such setting. Any ideas?

Answer 1

So it turns out there is no setting for that. This is what I ended up with:

I set the content of my header view to be aligned to the bottom of the header view itself, so it seems to have the same visible height, even if I make the header view taller than its content (auto layout makes this really easy).

Then I set the height of the header depending on the section index in this delegate method of UICollectionViewFlowLayout:

#define kHeaderHeight 42
#define kInterSectionMargin 8

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
    if (section == 0) {
        return CGSizeMake(0, kHeaderHeight);
    }
    return CGSizeMake(0, kHeaderHeight + kInterSectionMargin);
}

Now there's a little space between the sections, but not before the first section.

Answer 2

You're right there's no such thing as "interSectionSpacing", but there is something close.

Try sectionInset on your UICollectionViewFlowLayout.

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
[flowLayout setSectionInset:UIEdgeInsetsMake(top, left, bottom, right)];