Question

Hello I have a problem that I would greatly appreciate any help if possible. I have an app that has a UICollectionView which uses a UICollectionViewCell that has an UIImageView inside of it. This image view is supposed to be set each time the cell is generated with it’s appropriate image. However the image does not come out, if I do an initWithImage on the image view with the data of the image that i’m trying to set works but then each time the cell is reused that new image view stays there.

Here is the code:

@interface collectionViewController : UICollectionViewController

    @property (strong, nonatomic) IBOutlet UICollectionView *collectionView; 
    @property (strong, nonatomic) NSMutableArray *imageURLs;

@end

@interface collectionViewController () 
    @property (strong, nonatomic) UIImage *cachedImage;

@end


@implementation collectionViewController

@synthesize imageURLs = _imageURLs; @synthesize cachedImage =_cachedImage;

- (void)viewDidLoad {
    [super viewDidLoad];    // Do any additional setup after loading the view.
     // Register reusable cell for controller
    [self.collectionView registerClass:[collectionViewCell class]  forCellWithReuseIdentifier:@"Image Cell"];

    //Set url for images
    _imageURLs = [@[@"http://www.bestcssvault.com/installation/wpcontent/themes/cssvault/gallery/2012/02/daniel_designer-265x180.jpg",
                @"http://www.bestcssvault.com/installation/wp-content/themes/cssvault/gallery/2012/02/595x400hngry-265x180.png",
                @"http://www.bestcssvault.com/installation/wp-content/themes/cssvault/gallery/2012/02/licron-265x180.jpg",
                @"http://www.bestcssvault.com/installation/wp-content/themes/cssvault/gallery/2012/02/media-265x180.jpg",
                @"http://www.bestcssvault.com/installation/wp-content/themes/cssvault/gallery/2012/02/alio-265x180.jpg",
                @"http://www.bestcssvault.com/installation/wp-content/themes/cssvault/gallery/2012/02/zdravkomecava-265x180.jpg",
                @"http://www.bestcssvault.com/installation/wp-content/themes/cssvault/gallery/2011/12/guidepiscine_dot_com-265x180.jpg",
                @"http://www.bestcssvault.com/installation/wp-content/themes/cssvault/gallery/2011/12/web6-265x180.jpg",
                @"http://www.bestcssvault.com/installation/wp-content/themes/cssvault/gallery/2011/12/CSSVault_Transics-thumb-265x180.jpg",
                @"http://www.bestcssvault.com/installation/wp-content/themes/cssvault/gallery/2011/12/screen3-265x180.jpg",
                @"http://www.bestcssvault.com/installation/wp-content/themes/cssvault/gallery/2011/12/divaoffice595x400-265x180.jpg",
                @"http://www.bestcssvault.com/installation/wp-content/themes/cssvault/gallery/2011/12/screenshot-265x180.jpg"] mutableCopy]; }

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

    -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
        return _imageURLs.count; 
    }

    -(collectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
        static NSString *cellIdentifier = @"Image Cell";
        collectionViewCell *imageCollectionCell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
        int row = [indexPath row];

        if(imageCollectionCell.imageCollectionView) NSLog(@"worked at %d", row);

        //Get Image Data
        NSURL * imageURL = [NSURL URLWithString:_imageURLs[row]];

        dispatch_queue_t downloadQueue = dispatch_queue_create("image downloader", NULL);
        dispatch_async(downloadQueue, ^{
        NSData * imgData = [NSData dataWithContentsOfURL:imageURL];
        dispatch_async(dispatch_get_main_queue(), ^{
            UIImage * imageCompleted = [UIImage imageWithData:imgData];
            imageCollectionCell.inspirationImage = imageCompleted;
            //imageCollectionCell.imageCollectionView.image = imageCompleted;
            //NSLog(@"width = %f, height = %f", imageCompleted.size.width, imageCompleted.size.height);
        });
    });
    imageCollectionCell.backgroundColor = [UIColor grayColor];    //dispatch_release(downloadQueue);

    return imageCollectionCell; 
}
@end

@interface collectionViewCell : UICollectionViewCell 
    @property (weak,nonatomic) IBOutlet UIImageView *imageCollectionView; 
    @property (weak,nonatomic) UIImage *inspirationImage; 
@end

@implementation collectionViewCell 
    @synthesize imageCollectionView =_imageCollectionView; 
    @synthesize inspirationImage = _inspirationImage;

-(void)setImageCollectionView:(UIImageView *)imageCollectionView{
    //imageCollectionView = [[UIImageView alloc] initWithFrame:self.frame];
    //[self.contentView addSubview:imageCollectionView];
    if(!_imageCollectionView){
         _imageCollectionView = imageCollectionView;
    }
    _imageCollectionView.image = _inspirationImage; }

-(void)setInspirationImage:(UIImage *)inspirationImage {
    if(!_inspirationImage){
        _inspirationImage = inspirationImage;
    }
    //_imageCollectionView.image = inspirationImage;
    self.imageCollectionView.image = _inspirationImage; }


- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        self.backgroundColor = [UIColor whiteColor];
    }
    return self; 
}

- (void)prepareForReuse {
    [super prepareForReuse];
    //_inspirationImage = [[UIImage alloc] init]; 
}


/* // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code 
}
*/
@end

Any help will be greatly appreciated it 🙂

Answer 1

The problem is in UIImageView. If ImageView has nil image when the cell has been presented it will not be shown when you set image. There are 2 solutions.
1) Set default image when you create cell.

static NSString *cellIdentifier = @"Image Cell";
collectionViewCell *imageCollectionCell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
UIImage * placeholderImage = [UIImage imageNamed:@"placeholder"];
imageCollectionCell.inspirationImage = placeholderImage;

2) Call setNeedsLayout on cell after updating image.

 dispatch_async(dispatch_get_main_queue(), ^{
            UIImage * imageCompleted = [UIImage imageWithData:imgData];
            imageCollectionCell.inspirationImage = imageCompleted;
[cell setNeedsLayout];