How do you determine spacing between cells in UICollectionView flowLayout

Question

I have a UICollectionView with a flow layout and each cell is a square. How do I determine the spacing between each cells on each row? I can't seem to find the appropriate settings for this. I see there's a min spacing attributes on the nib file for a collection view, but I set this to 0 and the cells doesn't even stick.

Any other idea?

Solution 1

Update: Swift version of this answer: https://github.com/fanpyi/UICollectionViewLeftAlignedLayout-Swift

---

Taking @matt's lead I modified his code to insure that items are ALWAYS left aligned. I found that if an item ended up on a line by itself, it would be centered by the flow layout. I made the following changes to address this issue.

This situation would only ever occur if you have cells that vary in width, which could result in a layout like the following. The last line always left aligns due to the behavior of UICollectionViewFlowLayout, the issue lies in items that are by themselves in any line but the last one.

With @matt's code I was seeing.

In that example we see that cells get centered if they end up on the line by themselves. The code below insures your collection view would look like this.

#import "CWDLeftAlignedCollectionViewFlowLayout.h"

const NSInteger kMaxCellSpacing = 9;

@implementation CWDLeftAlignedCollectionViewFlowLayout

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    NSArray* attributesToReturn = [super layoutAttributesForElementsInRect:rect];
    for (UICollectionViewLayoutAttributes* attributes in attributesToReturn) {
        if (nil == attributes.representedElementKind) {
            NSIndexPath* indexPath = attributes.indexPath;
            attributes.frame = [self layoutAttributesForItemAtIndexPath:indexPath].frame;
        }
    }
    return attributesToReturn;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewLayoutAttributes* currentItemAttributes =
    [super layoutAttributesForItemAtIndexPath:indexPath];

    UIEdgeInsets sectionInset = [(UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout sectionInset];

    CGRect currentFrame = currentItemAttributes.frame;

    if (indexPath.item == 0) { // first item of section
        currentFrame.origin.x = sectionInset.left; // first item of the section should always be left aligned
        currentItemAttributes.frame = currentFrame;

        return currentItemAttributes;
    }

    NSIndexPath* previousIndexPath = [NSIndexPath indexPathForItem:indexPath.item-1 inSection:indexPath.section];
    CGRect previousFrame = [self layoutAttributesForItemAtIndexPath:previousIndexPath].frame;
    CGFloat previousFrameRightPoint = CGRectGetMaxX(previousFrame) + kMaxCellSpacing;

    CGRect strecthedCurrentFrame = CGRectMake(0,
                                              currentFrame.origin.y,
                                              self.collectionView.frame.size.width,
                                              currentFrame.size.height);

    if (!CGRectIntersectsRect(previousFrame, strecthedCurrentFrame)) { // if current item is the first item on the line
        // the approach here is to take the current frame, left align it to the edge of the view
        // then stretch it the width of the collection view, if it intersects with the previous frame then that means it
        // is on the same line, otherwise it is on it's own new line
        currentFrame.origin.x = sectionInset.left; // first item on the line should always be left aligned
        currentItemAttributes.frame = currentFrame;
        return currentItemAttributes;
    }

    currentFrame.origin.x = previousFrameRightPoint;
    currentItemAttributes.frame = currentFrame;
    return currentItemAttributes;
}

@end

Solution 2

To get a maximum interitem spacing, subclass UICollectionViewFlowLayout and override layoutAttributesForElementsInRect: and layoutAttributesForItemAtIndexPath:.

For example, a common problem is this: the rows of a collection view are right-and-left justified, except for the last line which is left-justified. Let's say we want all the lines to be left-justified, so that the space between them is, let's say, 10 points. Here's an easy way (in your UICollectionViewFlowLayout subclass):

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    NSArray* arr = [super layoutAttributesForElementsInRect:rect];
    for (UICollectionViewLayoutAttributes* atts in arr) {
        if (nil == atts.representedElementKind) {
            NSIndexPath* ip = atts.indexPath;
            atts.frame = [self layoutAttributesForItemAtIndexPath:ip].frame;
        }
    }
    return arr;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewLayoutAttributes* atts =
    [super layoutAttributesForItemAtIndexPath:indexPath];

    if (indexPath.item == 0) // degenerate case 1, first item of section
        return atts;

    NSIndexPath* ipPrev =
    [NSIndexPath indexPathForItem:indexPath.item-1 inSection:indexPath.section];

    CGRect fPrev = [self layoutAttributesForItemAtIndexPath:ipPrev].frame;
    CGFloat rightPrev = fPrev.origin.x + fPrev.size.width + 10;
    if (atts.frame.origin.x <= rightPrev) // degenerate case 2, first item of line
        return atts;

    CGRect f = atts.frame;
    f.origin.x = rightPrev;
    atts.frame = f;
    return atts;
}

