The UIScrollView Class: Scrolling a Large Image

Say you have a large image that you want to display on the device screen, since it is requires more real estate than what the device’s screen allows for, you’ll have to make the scroll View’s contentSize the same as the Image View’s size like this:

By doing that, the user will be able to scroll the large image horizontally and vertically.

Add Large Image in The Project

To enable the user to scroll a large image horizontally and vertically in an Scroll View control, you’ll have to add this image in the project. You could use your own image instead. Just make sure is width and height is greater than 320 x 658 and it it is a .png file.

Scene 2 Code

Currently there are no controls on the Second Scene. We will add code in the SecondViewController class files to create a Scroll View control and an Image View control. You will load the Image View control with above image. You will then add the Image View control on the Scroll view. You will set the Scroll View control’s contentSize to that of Image View’s own. Finally, you add code in the SecondViewController class to hide the status bar.

Now, add this code in the SecondViewController.h file, which declare objects for holding the Image View control and the Scroll View control you’ll create in the viewDidAppear method.

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

Next, add this code in the SecondViewController.m file SecondViewController.m file.

- (void)viewDidAppear:(BOOL)animated
{
  UIImage *imageToLoad = [UIImage imageNamed:@"flowers.png"];
  self.imageView = [[UIImageView alloc] initWithImage:imageToLoad];
  self.scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
  [self.scrollView addSubview:self.imageView];
  [self.view addSubview:self.scrollView];
  self.scrollView.contentSize = self.imageView.bounds.size;
}

The last thing I want you to do is add this code in the SecondViewController.m file.

// This method hides the status bar
- (BOOL)prefersStatusBarHidden
{
  return YES;
}

What you’ve done in the SecondViewController” viewDidAppear: method is programmatically initialize the imageView and scrollView objects you declared in the SecondViewController’s header file. You added the imageView object to the ScrollView object, then added the ScrollView object to the scene’s View object. The last statement set the scrollView object’s size (width and height) to the same size as the imageView object.

Test Scene 2 Code

Run the application and click the the second tab. As you can see, the image take up the entire screen real estate (see image below) and the status bar is hidden. Go ahead and scroll the view vertically and horizontally to see other parts of the image. Once again, the statement you added in the viewDidAppear: method is responsible for making the view scroll vertically and horizontally on the simulator’s screen. This process is also known as panning the view.

That’s it, you now know how to programmatically implement the ability for the app user to scroll (or pan) a large image in a Scroll View control.