iOS UIScrollView and Zoom

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

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.

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.

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.

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.

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.

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:

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.

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

Copy
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.

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:

Copy
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.

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.

Copy
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
    }
    
}

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

About Anupam Chugh

He loves learning new stuff in Android and iOS. Shoot him queries.