UICollectionView (3x3 Grid) paging with static cell

Question

I have a UICollectionView in a 3x3 grid layout displaying images. The UICollectionView has "pagingEnabled" set to YES, inorder to "page" between pages with the 3x3 grid with 9 images. This has been accomplished using a custom UICollectionViewLayout:

@implementation HorizontalCollectionViewLayout

- (instancetype)init
{
    self = [super init];
    if (self) {
    }
    return self;
}

- (CGSize)collectionViewContentSize
{
    // We should return the content size. Lets do some math:

    NSInteger verticalItemsCount = (NSInteger)floorf(self.collectionView.bounds.size.height / self.itemSize.height);
    NSInteger horizontalItemsCount = (NSInteger)floorf(self.collectionView.bounds.size.width / self.itemSize.width);

    NSInteger itemsPerPage = verticalItemsCount * horizontalItemsCount;
    NSInteger numberOfItems = [self.collectionView numberOfItemsInSection:0];
    NSInteger numberOfPages = (NSInteger)ceilf((CGFloat)numberOfItems / (CGFloat)itemsPerPage);

    CGSize size = self.collectionView.bounds.size;
    size.width = numberOfPages * self.collectionView.bounds.size.width;
    return size;
}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    // Get all the attributes for the elements in the specified frame
    NSArray *allAttributesInRect = [super layoutAttributesForElementsInRect:rect];
    NSArray *attributesArray = [[NSArray alloc] initWithArray:allAttributesInRect copyItems:YES];

    NSInteger verticalItemsCount = (NSInteger)floorf(self.collectionView.bounds.size.height / self.itemSize.height);
    NSInteger horizontalItemsCount = (NSInteger)floorf(self.collectionView.bounds.size.width / self.itemSize.width);
    NSInteger itemsPerPage = verticalItemsCount * horizontalItemsCount;

    for (NSInteger i = 0; i < attributesArray.count; i++) {        
        UICollectionViewLayoutAttributes *attributes = attributesArray[i]; 
        NSInteger currentPage = (NSInteger)floor((double)i / (double)itemsPerPage);
        NSInteger currentRow = (NSInteger)floor((double)(i - currentPage * itemsPerPage) / (double)horizontalItemsCount);
        NSInteger currentColumn = i % horizontalItemsCount;
        CGRect frame = attributes.frame;
        frame.origin.x = self.itemSize.width * currentColumn + currentPage * self.collectionView.bounds.size.width;
        frame.origin.y = self.itemSize.height * currentRow;

        CGRect f = UIEdgeInsetsInsetRect(frame, UIEdgeInsetsMake(2, 2, 5, 2));

        attributes.frame = f;

    }
    return attributesArray;
}


@end

This is working as expected, as it creates a new page when the first page contains 9 images.

What I want to accomplish then, is to create a static / fixed "next page" button in the right bottom corner of grid at index 8, 17, 26, 35 ... based on the number of pages. (A button at index 8 if the collectionview only has 1 page, a button at index 8 and index 17 if the collectionview only has 2 pages ... and so on). Number of images and pages can vary based on how many images the user uploads to the app.

The following picture illustrates the idea:

Any tips on how I can accomplish this? What logic should go into "collectionView:itemForIndexPath:" ?

Answer 1

In your cellForItemAtIndexPath look at the indexPath.item for the number you are interested in replacing and return a collection view cell for your [ > ] button.

The way the collection view works is that you are never really concerned with the visible cells on the screen (your UICollectionViewLayout is handling that). You are only returning a cell for the indexPath you are given.

Create a dedicated UICollectionViewCell subclass just for this [ > ] cell with its own reuse identifier. It will simplify your code and you don't need to touch your current image cells.