UICollectionView flowLayout not wrapping cells correctly

Question

I have a UICollectionView with a FLowLayout. It will work as I expect most of the time, but every now and then one of the cells does not wrap properly. For example, the the cell that should be on in the first "column" of the third row if actually trailing in the second row and there is just an empty space where it should be (see diagram below). All you can see of this rouge cell is the left hand side (the rest is cut off) and the place it should be is empty.

This does not happen consistently; it is not always the same row. Once it has happened, I can scroll up and then back and the cell will have fixed itself. Or, when I press the cell (which takes me to the next view via a push) and then pop back, I will see the cell in the incorrect position and then it will jump to the correct position.

The scroll speed seems to make it easier to reproduce the problem. When I scroll slowly, I can still see the cell in the wrong position every now and then, but then it will jump to the correct position straight away.

The problem started when I added the sections insets. Previously, I had the cells almost flush against the collection bounds (little, or no insets) and I did not notice the problem. But this meant the right and left of the collection view was empty. Ie, could not scroll. Also, the scroll bar was not flush to the right.

I can make the problem happen on both Simulator and on an iPad 3.

I guess the problem is happening because of the left and right section insets... But if the value is wrong, then I would expect the behavior to be consistent. I wonder if this might be a bug with Apple? Or perhaps this is due to a build up of the insets or something similar.

---

Follow up: I have been using this answer below by Nick for over 2 years now without a problem (in case people are wondering if there are any holes in that answer - I have not found any yet). Well done Nick.

Solution 1

There is a bug in UICollectionViewFlowLayout's implementation of layoutAttributesForElementsInRect that causes it to return TWO attribute objects for a single cell in certain cases involving section insets. One of the returned attribute objects is invalid (outside the bounds of the collection view) and the other is valid. Below is a subclass of UICollectionViewFlowLayout that fixes the problem by excluding cells outside of the collection view's bounds.

// NDCollectionViewFlowLayout.h
@interface NDCollectionViewFlowLayout : UICollectionViewFlowLayout
@end

// NDCollectionViewFlowLayout.m
#import "NDCollectionViewFlowLayout.h"
@implementation NDCollectionViewFlowLayout
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
  NSArray *attributes = [super layoutAttributesForElementsInRect:rect];
  NSMutableArray *newAttributes = [NSMutableArray arrayWithCapacity:attributes.count];
  for (UICollectionViewLayoutAttributes *attribute in attributes) {
    if ((attribute.frame.origin.x + attribute.frame.size.width <= self.collectionViewContentSize.width) &&
        (attribute.frame.origin.y + attribute.frame.size.height <= self.collectionViewContentSize.height)) {
      [newAttributes addObject:attribute];
    }
  }
  return newAttributes;
}
@end

See this.

Other answers suggest returning YES from shouldInvalidateLayoutForBoundsChange, but this causes unnecessary recomputations and doesn't even completely solve the problem.

My solution completely solves the bug and shouldn't cause any problems when Apple fixes the root cause.

Solution 2

Put this into the viewController that owns the collection view

- (void)viewWillLayoutSubviews
{
    [super viewWillLayoutSubviews];
    [self.collectionView.collectionViewLayout invalidateLayout];
}

Solution 3

A Swift version of Nick Snyder's answer:

class NDCollectionViewFlowLayout : UICollectionViewFlowLayout {
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let attributes = super.layoutAttributesForElements(in: rect)
        let contentSize = collectionViewContentSize
        return attributes?.filter { $0.frame.maxX <= contentSize.width && $0.frame.maxY < contentSize.height }
    }
}

Solution 4

i discovered similar problems in my iPhone application. Searching the Apple dev forum brought me this suitable solution which worked in my case and will probably in your case too:

Subclass UICollectionViewFlowLayout and override shouldInvalidateLayoutForBoundsChange to return YES.

//.h
@interface MainLayout : UICollectionViewFlowLayout
@end

and

//.m
#import "MainLayout.h"
@implementation MainLayout
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{
    return YES;
}
@end

Solution 5

I've had this problem as well for a basic gridview layout with insets for margins. The limited debugging I've done for now is implementing - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect in my UICollectionViewFlowLayout subclass and by logging what the super class implementation returns, which clearly shows the problem.

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    NSArray *attrsList = [super layoutAttributesForElementsInRect:rect];

    for (UICollectionViewLayoutAttributes *attrs in attrsList) {
        NSLog(@"%f %f", attrs.frame.origin.x, attrs.frame.origin.y);
    }

    return attrsList;
}

By implementing - (UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath I can also see that it seems to return the wrong values for itemIndexPath.item == 30, which is factor 10 of my gridview's number of cells per line, not sure if that's relevant.

- (UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingItemAtIndexPath:(NSIndexPath *)itemIndexPath {
    UICollectionViewLayoutAttributes *attrs = [super initialLayoutAttributesForAppearingItemAtIndexPath:itemIndexPath];

    NSLog(@"initialAttrs: %f %f atIndexPath: %d", attrs.frame.origin.x, attrs.frame.origin.y, itemIndexPath.item);

    return attrs;
}

With a lack of time for more debugging, the workaround I've done for now is reduced my collectionviews width with an amount equal to the left and right margin. I have a header that still needs the full width so I've set clipsToBounds = NO on my collectionview and then also removed the left and right insets on it, seems to work. For the header view to then stay in place you need to implement frame shifting and sizing in the layout methods that are tasked with returning layoutAttributes for the header view.

View more solutions

Comments

[lindon fox]

Thanks for the extra information @monowerker. I think my problem started when I added the insets (I have added this to the question). I will try your debugging methods and see if it tell me anything. I might try your work around too.

[monowerker]

This is most likely a bug in UICFL/UICL, I'm going to try and get a radar filed when I have the time, here is a discussion with some rdar-numbers you can reference. twitter.com/steipete/status/258323913279410177

[Daniel Wood]

This only partly solves the problem I'm having with this issue. The cell does indeed go to the correct place when the row appears. However, just before it appears I still get a cell appearing off the side.

[Patrick Tescher]

FYI this bug also crops up with horizontal scrolling. Replacing x with y and width with height makes this patch work.

[Vinzzz]

Thanks! I was just starting to play with collectionView (if you want to spam Apple about this, here's the rdar reference openradar.appspot.com/12433891)

[Nick Snyder]

Thanks Patrick and Yanik. I updated my answer to support vertical scrolling as well.

[Lescai Ionel]

@NickSnyder I was having this issue with PSTCollectionView and my section headers weren't appearing on ios 5. I added [[attribute valueForKey:@"elementKind"] isEqualToString:@"UICollectionElementKindSectionHeader"] || to the if

[Rpranata]

I stumbled upon this page a year ago and this solved my problem. Thanks! However, I was wondering whether this problem has been fixed internally by Apple. Cheers.

[cleverbit]

Rather than checking individual params of the rect, you could just use CGRectIntersectsRect(attribute.frame, rect)

[Nick Snyder]

@richarddas No, you don't want to check if the rects intersect. In fact, all of the cells (valid or invalid) will intersect the bounds rect of the collection view. You want to check if any part of the rect falls outside the bounds, which is what my code does.

[nonamelive]

@Rpranata As of iOS 7.1, this bug has not been fixed. Sigh.

[Rpranata]

@nonamelive Thanks for conforming that. I was so tempted to remove this from the code base. Turns out I still need it. sigh

[Prem Baranwal]

@NickSnyder Nick I'm facing the same issue after using collection view inside table view cell.The cells inside the internal collection view are rearranged and sometimes disappearing.Please help me how i am supposed to user your code.I am just setting your custom layout instead of UICollectionview layout.But - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect where to use this method?

[fatuhoku]

Where do you put that?

[fatuhoku]

Careful — doing this will cause layout to be run every time you scroll. This can severely impact performance.

[Peter Lapisu]

Into the viewController that owns the collection view

[pawi]

My issue was that the cells disappeared completely. This solution helped - however this causes unnecessary reloads. Still it is working now.. thx!

[sudo]

Maybe I'm using this wrong, but on iOS 8.3 in Swift, this is causing subviews on the right that used to be cut off to not appear at all. Anyone else?

[Deekor]

Have they not fixed this 3 years later?

[morph85]

I'm using horizontal scrolling too, I manage to fix the issue using your solution, but after performing segue to other view and came back, the content size seemed to be wrong when there are extra items which doesn't divide into columns equally.

[morph85]

I found a solution to fix issue where cell getting hidden after performing segue and back to collection view. Try not to set estimatedItemSize in collectionViewFlowLayout; set itemSize directly.

[Garrett Cox]

where did set the itemsize and estimatedItemsize in the uicollectionviewflowlayout?

[Andrey Seredkin]

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init]; [flowLayout setItemSize:CGSizeMake(200, 200)]; [flowLayout setEstimatedItemSize:CGSizeMake(200, 200)]; self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];

[Giggs]

this completely made the CollectionViewCell disappear... Any other possible solution?

[Hofi]

it causes an infinite loop if calling from the viewController for me

[wmurmann]

Setting estimatedItemSize did it for me

[Cœur]

As noted by DHennessy13, this current solution is good but may be imperfect as it will invalidateLayout when rotating the screen (and for most cases it shouldn't). An improvement could be to set a flag in order to invalidateLayout only once.

[famfamfam]

pls help my problem stackoverflow.com/questions/66867792/…