UISegmentedControl with two UICollectionViews to display images. MULTITHREADING - ios

Question

So my goal is to create something like this:
My problem is when I switch between segments, I would like to show a UIActivityViewIndicator spinning, as it takes some time to load the images (stored locally so in theory this should be much faster...). But the thread seems to be getting back before switching to the new cells' images.
What am I doing wrong?
Here is my code:
- (void)reloadCollection {
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{
[_myCollection reloadData];
[_myCollection layoutIfNeeded];
dispatch_async(dispatch_get_main_queue(), ^{
_spinnerView.hidden = YES;
});
});
}
- (IBAction)segmentedControlSwitched:(id)sender{
_spinnerView.hidden = NO;
[self reloadCollection];
}
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
if ([_mySegmentedControl selectedSegmentIndex] == 0){
return [_photosTaken count];
}else
return [_photosTagged count];
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell *cell;
UIImageView *imageView;
if ([_mySegmentedControl selectedSegmentIndex] == 0){
cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cell" forIndexPath:indexPath];
imageView = [[UIImageView alloc] initWithImage:[_photosTaken objectAtIndex:indexPath.row]];
}
else
{
cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cell1" forIndexPath:indexPath];
imageView = [[UIImageView alloc] initWithImage:[_photosTagged objectAtIndex:indexPath.row]];
}
imageView.frame = cell.frame;
[cell setBackgroundView:imageView];
return cell;
}
Thanks,
João Garcia.

Answer 1

You can't call UIKit operations on a background thread, unless the documentation explicitly states that you can.
In any case, your problem is not one that should be solved simply by throwing things on a background thread.
You say yourself, for some reason the loading thread is taking too long. Why not use the time profiler in instruments to find out why?
You'll probably find that the issue is that you are creating a brand new image view every time and adding it as the cells background view.
Creating, adding and removing views is an expensive operation that should not be performed while scrolling. Your custom collection view cells should already have an image view, which you've added in the storyboard or a custom init method, and created an outlet or property for. It's very unusual not to use a subclassed cell, since the base cell has nothing in the content view.
When populating the cell, just set the image view's image property to your stored image. This should be fast enough that you don't need a spinner.
From your comments, it sounds like you also have these problems:
you are using images that are far too large. For display in a list you must use appropriately sized thumbnail images
you are performance testing on the simulator. This is irrelevant to real-life app performance on a device. The memory situation is completely different and the speed of things can be faster or slower depending on the operation (usually, CPU-based is faster, but GPU-based is slower).

Answer 2

dispatch_get_global_queue get a concurrent dispatch queue in which multiple tasks are run parallel. It is a background queue, UI updating should be performed on mainQueue, so [_myCollection layoutIfNeeded] should be moved into dispatch_async(dispatch_get_main_queue(),
updating UI on concurrent background queue will cause weird behaviour such as pausing or freezing.
And you can try this.
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{
// do time consuming things here
dispatch_sync(dispatch_get_main_queue(), ^{
[self.collectionView reloadData];
});
dispatch_sync(dispatch_get_main_queue(), ^{
[self.activityView stopAnimating]; // after collectionView is updated
});
});

Answer 3

Instead of dispatch_async, try using dispatch_sync for _spinnerView.hidden = YES; on the main queue.

Answer 4

It seems that the issue here was the size of the photos as #jrturton mentions in his answer.
I shortened the size (to about 10s of KBs) and it works smoothly.