ImageView Workshop 4

In the UIImageViewControl Workshop 2, you learned how to fetch a single image from the web, then display it in an ImageView control. In this workshop you will learn how to animate several images in an imageView control.

Understanding The Image Animation Process

Currently the SecondViewController user interface look image (a) below. When the operator click the Start button, code in button’s startButtonTapped method will do tasks laid out in the pseudocode shown below, resulting in output shown in image (b). The web addresses you see in the textView control point to images that are rotated in the imageView control.

StartButtonTapped Pseudocode

(a)	(b)

In addition to placing code in the StartButtonTapped method, we will have to add code in the viewDidLoad method as well. Here is a pseudocode of the method’s code.

StartButtonTapped Pseudocode

The first thing I want you to do is click the SecondViewController.xib file and remove the checkmark from the textView control’s User Interaction Enabled checkbox. Do the same for the FirstViewController’s textView control.

Now, add code shown below in the SecondViewController class.

@property (strong, nonatomic) NSArray *imagesFromServer;

- (void)viewDidLoad
{
	[super viewDidLoad];
	// Initialize the NSArray object
	self.imagesFromServer = @[@"http://alturl.com/g2qf2",
	@"http://alturl.com/stnft",
	@"http://alturl.com/3p9nr",
	@"http://alturl.com/smhdi",
	@"http://alturl.com/vyjvu",
	@"http://alturl.com/eo6z6"];

	// Create and initialize a mutable array
	NSMutableArray *imageObjects = [[NSMutableArray alloc] init];

	// Loop through the mutable array
	for (NSString *object in self.imagesFromServer) {
		// Get each image from the server and place it in the mutable array, imageObjects
		UIImage *imageFromServer = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:object]]];
		[imageObjects addObject:imageFromServer];
	}

	// Load the imageView control with images stored in the NSMutable array
	self.imageView.animationImages = imageObjects;

	// Set how many seconds when the next image will appear
	self.imageView.animationDuration = 10;
}

Next, add this code in the startButtonTapped method.

- (IBAction)startButtonTapped {
	if(self.imageView.isAnimating) {
		[self.imageView stopAnimating];
		[self.startButton setTitle:@"Start" forState:UIControlStateNormal];

		// Remove content from the textView control
		self.messageBox.text = nil;
	} else {
		[self.imageView startAnimating];
		[self.startButton setTitle:@"Stop" forState:UIControlStateNormal];

		// Display content in the textView control
		NSString *stringUrls = [self.imagesFromServer componentsJoinedByString:@"\n"];
		self.messageBox.text = [NSString stringWithFormat:@"These %i images are animating:\n%@",
		[self.imagesFromServer count],stringUrls];
	}
}

Since I’ve commented the class’ code you shouldn’t have any problem understanding it. So run the application, then click the Start button. Code in the else block is executed; thus animate images assigned in the imageObjects array. When you click the button (Stop) again, code in the if block is executed.

Notice the slight delay before the SecondViewController’s view is loaded in the simulator window, when you click the second tab. That’s because code in viewDidLoad must fetch all images from the remote server, before loading the view.

That’s pretty much how you animate images in an imageView control. Next week, you will learn how to play a sound in the background, while images are animating in an imageView control.