UICollectionView images not showing

Question

I have an issue with the images not showing, even though they are loading. I have tried this several different ways and the same result... no images. I do get white rectangles that are the size and color specified in the Storyboard. I get the correct number of rectangles in the popover. The log shows the names and ids correctly.

If I call the array directly, I get the same result... white rectangles.

My target is iOS7. Running Xcode 5.0.2. Images are coming from a SQL database. This is a live app, which I am updating to full iOS7 and where I am swapping out a custom grid layout for UICollectionView. Using a CollectionViewController, embedded into a NavigationController, which is accessed via a UIButton. As you can see, there is no custom cell. The images are to show in a popover and are then selectable by the user to change the background of the underlying view.

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

    NSDictionary * tempDict = [_arrayOfBckgnds objectAtIndex:indexPath.row];
    NSNumber *buttonTagNumber = (NSNumber *)[tempDict objectForKey:@"id"];
    int buttonTag = [buttonTagNumber intValue];
    NSString *tempImage = [tempDict objectForKey:@"fileName"];

    NSLog(@"Filename: %@", tempImage);
    NSLog(@"ButtonTagNumber: %@", buttonTagNumber);
    UIImageView *image = [[UIImageView alloc]init];
    image.image = [UIImage imageNamed:tempImage];
    NSLog(@"Image.image: %@", image.image);

    // needed for selecting the background in didSelectItemAtIndexPath
    _bgtag = buttonTag;

    return cell;
}

The fix which includes actually naming the BackgroundCell (duh) in the cellForItemAtIndexPath method and creating a small method in the BackgroundCell controller to set the image.

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

    NSDictionary * tempDict = [_arrayOfBckgnds objectAtIndex:indexPath.row];
    NSNumber *buttonTagNumber = (NSNumber *)[tempDict objectForKey:@"id"];
    int buttonTag = [buttonTagNumber intValue];
    NSString *tempImage = [tempDict objectForKey:@"fileName"];

    [cell setImage:[UIImage imageNamed:tempImage]];

    // needed for selecting the background in didSelectItemAtIndexPath
    _bgtag = buttonTag;

    return cell;
}

The main cell code;

- (id)initWithFrame:(CGRect)frame
{
    _backgroundImage = [[UIImageView alloc] initWithFrame:self.contentView.bounds];

    [self.contentView addSubview:_backgroundImage];
    if (self) {
        // Initialization code
    }
    return self;
}

-(void)setImage:(UIImage *)image
{
    _backgroundImage.image = image;
}

Answer 1

The problem is that the image is not being set in the cell's view hierarchy. To do that, subclass UICollectionViewCell and create a imageView property in the subclass:

@interface CollectionViewCellSubclass : UICollectionViewCell
@property (nonatomic, strong) UIImageView *imageView;
@end

...and init the UIImageView in its initWithFrame:

_imageView = [[UIImageView alloc] initWithFrame:self.contentView.bounds];
[self.contentView addSubview:_imageView];

Set this subclass as the Custom Class for the cell in storyboard and then load it in the collectionView:cellForItemAtIndexPath method above setting the image to the cell's image subview:

CollectionViewCellSubclass *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"BckgndCell" forIndexPath:indexPath];

//...

cell.imageView.image = [UIImage imageNamed:tempImage];

Hope this helps.

Answer 2

Adding cell.contentView.frame = [cell bounds] after the line dequeueReusableCellWithReuseIdentifier worked for me.

Suppose you add a custom (200,200) UICollectionViewCell through xib and change its frame somewhere in the code to be e.g. (120,120). You have to set its content view’s frame accordingly, otherwise image on its imageView (which is on its content view) will not be shown properly.