iOS UIScrollView and Zoom

Filed Under: iOS

In this tutorial, we’ll be implementing the UIScrollView along with the Zoom feature in our iOS Application.

iOS UIScrollView

UIScrollView is used to show more content on the screen than it can be actually visible by having a virtual screen size which is larger than the current screen size.

UITableView is a subclass of UIScrollView and contains the scrollbars by default.

A UIScrollView can have only one single root child similar to Android.

Let’s get started with our XCode Single View Application project and learn UIScrollView through implementation.

Configuring Project

ios uiscrollview zoom project setup

Adding the UIScrollView

Open up the Main.storyboard and add a UIScrollView inside the ViewController and pin it to all the edges of the Parent View.

ios uiscrollview add

So we’ve added the UIScrollView to the ViewController and set it to cover the edges excluding the Safe Area.

Adding an Inner View

We’ll add a View inside the ScrollView which would act as the root child. We will pin this to the edges and also set the equal height and equal widths constraint of the View to the parent view above.

ios uiscrollview add inner view

Next, we’ll change the priority of equal heights to LOW so that when we change the view height to something greater than the current screen, the new height would be taken and the screen would scroll.

ios uiscrollview inner view height priority

Notice that changing the priority displays a dotted line for the height of the view.

Now let’s add elements inside this View.

Adding Elements inside the Inner View

Make sure you add the elements to the inner view and NOT on the ScrollView or Parent View directly.

ios uiscrollview add custom elements

We’ve added two rectangular views of fixed height. Now the ScrollView is ready with custom elements added.

Do you think that it would scroll?

NO!

Because the height of the inner view is still fit to the screen. We need to change the height of the inner view to a bigger value.

Let’s add a new constraint for the height as 1000.

ios uiscrollview height constraint

We’ve added a few more View elements using the same techniques we’d used before.

We’ve changed the height constraint of the Content View which is the root view inside the UIScrollView.

Notice how the Content View height goes beyond the screen. We’ve moved a view to the below part as well by modifying the vertical spacing.

Let’s see how this looks in the simulator:

ios uiscrollview output

Wow, we are able to scroll! Notice that the background color of the UIScrollView is white. We can change that and will do in the next section. In the following section, we shall use a UIImageView as the root child of the UIScrollView and see how it scrolls horizontally and vertically to showcase a large image.

UIScrollView on UIImageView

We will create a new ViewController for this part and connect it to the previous one using a Segue.

ios uiscrollview new controller segue

Create a new swift file to connect to this view controller. Following is our empty ImageViewController.swift.


import UIKit

class ImageViewController : ViewController{
    
    override func viewDidLoad() {
        
    }
    
    override func viewDidAppear(_ animated: Bool) {
        
    }
    
    override func didReceiveMemoryWarning() {
        
    }
    
}

Let’s add a UIScrollView inside this new ViewController and add a UIImageView inside the UIScrollView.

ios uiscrollview add uiimage

We set the UIImageView image dimensions to values beyond the screen dimensions.

The ImageViewController.swift file is linked in the storyboard.

Now in the ImageViewController.swift, we can change the background of the scrollView in the following way:


class ImageViewController : ViewController{
    
    @IBOutlet weak var scrollView: UIScrollView!
    override func viewDidLoad() {
        scrollView.backgroundColor = UIColor.black
    }
    
    override func viewDidAppear(_ animated: Bool) {
        
    }
    
    override func didReceiveMemoryWarning() {
        
    }
    
}

Note: You must connect the UIScrollView from storyboard to the ViewController using the IBOutlet drag and drop from the assistant editor.

Let’s look at the output in the simulator.
ios uiscrollview output

The scrollView background color is now black.

Zoom and Offest

We can change the contentOffset property in order to show a different part of the image in the scrollView when the image is first loaded.
Also to set the zoom we use the zoomScale, minimumZoomScale, maximumZoomScale properties.


import UIKit

class ImageViewController : ViewController, UIScrollViewDelegate{
    
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var scrollView: UIScrollView!
    override func viewDidLoad() {
        scrollView.backgroundColor = UIColor.black
        scrollView.delegate = self
        scrollView.contentOffset = CGPoint(x: 500, y: 200)
        
        scrollView.delegate = self
        scrollView.minimumZoomScale = 0.1
        scrollView.maximumZoomScale = 4.0
        scrollView.zoomScale = 1.0
    }

    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return imageView
    }
    
}

ios uiscrollview zoom

To zoom in the simulator press the option key and click and drag the mouse controls.

This brings an end to this tutorial. You can download the project files from the link below:

Comments

  1. Saad says:

    While zooming out, the image-view goes to the left top. thats look ugly.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages