Question

I have a UICollectionViewFlowLayout that basically does what I want, except for one thing – the correct alignment of UICollectionViewCells, when it is scrolling horizontally and with paging enabled.

What i basically want is this – scrolling pagewise over multiple pages:

See 1 here:
UICollectionView Pictures

My problem is, that i have multiple sections, always with this same layout, but when i scroll to the right, it gets empty (just background color), and when i scroll back to the first page (like the one above) i get a weird result:

See 2. in the link above

Apparently the index paths get somehow mixed up – and i really don’t know why.

My collectionView:numberOfItemsInSection: method returns always “5”, and my numberOfSectionsInCollectionView: returns “2” in this example. I have subclassed UICollectionViewFlowLayout with this:

static CGRect elementLayout[] = {

    {20, 20, 649.333333, 294},
    {20, 334, 314.666666, 294},
    {688, 20.0, 314.666666, 294},
    {354.666666, 334, 314.666666, 294},
    {688, 334, 314.666666, 294},
};

-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect {  

    NSArray *attributes = [super layoutAttributesForElementsInRect:rect];
    NSMutableArray *newAttributes = [NSMutableArray array];

    for(int i = 0; i < [attributes count]; i++) 
    {
        UICollectionViewLayoutAttributes* attrs = attributes[i];
        attrs.frame = elementLayout[i];
        [newAttributes addObject:attrs];    
    }
    return newAttributes;
}

But if i don’t subclass and try to make it with the standard delegate calls from UICollectionViewFlowLayout, then i get this:

See 3. in the link above

This scrolls correctly to the right, but with the wrong layout. What I expected, is that the cell with NSIndexPath [0, 1] will be on the right side of the “big” cell, and not under it. But even so, i would need the cell with NSIndexPath [0, 1] be aligned like in picture one.

Am I missing something here?

Answer 1

After a lot of trouble i eventually figured out, why the layout behaved strangely.

• When having multiple sections, you will need to change the x-origin of every item rect by a multiple of the views width.

• Even more interesting: If the UICollectionViewFlowLayout produces less cells than you anticipate, you one can override the indexPath of the UICollectionViewLayoutAttributes, to match the anticipated layout.

So the working configuration would be:

for(int i = 0; i < (countOfCellsAnticipated); i++) 
{
    UICollectionViewLayoutAttributes* attrs = attributes[i];

    NSIndexPath* anticipatedIndexPath = [NSIndexPath indexPathForItem:i
                                                            inSection:sectionIndex];

    attrs.indexPath = anticipatedIndexPath;
    attrs.frame = recalculatedFrameInAbsoluteViewCoordinates;
    [newAttributes addObject:attrs];    
}

return newAttributes;