UICollectionView loading image only on Scroll

Question

Im having a hard time to make UICollectionView Images load after data getting parsed.

This is a LazyTable solution from Apple , and everythings work on tableview but for

CollectionView Image only apear if i scroll. the other data like label or other apears on

Cell without problem only Images gives me a trouble.

here is a reload method inside my delegate :

    __block ParseOperation *weakParser = parser;

    parser.completionBlock = ^(void) {
        if (weakParser.appRecordList) {
            dispatch_async(dispatch_get_main_queue(), ^{
                CategroyScreenViewController *rootViewController = (CategroyScreenViewController*)[(UINavigationController*)self.window.rootViewController topViewController];

                rootViewController.entries = weakParser.appRecordList;
               [rootViewController.collectionView reloadData];
            });
        }
        self.queue = nil;
    };

    [self.queue addOperation:parser]; 
    self.appListData = nil;
}

and this is my CategroyScreenViewController that contain collectionview :

#define kCustomRowCount     7

@interface CategroyScreemViewController () <UIScrollViewDelegate>
@property (nonatomic, strong) NSMutableDictionary *imageDownloadsInProgress;
@property (nonatomic) NSMutableArray* numbers;
@end
int num = 0;
@implementation CategroyScreemViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
     NSLog(@"view did load");
    [super viewDidLoad];
    self.imageDownloadsInProgress = [NSMutableDictionary dictionary];
    [self.collectionView reloadData];


}

- (CGSize) blockSizeForItemAtIndexPath:(NSIndexPath *)indexPath {


     NSLog(@"Asking for index paths of non-existant cells!! %d", indexPath.row);

    if (indexPath.row == 0) return CGSizeMake(2, 2);    
    return CGSizeMake(1, 1);
}
- (void) viewDidAppear:(BOOL)animated {
     NSLog(@"viewDidAppear load");
    [self.collectionView reloadData];
}
- (UIEdgeInsets)insetsForItemAtIndexPath:(NSIndexPath *)indexPath {
      NSLog(@"insetsForItemAtIndexPath load");
    return UIEdgeInsetsMake(2, 2, 2, 2);
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    NSArray *allDownloads = [self.imageDownloadsInProgress allValues];
    [allDownloads makeObjectsPerformSelector:@selector(cancelDownload)];

    [self.imageDownloadsInProgress removeAllObjects];
}
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    NSLog(@"numberOfSectionsInCollectionView load");
    return 1;
}

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    NSUInteger count = [self.entries count];
      NSLog(@"numberOfItemsInSection load");
    if (count == 0)
    {
        return kCustomRowCount;
    }
    return count;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CategoryScreenCell *myCell = [collectionView dequeueReusableCellWithReuseIdentifier:@"MyCell" forIndexPath:indexPath];
    UILabel *label = (UILabel *)[myCell.contentView viewWithTag:10];
    NSUInteger nodeCount = [self.entries count];
    if (nodeCount > 0)
    {
        AppRecord *appRecord = [self.entries objectAtIndex:indexPath.row];
        [label setText:appRecord.appName];
        if (!appRecord.appIcon)
        {

            if (self.collectionView.dragging == NO && self.collectionView.decelerating == NO)
            {

                [self startIconDownload:appRecord forIndexPath:indexPath];
            }
            myCell.imageView.image = [UIImage imageNamed:@"Placeholder.png"];
        }
        else
        {

            myCell.imageView.image = appRecord.appIcon;
        }

    }

    return myCell;
}
- (UIColor*) colorForNumber:(NSNumber*)num {
    return [UIColor colorWithHue:((19 * num.intValue) % 255)/255.f saturation:1.f brightness:1.f alpha:1.f];
}
- (void)startIconDownload:(AppRecord *)appRecord forIndexPath:(NSIndexPath *)indexPath
{
    IconDownloader *iconDownloader = [self.imageDownloadsInProgress objectForKey:indexPath];
    if (iconDownloader == nil)
    {
        iconDownloader = [[IconDownloader alloc] init];
        iconDownloader.appRecord = appRecord;
        [iconDownloader setCompletionHandler:^{

            CategoryScreenCell *myCell = [self.collectionView dequeueReusableCellWithReuseIdentifier:@"MyCell" forIndexPath:indexPath];
            myCell.imageView.image = appRecord.appIcon;
            myCell.imageView.layer.masksToBounds = YES;
            [self.imageDownloadsInProgress removeObjectForKey:indexPath];

        }];
        [self.imageDownloadsInProgress setObject:iconDownloader forKey:indexPath];
        [iconDownloader startDownload];
    }
}
- (void)loadImagesForOnscreenRows
{
     NSLog(@"loadImagesForOnscreenRows");
    if ([self.entries count] > 0)
    {
        NSArray *visiblePaths = [self.collectionView indexPathsForVisibleItems];
        for (NSIndexPath *indexPath in visiblePaths)
        {
            AppRecord *appRecord = [self.entries objectAtIndex:indexPath.item];

            if (!appRecord.appIcon)
                // Avoid the app icon download if the app already has an icon
            {
                [self startIconDownload:appRecord forIndexPath:indexPath];
            }
        }
    }
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    NSLog(@"scrollViewDidEndDragging");

    if (!decelerate)
    {
        NSLog(@"decelerate");
        [self loadImagesForOnscreenRows];
    }
}


- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    NSLog(@"scrollViewDidEndDecelerating");
    [self loadImagesForOnscreenRows];
}

@end

Ok after Ive changed this :

        CategoryScreenCell *myCell = [self.collectionView dequeueReusableCellWithReuseIdentifier:@"MyCell" forIndexPath:indexPath];

to this one :

    CategoryScreenCell *myCell = [self.collectionView cellForItemAtIndexPath:indexPath];

programs works well , but it gives me this warning : "Incompatible pointer types initializing 'CategoryScreenCell *' with an expression of type 'UICollectionViewCell *'

Answer 1

The problem I see with this approach is that in your IconDownloader's completion handler, you're always dequeuing a cell and populating it, even if it's not visible and may not be displayed. I'm not sure how much overhead that is--it depends how many cells you have and how quickly people are likely to scroll.

One alternative would be to post a notification in the completion handler, which all cells would register for. In the method that's invoked when the notification occurs, the cell would check whether the AppRecord in the notification's userInfo is for the current cell, and would update its image.

The other problem is that you queue up an image download for every cell you scroll past, so if the user quickly scrolls to the bottom of the collection view, they have to wait for all of the images above to load first. You could resolve this in a couple of ways:

1) Give the cell a reference to the IconDownloader when you dequeue it. Then in the cell's prepareForReuse, cancel the download if still pending.

2) If you don't want to cancel the pending downloads, but want to make sure the visible cells are updated as quickly as possible, you could put your downloads in a priority queue, and increment the priority on each new IconDownloader instance.

Answer 2

You can get rid of the warning by just casting the cell type, assuming you know it's going to be of the required type:

CategoryScreenCell *myCell = (CategoryScreenCell *)[self.collectionView cellForItemAtIndexPath:indexPath];