iOS 7 Views - Image View

An image view displays an image or an animated sequence of images. An image view lets you efficiently draw an image or an animated series of images onscreen, scaling the images automatically to fit within the current size of the view. Image views can optionally display a different image or series of images whenever the view is highlighted. In this tutorial we will display some images and an animated series of images.

Open Xcode and create a new Single View Application. For product name, use iOS7ImageViewTutorial and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices.

In this tutorial we will need some images to show the highlighted image and the animation of images. You can download the imagefile here. unzip the file and add the images to the project.

Go to the Storyboard and drag a Image View to the main view. Go to the Size Inspector and give the image view the following postition and size.

In the property inspector in the Image View section select the image and highlighted image file. Also check the User Interaction enabled, since we will need to repond to a touch on our image later on.

Select the Assistant Editor and open ViewController.m. Ctrl and drag from the Image View to the @interface section of ViewController.m and create the following Outlet

imageViewOutlet.png

Ok, now that all is in place first we will want to display the highlighted image when a user clicks the image. Add the following property 

@property (nonatomic) BOOL imageIsHighlighted;

This boolean keeps track if our image is highlighted or not. Next, implement the touchesBegan:WithEvent method

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];

if ([touch view] == self.imageView)
{
if (!self.imageIsHighlighted) {
self.imageView.highlighted = YES;
self.imageIsHighlighted = YES;
} else
{
self.imageView.highlighted = NO;
self.imageIsHighlighted = NO;
}
}
}

Here we check if the touch is inside our image and if it is not yet highlighted we will highlight the image by setting the imageIsHighlighted property to YES. If the image were already highlighted we will switch to the normal image. Build and Run, and switch between the normal and highlighted images.

With image views you can also create an animation of images. Add the following property

@property (nonatomic, strong) NSArray *images;

Add the following lines to the viewDidLoad method

self.images = @[[UIImage imageNamed:@"blackcircle.png"], [UIImage imageNamed:@"pinkcircle.png"],
[UIImage imageNamed:@"redcircle.png"]];

self.imageView.animationImages = self.images;
self.imageView.animationDuration = 1.0f;

We have created an array of images which is the assigned to the animationImages propery of our image view. The total duration of the animation is 1 second. Change the touchesBegan:withEvent method to

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];

if ([touch view] == self.imageView)
{
if (!self.imageIsHighlighted) {
[self.imageView startAnimating];
self.imageIsHighlighted = YES;
} else
{
[self.imageView stopAnimating];
self.imageIsHighlighted = NO;
}
}
}

When the user clicks the image, the animation starts. If it was already started the animation is stopped again. Build and Run, and start the animation by clicking on the image.

You can download the source code of the iOS7ImageViewTutorial at the ioscreator repository on github.