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

BEGIN 
  IF(images are rotating) THEN
    Stop animating (rotating) images in the imageView control.
    Set the button's title property to display Start.
    Remove content from the textView control.
  ELSE
    Start animating images in the imageView control.
    Set the button's title property to display Stop.
    Convert the array, imagesFromServer to a string and assign it to a variable, stringUrls.
    In the message textView control display the number of images are rotating 
    in the imageView control, along with content of the stringUrls variable.
  ENDIF
END

(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

BEGIN 
  Initialize the imagesFromServer array with six web addresses.
  Create and initialize a mutable array called imageObjects.
  FOR(url in imagesFromServer)
    Get the image from the url and place it in the image object called, imageFromServer.
    Add add the imageFromServer object in the imageObjects array.
    Assign the imagesObjects array to the imageView's animationImages property.
    Set how many seconds the next image in the imageObjects will 
    appear in the imageView control.
  ENDFOR
END

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.