Trying to fade in images loaded from URL asynchronously in XCode - objective-c

Question

I want to load images from a URL and then assign them as background images for different UIButtons. I need to do this when a view appears.
My problem is that when I try to make the images fade in when they are loaded, the animation does not start until all of the images have loaded. I think this is because the animation code is read but that before it has time to be executed, the program starts loading a new image.
How can I make images fade in one after the other?
The following code is used to get the image (calling downloadImageByPrice atURL) and then does the animation.
-(void) obtainImage:(int)i atURL:(NSString *)URLString{
UIImage *image = [self downloadImageByPrice:i atURL:URLString];
// Make images fade in when they have been found
[[_buttonArray objectAtIndex:i] setAlpha:0.0];
[[_buttonArray objectAtIndex:i] setImage:image forState:UIControlStateNormal];
[UIView beginAnimations:#"fadeIn" context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:0.8];
[[_buttonArray objectAtIndex:i] setAlpha:1.0];
[UIView commitAnimations];
}
This method is used to load all the images one after the other. I want my loop to wait until each image has appeared before starting to load the next one.
-(void) loadAllImagesAtURL:(NSString *)URLString{
for(int i =0; i<[_buttonArray count];i++){
[self obtainImage:i atURL:URLString];
}
}
I have tried using selectors, or the completion^ method with no luck, but my understanding of those concepts is still pretty low.
Thank you

Answer 1

Check this out:
ViewController.h
#import <UIKit/UIKit.h>
#interface ViewController : UIViewController
#property (strong, nonatomic) NSMutableArray *buttonArray;
-(void) loadAllImagesAtURL:(NSString *)URLString;
- (UIImage *)downloadImageAtURL:(NSString *)urlString;
#end
ViewController.m
#import "ViewController.h"
#implementation ViewController
#synthesize buttonArray = _buttonArray;
- (void)viewDidLoad {
[super viewDidLoad];
[self setButtonArray:[NSMutableArray array]];
int margin = 20;
int buffer = 8;
int width = 100;
int height = 50;
for (int i = 0; i < 4; i = i + 1) {
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setAlpha:0.0];
[btn setFrame:CGRectMake(margin + ((width + buffer) * i), margin, width, height)];
[btn setTitle:[NSString stringWithFormat:#"%d", i] forState:UIControlStateNormal];
[[self buttonArray] addObject:btn];
[[self view] addSubview:btn];
}
[self loadAllImagesAtURL:#"https://www.google.com/images/srpr/logo3w.png"];
}
-(void) loadAllImagesAtURL:(NSString *)URLString {
static int i = -1;
i = i + 1;
if (i < [[self buttonArray] count]) {
UIImage *image = [self downloadImageAtURL:URLString];
// Make images fade in when they have been found
[[_buttonArray objectAtIndex:i] setImage:image forState:UIControlStateNormal];
[UIView animateWithDuration:1.0
animations:^{
[[_buttonArray objectAtIndex:i] setAlpha:1.0];
}
completion:^(BOOL finished) {
[self loadAllImagesAtURL:URLString];
}
];
}
}
- (UIImage *)downloadImageAtURL:(NSString *)urlString {
NSURL *url = [NSURL URLWithString:urlString];
NSData *data = [NSData dataWithContentsOfURL:url];
UIImage *image = [UIImage imageWithData:data];
return image;
}
#end
For me, this creates 4 buttons (that are initially invisible) that fade in when the image is downloaded. Is this what you want?