iOS Swift: Implementing Photos App Image Scrolling with Scroll Views

When does scroll view come into place? When you need to display content that doesn't entirely fit onto the screen, like a zoomed image or a couple of images in the Photos app. We will be using scroll views to achieve the sort of image scrolling that happens in the Photos app to give you an idea of what scroll views are and how to use them.

Let's dive right in!

First, we want to create a new Xcode project. If you're a total beginner, you may want to read this article for how to create a new project first.

Scrolling Multiple Pictures

Once your project is all set up, go to the Main.storyboard file. From the 'Object library', drag a scroll view onto the scene and drag its edges till they're level with the scenes edges.

Next, let's pin the scroll view's edges using constraints so we have the same behavior across multiple devices.

The next thing we will do is to add some images to our project. Click on Assests.xcassets.
Next, click and drag five images to the asset catalog like so:

Go back to Main.storyboard. Click on the Assistant editor icon to display the ViewController.swift file.

Now, create an IBOutlet by holding ctrl and then click and drag from the scroll view to the code just above viewDidLoad().

In the pop over that appears, type scrollView into the Name field.

Now that our scroll view is connected and our images sit in the Asset catalog, we need to connect our images as well. With that said, this time, there won't be any clicking and dragging. Instead, we are going to create an array to hold our images.

Create a variable named images under your the scroll view IBOutlet:
var images = [UIImage]().

There are a couple ways to create the images we will be populating our array with. One way is to use the UIImage constructor, UIImage(named: "name-of-image). Another way is to use Image Literal, which is what we're going to do.

To populate the array, go inside viewDidLoad().
Let's assign an array of image literals to our images variable.
images = [].

Type ima into the array and Xcode will bring suggestions.
Double tap on Image Literal and you should be able to choose any image you want. Do this for all the images you added to the Assets catalog.

Next, we're going to programmatically add the images to the scroll view.

Copy and paste the following code into viewDidLoad() below the images array:

for i in 0..<images.count {
    let imageView = UIImageView()
    let x = self.view.frame.size.width * CGFloat(i)
    imageView.frame = CGRect(x: x, y: 0, width: self.view.frame.width, height: self.view.frame.height)
    imageView.contentMode = .scaleAspectFit
    imageView.image = images[i]
            
    scrollView.contentSize.width = scrollView.frame.size.width * CGFloat(i + 1)
    scrollView.addSubview(imageView)
}

Here, we loop through the images using the half-open range operator (..<). Essentially, in our array of five images, i gets the values 0, 1, 2, 3, 4.

In the loop, a UIImageView is created for each count to hold each of the images. We then give the imageView a frame, i.e where we want it to sit on the screen and how high and wide we want it to be. Then we set the image view's contentMode property to scaleAspectFit (the default is scaleToFill. You can play with the other options to see what they each look like).

The final step in the configuration of our image view is to add the actual image to it. We'll step through the images array and pick each of the images as we go.

Now that the image view is all set up, it is time to configure our scroll view. The contentSize property of a scroll view defines the size of the scrollable area. In our case, we want the scrollable area to grow with our images. Our scrollView has the same width and height as self.view, and, since our images take on the width of the view, we'll increase the width of the scrollable area based on the number of images we have. For example, in our case, there are five images.

If the width of the view is 50 (which our image's width will conform to) for the first image, the contentSize width will be 50 * (0 + 1), and for the second one, it would be 50 * (1 + 1) and so on. Eventually, our entire scrollable area will wrap around the width of all the images combined. Now, we can scroll from the first image to the last.

Run the app now (CMD + R) to see whay we've created so far.

If everything has been done right, you should be able to scroll through the pictures now. You will notice that the way the pictures scroll is very different from the way the Photos app works. Also, you'd see a scroll indicator at the bottom of the app, which is very much not in the Photos app. Let's fix these problems.

On Main.storyboard, click on the scroll view and go to its Attributes inspector. You will see that the options for scroll indicators are selected. Untick them. In the 'Scrolling' segment, select Paging Enabled.

And...that's it!

What Next?

This tutorial is meant to serve as a very gentle introduction to scroll views. After going through the tutorial, you'd probably have some questions, like 'what if I have a 100 pictures and I want to put them in the array without having to create them one by one?'.

There are a number of ways to achieve that, but I will leave it up to you to figure them out. I didn't include these in the article because I wanted to keep this post as simple as possible. Be on the lookout for more articles from me (I may cover more scroll view topics in the next article).

If you have any question, feel free to drop a comment - I'll attend to it.

Please drop a like if you found this article helpful 👍🏼