The reason this is so easy is that we aren't really performing the heavy lifting of the layout; we are leveraging the layout work that UICollectionViewFlowLayout has already done for us. It has already decided how many items go in each line; we're just reading those lines and shoving the items together, if you see what I mean.

Solution 3

There are a few things to consider:

1. Try changing the minimum spacing in IB, but leave the cursor in that field. Notice that Xcode doesn't immediately mark the document as changed. When you click in a different field, though, Xcode does notice that the document is changed and marks it so in the file navigator. So, be sure to tab or click over to a different field after making a change.

2. Save your storyboard/xib file after making a change, and be sure to rebuild the app. It's not hard to miss that step, and then you're left scratching your head wondering why your changes didn't seem to have any effect.

3. UICollectionViewFlowLayout has a minimumInteritemSpacing property, which is what you're setting in IB. But the collection's delegate can also have a method to determine the inter-item spacing. That method trump's the layout's property, so if you implement it in your delegate your layout's property won't be used.

4. Remember that the spacing there is a minimum spacing. The layout will use that number (whether it comes from the property or from the delegate method) as the smallest allowable space, but it may use a larger space if it has space leftover on the line. So if, for example, you set the minimum spacing to 0, you may still see a few pixels between items. If you want more control over exactly how the items are spaced you should probably use a different layout (possibly one of your own creation).

Solution 4

A little bit of maths does the trick more easily. The code wrote by Chris Wagner is horrible because it calls the layout attributes of each previous items. So the more you scroll, the more it's slow...

Just use modulo like this (I'm using my minimumInteritemSpacing value as a max value too):

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes* currentItemAttributes = [super layoutAttributesForItemAtIndexPath:indexPath];
    NSInteger numberOfItemsPerLine = floor([self collectionViewContentSize].width / [self itemSize].width);

    if (indexPath.item % numberOfItemsPerLine != 0)
    {
        NSInteger cellIndexInLine = (indexPath.item % numberOfItemsPerLine);

        CGRect itemFrame = [currentItemAttributes frame];
        itemFrame.origin.x = ([self itemSize].width * cellIndexInLine) + ([self minimumInteritemSpacing] * cellIndexInLine);
        currentItemAttributes.frame = itemFrame;
    }

    return currentItemAttributes;
}

Solution 5

Clean Swift solution, from an history of evolution:

1. there was matt answer
2. there was Chris Wagner lone items fix
3. there was mokagio sectionInset and minimumInteritemSpacing improvement
4. there was fanpyi Swift version
5. now here is a simplified and clean version of mine:

open class UICollectionViewLeftAlignedLayout: UICollectionViewFlowLayout {
    open override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return super.layoutAttributesForElements(in: rect)?.map { $0.representedElementKind == nil ? layoutAttributesForItem(at: $0.indexPath)! : $0 }
    }

    open override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        guard let currentItemAttributes = super.layoutAttributesForItem(at: indexPath)?.copy() as? UICollectionViewLayoutAttributes,
            collectionView != nil else {
            // should never happen
            return nil
        }

        // if the current frame, once stretched to the full row intersects the previous frame then they are on the same row
        if indexPath.item != 0,
            let previousFrame = layoutAttributesForItem(at: IndexPath(item: indexPath.item - 1, section: indexPath.section))?.frame,
            currentItemAttributes.frame.intersects(CGRect(x: -.infinity, y: previousFrame.origin.y, width: .infinity, height: previousFrame.size.height)) {
            // the next item on a line
            currentItemAttributes.frame.origin.x = previousFrame.origin.x + previousFrame.size.width + evaluatedMinimumInteritemSpacingForSection(at: indexPath.section)
        } else {
            // the first item on a line
            currentItemAttributes.frame.origin.x = evaluatedSectionInsetForSection(at: indexPath.section).left
        }
        return currentItemAttributes
    }

    func evaluatedMinimumInteritemSpacingForSection(at section: NSInteger) -> CGFloat {
        return (collectionView?.delegate as? UICollectionViewDelegateFlowLayout)?.collectionView?(collectionView!, layout: self, minimumInteritemSpacingForSectionAt: section) ?? minimumInteritemSpacing
    }

    func evaluatedSectionInsetForSection(at index: NSInteger) -> UIEdgeInsets {
        return (collectionView?.delegate as? UICollectionViewDelegateFlowLayout)?.collectionView?(collectionView!, layout: self, insetForSectionAt: index) ?? sectionInset
    }
}

Usage: the spacing between items is determined by delegate's collectionView (_:layout:minimumInteritemSpacingForSectionAt:).

I put it on github, https://github.com/Coeur/UICollectionViewLeftAlignedLayout, where I actually added a feature of supporting both scroll directions (horizontal and vertical).

View more solutions

Comments

[adit]

Thanks for the awesome answer. I think what I am looking more is the maximumInteritemSpacing, is there such value?

[Caleb]

