Collection view scroll with animation causing wrong image positions - ios

Question

I have to reload the data in the collection view, in order to set a new cells sizes according to the new data source .
Than i have to scroll to the start, and i would like to do that with animation .
every row has 1 cell in it .
So, using this :
[self.collectionView reloadData];
[self.collectionView setContentOffset:CGPointZero animated:YES];
Whats happens is that it scrolls to the start, and reloaded, but when he comes to image 1 , than i see many images replaced fast, and it stopes on some image that is not belong to the first cell, but to other cell .
If i scroll to the start- without animation (animated:NO) its not happens .
I need that animation.
What could cause this problem ?
EDIT:
I can see a similar problem when i scroll fast ,i can see images that are changing very fast in their cells before they turned to the final image that should be loaded.

Answer 1

I think i solve the problem, or improved things a lot .
Well when you start downloading from the net, give your block a tag :
- (void)downloadImageWithURL:(NSURL *)url AndTag:(int)Gtag completionBlock:(void (^)(BOOL succeeded, NSData *data,int tag))completionBlock
{
NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url];
int thetag=Gtag;
[NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *error)
{
if (!error)
{
completionBlock(YES, data,thetag);
}
else
{
completionBlock(NO, nil,thetag);
}
}];
}
Than, when the download complete, we will check if the cell is on screen right now , if its not, we will not load its image to the cell :
[self downloadImageWithURL:url AndTag:(int)cell.tag completionBlock:^(BOOL succeeded, NSData *data,int tag)
{
BOOL isvisible=0;
for (iPhoneCostumCell *tcell in [self.collectionView visibleCells])
{
if(tcell.tag==tag)
{
isvisible=1;
break;
}
}
I think this is a good solution , and it makes things more stable . It also makes the processor work less, because if we dont find the image, we dont continue to the NSData conversion-made in another thread .

Answer 2

The problem is that cells are reused,
So let's see this example
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:#"YourCellId"];
cell.image = nil;
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), ^{
UIImage *image = [self imageForIndexPathRow:#(indexPath.row)];
dispatch_async(dispatch_get_main_queue(), ^{
cell.image = image;
});
});
return cell;
}
As the operations are asynchronous, scrolling fast will cause to dispatch 2 operations for 1 cell.
For example lets name some cell pointer "ImageCell-1"
Now lets see, what will be, if you start fast scrolling, and 2 operations are dispatched.
First operation loads "a.png", and download is active, you scroll fast and "ImageCell-1" is now being loaded "b.png" (but "a.png" is still loading).
So "a.png" completes download and is set to "ImageCell-1", then completes "b.png" and is set to "ImageCell-1".
(this is the issue that you see => "I can see a similar problem when i scroll fast ,i can see images that are changing very fast in their cells before they turned to the final image that should be loaded.")
But also can be situation (when you use "high level libraries" like AFNetworking, when queues are managed by them, and concurrency downloading is available) "b.png" completes download and sets it to "ImageCell-1", after that completes "a.png" download and set to "ImageCell-1". This will cause to see is "a.png" instead of "b.png".
The solution is to cancel download operation, before starting new one, if you are using AFNetworking, keep NSOperations, and call [operation cancelOperation]; before starting new download.
EDIT:
If you're using NSURLConnection, you need to switch to modern way of using NSURLSession (to support request canceling).
Here I have wrote a small method, which resolves your problem
#interface MyCell ()
#property (strong, nonatomic) NSURLSessionDataTask *dataTask;
#end
- (void)loadImageFromPath:(NSString *)aPath
availableCache:(NSCache *)aCache
{
if (self.dataTask) {
[self.dataTask cancel];
}
NSData *cache = [aCache objectForKey:aPath];
if (cache) {
self.image = [UIImage imageWithData:cache];
return;
}
self.dataTask = [[NSURLSession sharedSession] dataTaskWithURL:[NSURL URLWithString:aPath]
completionHandler:^(NSData *data,
NSURLResponse *response,
NSError *error)
{
if (data) {
self.image = [UIImage imageWithData:data];
self.dataTask = nil;
// Add to cache
[aCache setObject:data forKey:aPath];
}
}];
[self.dataTask resume];
}
Place this method in your Cell,
And call it from cellForRow, like this
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:#"YourCellId"];
[cell loadImageFromPath:imagePath availableCache:self.cache];
return cell;
}

Answer 3

[UIView animateWithDuration:1.0 delay:0.0 options: UIViewAnimationOptionCurveEaseIn animations:^{
[self.collectionView setContentOffset:CGPointZero animated:NO];
} completion:nil];
}];
Try to make your own animation.