Wrong cells returned when dequeuing in custom UICollectionView

Question

I'm building an UICollectionView with a custom layout.

The layout is 3x4 with horizontal scrolling. I got the layout of the cells and the page scrolling working just fine.

My expected result is something like this:

(available at http://www.tinyuploads.com/images/0EVQnT.png )

However, when scrolling it seems the wrongs cells are being dequeued, and instead my actual result is this:

(available at http://www.tinyuploads.com/images/8lvJId.png )

Furthermore, when I scroll back to first page "A" is no longer in the first position.

My datasource and delegate methods looks like this:

#pragma mark - UIViewController Life Cycle

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.collectionView.backgroundColor = [UIColor colorWithWhite:0.25f alpha:1.0f];
    self.alphabet = [NSMutableArray arrayWithObjects:@"A", @"B", @"C", @"D", @"E", @"F", @"G", @"H", @"I", @"J", @"K", @"L", @"M", @"N", @"O", @"P", @"Q", @"R", @"S", @"T", @"U", @"V", @"X", @"Y", @"Z", nil];
    self.colors = [NSMutableArray arrayWithObjects:[UIColor colorWithRed:(135/255.0) green:(175/255.0) blue:(88/255.0) alpha:1], [UIColor colorWithRed:(65/255.0) green:(124/255.0) blue:(185/255.0) alpha:1], [UIColor colorWithRed:(201/255.0) green:(189/255.0) blue:(64/255.0) alpha:1],  nil];

    [self.collectionView reloadData];
}


#pragma mark - UICollectionView datasource

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return self.alphabet.count;

}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    NSString *title = [self.alphabet objectAtIndex:indexPath.row];
    UIColor *backgroundColor = [self.colors objectAtIndex:indexPath.row % 3];

    CategoryCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CategoryCellIdentifier forIndexPath:indexPath];

    cell.title.text = title;
    cell.backgroundColor = backgroundColor;
    [cell setNeedsLayout];

    return cell;

}

#pragma mark - UICollectionViewDelegate

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

    NSLog(@"You touched: %d", indexPath.row);
}

I'm in doubt of as how I should be thinking of sections. As you see here I have just one section containing all my items (contents of the alphabet).

Any help is highly appreciated.

Answer 1

WFrom what I can tell it looks like the subclass may not have been implemented correctly. Here is an example using the built in Horizontal Flow Layout that you can use to modify your code.

Note: This example assumes you have setup the correct size in the storyboard and you will have 3 columns by 4 rows.

@interface ViewController ()
@property (nonatomic, strong) NSMutableArray* alphabet;
@property (nonatomic, strong) NSMutableArray* colors;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.collectionView.backgroundColor = [UIColor colorWithWhite:0.25f alpha:1.0f];
    self.alphabet = [NSMutableArray arrayWithObjects:@"A", @"B", @"C", @"D", @"E", @"F", @"G", @"H", @"I", @"J", @"K", @"L", @"M", @"N", @"O", @"P", @"Q", @"R", @"S", @"T", @"U", @"V", @"W", @"X", @"Y", @"Z", nil];
    self.colors = [NSMutableArray arrayWithObjects:[UIColor colorWithRed:(135/255.0) green:(175/255.0) blue:(88/255.0) alpha:1], [UIColor colorWithRed:(65/255.0) green:(124/255.0) blue:(185/255.0) alpha:1], [UIColor colorWithRed:(201/255.0) green:(189/255.0) blue:(64/255.0) alpha:1],  nil];

    [self.collectionView reloadData];
}
#pragma mark - UICollectionView datasource

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    // Full pages
    NSInteger count = self.alphabet.count /12 + (self.alphabet.count % 12 > 0 ? 1 : 0);
    count *= 12;
    return count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{


    NSInteger row = indexPath.row % 4;
    NSInteger col = indexPath.row / 4;
    NSInteger page = col /3 * 12;
    col = col % 3;
    NSInteger ii = row*3+col + page;

    NSString *title = ii >= self.alphabet.count ? nil : [self.alphabet objectAtIndex:ii];
    UIColor *backgroundColor = [self.colors objectAtIndex:col];

    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
    UILabel* label = (UILabel*)[cell viewWithTag:1]; // label added in storyboard
    label.text = title;
    cell.backgroundColor = backgroundColor;
    [cell setNeedsLayout];
    cell.hidden = title == nil;
    return cell;

}

#pragma mark - UICollectionViewDelegate

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

    NSLog(@"You touched: %d", indexPath.row);
}
@end