No, there isn't a max value. If you think about what the flow layout does, you'll see why. The flow layout puts as many items on a line as can fit while still respecting the minimum item spacing. At that point, there will be n pixels left over, where n is greater than or equal to 0 and less than the size of the next item plus the minimum spacing. The layout then takes those n pixels and distributes them to space the items on the row evenly. It couldn't do that if you set a max spacing. You can, however, write your own layout to space items however you like.

[Joakim Engstrom]

Just a question since I don't have the possibility to test your code right now. Will this answer help me fix the problem I'm having here? stackoverflow.com/questions/13411609/…

[Rob R.]

Awesome, added the vertical version of the code here: stackoverflow.com/questions/14482882/… Thanks for the awesome code

[iDev]

+1, You can set minimumInteritemSpacing and minimumLineSpacing as well, depending on what you are trying to achieve.

[X.Y.]

Off-topic question, how do I implement a tag UI element like yours, any open source project to suggest? Thanks

[GangstaGraham]

Use a UIButton without a target (or with a target in case you need one), there are lots of custom UIButtons on GitHub, just search for "Button" in the Objective-C category

[Chris Wagner]

What you are seeing in my screenshot are UICollectionViewCells within a UICollectionView. The touch events are handled by the delegate methods. Then they are styled accordingly just using a stretchable background, aside from the blue one, that is just an image within a cell. No open source stuff from what I am aware of but this is pretty simple with a UICollectionView, the hard part was getting them to align this way, and that is done for you here ;)

[AdamG]

Thanks so much for this! It was incredibly helpful and saved me a ton of time. I was wondering though if you have any advice on how to make this flow horizontally as I am currently putting UICollectionViews in UITableViewCells and the vertical direction is being intercepted (and wouldn't be good ux anyway).

[Chris Wagner]

Not sure I completely understand what you mean, maybe provide a mockup?

[jasonIM]

@ChrisWagner Hey, an offtopic, what font have you used for those tags?

[Chris Wagner]

In my situation the previous cell's size is important, which is why it calls for the layout attributes of the previous cell. I didn't performance test it on a large collection view. My use case has at most 11 cells so it was never an issue.

[kokoko]

@ChrisWagner can you provide some details about setting the rows distance? I've changed my kMaxCellSpacing to 3, implemented - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath which returns calculated size of tag buttons (yeah, i'm making same thing as at your's screenshot). But, I'm still having trouble with row spacing. When the distance between cells is 3, the distance between rows still about 10. Can you tell me, how I can affect it, please?

[Chris Wagner]

@kokoko I am not sure why it's not respecting your value, have you tried a negative value to see if it has any affect? Obviously it'd be better to find the root cause but it's worth seeing if it is doing anything. I haven't done any custom collection view layouts since this so I am having a hard time recalling all of the intricacies.

[kokoko]

@ChrisWagner actually, I am not having trouble with spacing between cells (tags), but I don't know how to change the spacing between rows, when cells are out of bounds and logics put them on a new line. Sorry, if you misunderstood me, I messed up row and line :)

[mokagio]

Nice! Many thanks to you and @matt for this, it definitely saved me a lot of time, and made me understand what was going on better! Cheers! I found an edge usage case: when the developer uses the delegate to set the insets for the section. To cover that case we need to first ask the delegate, and only in case it doesn't set the insets using the layout class ones.

[Yinda Yin]

See here for a possible improvement to the code: stackoverflow.com/review/suggested-edits/4003993

[Drux]

Can you please identify the exact method in the layout's delegate that can determine horizontal inter-item spacing.

[Caleb]

@Drux Sorry -- poor wording. I'll fix it. There is a UICollectionViewDelegateFlowLayout protocol that the collection view's delegate can adopt to support a flow layout. See the method – collectionView:layout:minimumInteritemSpacingForSectionAtInd‌​ex:.

[eyeballz]

I added an improvement suggestion aswell: add rounding to previousFrameRightPoint or the content of the cells might be blurry.

[ricosrealm]

Thanks for the solution. A minor point: the recursion within this code may be expensive if there's a collection view with a large set of horizontal items per row (collectionView.contentSize.width is much larger than cell width).

[Victor Engel]

Instead of kMaxCellSpacing you should use self.minimumInterimSpacing.

[Victor Engel]

To avoid the significant performance hit on large collections, I think a simple modification to this would be to simply cache the attributes and last indexPath. Then, at the beginning, simply check if [indexPath isEqual:self.cachedIndexPath] and if so, just use the cached attributes. Of course, you also need to update the cache when the attributes are computed otherwise. I've tested this in a sample project, and it seems to work well. I can't think of a scenario that would break this. If you can, please post.

[dengST30]

CGRectIntersectsRect is intuitive and easy to borrow. @matt's CGFloat rightPrev = fPrev.origin.x + fPrev.size.width + 10; is better . Same result , and do less. And compare Y position is leaner.