UICollectionView shows only the first item

Question

I'm working on a project similar to a video album. In that I'm using UICollectionView to display the thumb images of those videos. The worst part is that I should not use storyboard or xib files. I have tried to do this programatically. I'm currently working on this code:

- (void)viewDidLoad
{
    i = 0;

    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    [layout setItemSize:CGSizeMake(self.view.frame.size.width/2.5,self.view.frame.size.width/2.5)];

    collectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];
    [collectionView setDataSource:self];
    [collectionView setDelegate:self];
    collectionView.backgroundColor = [UIColor whiteColor];
    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"MyCell"];

    [self.view addSubview:collectionView];

    [super viewDidLoad];
}

I have given 1 for return in numberOfSectionsInCollectionView and [myArray count] for return in numberOfItemsInSection.

-(UICollectionViewCell *) collectionView:(UICollectionView *)cV cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
   UICollectionViewCell *cell = [cV dequeueReusableCellWithReuseIdentifier:@"MyCell" forIndexPath:indexPath];
    cell.backgroundColor = [UIColor blackColor];

    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(cell.frame.origin.x , cell.frame.origin.y, cell.frame.size.width, (cell.frame.size.height - cell.frame.size.height/3))];

    cell.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(cell.frame.origin.x , cell.frame.origin.y, cell.frame.size.width, (cell.frame.size.height - cell.frame.size.height/3))];

    imageView.image = [UIImage imageNamed:[storeData objectAtIndex:i]];

    [cell addSubview:imageView];

    i++;

    return cell;
}

I have rechecked the images in myArray. When the view loads, the collection view shows only the first image. Other 4 cells are empty. What is wrong with my code?

Answer 1

You do not need a counter. As indicated by Wain, use indexPath.row.

Importantly, you should not create new subviews in cellForItemAtIndexPath, but rather use this method to fill them appropriately with content. You could put the image views into your storyboard prototype cells and identify them with tags. Each cell returned from dequeueReusableCellWithReuseIdentifier will already contain the image view.

Answer 2

For those who is experiencing this problem, frame is the key. I've encountered this and changed:

cell.imageView.frame = cell.frame;

into

cell.imageView.frame = cell.bounds;

The op is using:

cell.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(cell.frame.origin.x , cell.frame.origin.y, cell.frame.size.width, (cell.frame.size.height - cell.frame.size.height/3))];

That's why this happened.

Answer 3

you should never create ui elements in cellForRowAtIndexPath:. Subclass a collection view cell like so:

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        NSLog(@"INIT WITH FRAME FOR CELL");
        //we create the UIImageView here
        imageView = [[UIImageView alloc] init];
        imageView.contentMode = UIViewContentModeScaleAspectFill;
        imageView.frame = CGRectMake(cell.frame.origin.x , cell.frame.origin.y, cell.frame.size.width, (cell.frame.size.height - cell.frame.size.height/3));
        [self.contentView addSubview:imageView]; //the only place we want to do this addSubview: is here!
    }
    return self;
}

Then add that subclassed cell as a property and alter this code:]

[collectionView registerClass:[customCellClass class] forCellWithReuseIdentifier:@"MyCell"];

The perform these changes:

-(customCellClass *) collectionView:(UICollectionView *)cV cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
   UICollectionViewCell *cell = (customCellClass *)[cV dequeueReusableCellWithReuseIdentifier:@"MyCell" forIndexPath:indexPath];

    cell.backgroundColor = [UIColor blackColor];

    imageView.image = [UIImage imageNamed:[storeData objectAtIndex:indexPath.row]];

    return cell;
}

A final adjustment would be to move the the [super viewDidLoad] to this:

- (void)viewDidLoad
{
     [super viewDidLoad];
     //insert the rest of the code here rather than before  viewDidLoad
}

Answer 4

You shouldn't be using i as a counter. The whole point of the delegate method sending you an indexPath is that it tells you what information to get from your array of source data. So, remove i and use the indexPath.row instead.

You also don't need 2 image views. But you should probably keep your special subview and not use the cells built in image view.