UICollectionViewCell disappears while scrolling

Question

I'm using a uicollectionview to create a carousel like scroll view. I think the uicollectionview is the best approach with this use case. I was able to render uicollectionviewcell inside uicollectionview but the problems is, when I scroll the uicolectionview the later cells will disappear and all the cells went black in the end. Another issue is that the cell is not loaded until it's boundary is fully inside the Carousel.

this is how I set up my uicollectionviewcell inside cellForItemAtIndexPath delegate method

NSString *urlString = [NSString stringWithFormat:BASE_URL, panoid, heading, pitch];
NSURL *panoUrl = [NSURL URLWithString:urlString];

//WIDTH calculated based on screen size, roughly about three cells per screen.
CGFloat WIDTH = collectionView.frame.size.width / 3;

UIImageView *panoImg = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, 133.3)];
// add padding to imageview
panoImg.bounds = CGRectInset(panoImg.frame, 2, 2);
// do I need GCD to do async process here? the images are all loaded from urls. not sure if this will cause a problem.
dispatch_async(dispatch_get_global_queue(0, 0), ^{
    NSData *data = [NSData dataWithContentsOfURL:panoUrl];
    dispatch_async(dispatch_get_main_queue(), ^{
        [panoImg setImage:[UIImage imageWithData:data]];
    });
});
seeInsideCollectionViewCell *cell = [_panoCarousel dequeueReusableCellWithReuseIdentifier:@"panoCarouselCell" forIndexPath:indexPath];
cell.frame = CGRectMake(indexPath.item * WIDTH + 4, 0, WIDTH, 133.3);
cell.backgroundColor = [UIColor blackColor];
[cell addSubview: panoImg];

UILabel *label = [[UILabel alloc] initWithFrame: CGRectMake(4, 4, WIDTH, 15)];
[label setBackgroundColor: [UIColor colorWithRed:0.63 green:0.63 blue:0.63 alpha:0.5]];
[label setFont: [UIFont fontWithName:@"Roboto-Light" size:10.0]];
[label setText: _BussinessViewsNames[indexPath.item]];
[cell addSubview:label];

return cell;

any suggestions, the cells were all loaded, just the loading is not seamless and smooth, I've attached a gif to demonstrate the problem here.

enter image description here

You're correct to use GCD for the fetching. The collection view's layout should be setting the cell's position & size, so you should omit the line starting cell.frame = .... If you're still having issues, tell use about the layout you're using, and if you're doing anything special inside the cell subclass. — Graham Perks
By the way, if you remove the images, you will start to see a lot of your labels overlapping in each cells while scrolling. You're not supposed to "add" views to your cell in the cellForItemAtIndexPath. You should subclass UICollectionviewcell — Kujey

Misha Vyrko Misha Vyrko · Accepted Answer · 2015-02-16T19:22:12

remove this line due to you should not change frame for cell

cell.frame = CGRectMake(indexPath.item * WIDTH + 4, 0, WIDTH, 133.3);

When cell reusable, it already has uiimageview, and you again create new uiimageview and add it than cell will be has several uiimageviews as subview

Move load images in another class or method like

self.imageLoader

 -(void)loadImageWithURL:(NSURL *)url successBlock:(void (^)(UIImage *image, id itemId))successBlock failureBlock:(void (^)(NSError *error))failureBlock

and call it in cellForItem method (check id of gotten image)

UICollectionViewCell disappears while scrolling

1 Answers