The UIScrollView Class: Zooming Content

The zooming function of the Scroll View control enables the user of your app to use pinch gestures to zoom an image or text content in and out.

Workshop Objectives

Last week you learned how to scroll (pan) a large image vertically and horizontally. In this workshop, you will learn how to implement the zooming function of the Scroll View control in this workshop. First, you will modify the second scene’s user interface and class files to implement the ability for the user to zoom an image you’ll add in an image control. Second you’ll modify the second scene’s user interface and class files to implement the ability for the user to zoom text you’ll add in a Text View control.

Zooming an Image View’s Image

I will walk you through the steps you’ll have to perform to enable the app user to zoom an image you’ll add in an Image View control.

The first thing you have to do is conform the SecondViewController class to the UIScrollViewDelegate protocol, because you’ll implement a delegate method of the UIScrollView class in the SecondViewController.m file. So go ahead and change the @interface directive to this:

Next, replace the existing code in the SecondViewController.h file with this code:

@property (nonatomic, strong) IBOutlet UIScrollView *scrollView;
@property (nonatomic, strong) IBOutlet UIImageView *imageView;
@property (nonatomic, strong) IBOutlet UITextView *textView;

Add Controls on The Second Scene

Click the Main.storyboard file, then add a Scroll View control on the second scene’s canvas. Make sure it cover the view’s surface as shown in this image.

Next, add an Image View control on the Scroll View. Adjust the control’s Width and Height attributes in the Size inspector pane to cover most of the Scroll View’s surface, as shown in the image below. Set the Image View control’s Mode attribute to Aspect Fit. You’ll find that attribute under the View category.

Connect The Controls in Interface Builder

You should connect the Scroll View control and the Image View control to the property variables in Interface Builder.

1. Control-click from the View Controller object that’s on the second scene’s Dock to the Scroll View control in the Document Outline.
2. Release your mouse and select scrollView from the Outlets menu.

Repeat these steps to connect the Image View control to the imageView outlet

Modify The Second Scene Implementation File Code

Here is the first set of code to add in the SecondViewController.m file.

- (void)viewDidLoad
{
  [super viewDidLoad];
  self.scrollView.delegate = self;
  self.scrollView.minimumZoomScale = 1.0;
  self.scrollView.maximumZoomScale = 20.0;
}

The second statement set the Scroll View control’s delegate property, since we will be using a delegate method of the UIScrollViewDelegate protocol later on. When the app user use the pinching gesture to zoom in and out, you’ll have to set the zooming limits. The last two statements does exactly that.

Now, replace the viewDidAppear: method’s code with this.

UIImage *image = [UIImage imageNamed:@"flowers.png"];
self.imageView.image = image;

// Set the Scroll View Control's contentSize
self.scrollView.contentSize = image.size;

The final piece of code you have to add in the SecondViewController.m file is this delegate method of the Scroll View control.

- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
  return self.imageView;
}

It is fired when the app user execute a pinch gesture. As you can see the method contain a single statement, which return the image the user will apply the pinching gesture.

Test The Image Zooming Function

You’ve entered necessary code to implement the Scroll View control’s zooming function, so go ahead and run the application. Now, click the second tab and you will see the flower image, as shown in Figure 1 below. Since you are working on the simulator you’ll have to hold down the option key, resulting in two gray circles appearing on the image. Now, click-drag your mouse to simulate the pinch gestures. Your screen will look similar to Figure 2. Notice you can even scroll the view when you’ve zoom in the image.

Figure 1	Figure 2

That’s all there is to implementing the Scroll View control’s zooming function on an image.

Zooming a Text Field’s Text

Now, I will walk you through the steps you’ll have to perform to enable the app user to zoom text you’ll add in a Text View control.

First, modify the second scene’s user interface by adding a Text View control on Scroll View control. Make sure it cover most of the Scroll View as shown in the image below. In the Attribute Inspector pane, set the attributes highlighted in the image below for the Text View control.

Disconnect the ImageView control’s outlet property in Interface Builder, then connect the Text View control to the textView property. When you’re done, switch over to the SecondViewController.m file and replace the viewDidAppear: method’s code with this:

// Set Text View control's background color
self.textView.backgroundColor = [UIColor colorWithRed:0.95 green:0.95 blue:0.71 alpha:1.00];

// Set up text content for the Text View control
NSString *paragraph1 = @"Last week you learned how to scroll (pan) a large image vertically and horizontally. In this workshop, you will learn how to implement the zooming function of the Scroll View control in this workshop.";

NSString *paragraph2 = @"First, you will modify the second scene's user interface and class files to implement the ability for the user to zoom an image you'll add in an image control.";

NSString *paragraph3 = @"Second you'll modify the second scene's user interface and class files to implement the ability for the user to zoom text you'll add in a Text View control.";

// Format paragraphs and add them in the Text View control
NSString *textContent = [NSString stringWithFormat:@"%@\n\n%@\n\n%@", paragraph1, paragraph2, paragraph3];
self.textView.text = textContent;

// Set the Scroll View Control's contentSize
self.scrollView.contentSize = CGSizeMake(320.0f, 480.0f);

Test The Text Zooming Function

Run the application to test the code you entered in the viewDidLoad: method. Figure 1 shows what the second tab’s view look like before you zoom the text. Figure 2 shows what the view looks like when you zoom the text.

Figure 1	Figure 2

That’s it. You now know how to implement the ability for the app user to zoom an Image View control’s image and a Text View control’s text.