How to swipe through images with UIImageView & UIScrollView

It’s pretty damn easy.

Step 1: Create a new project

Once you have your project set up, delete your storyboard.

From now on I won’t be showing anything with storyboards, maybe I’ll talk about why later but trust me it’s for your own good.

Step 2: Set ViewController.swift as the rootViewController

We can do this in our AppDelegate.swift pretty easily.

If you run your application now, it should have a black screen.

You can fix this by going in your controller and changing it’s backgroundColor.

Step 3: Create our UIScrollView

Now we can programmatically create our UIScrollView, some of you who love Storyboards might need to get used to this but it’s not that hard.

We haven’t actually “added” a UIScrollView yet, we’ll to that with addSubview() later.

Step 4: Adding images

We need images to show, if you have some images laying around on your computer you can use those or get them off the web.

Once you have your images, drag them into your Assets.xcassets folder.

Step 4.5: Looping through our images

Now that we have images in our folder, we can put them into an array.

We simply created an array, and we’re telling the array, it will have UIImage’s inside it.

Now in viewDidLoad we’ll give our array some values.

If your in Xcode 8 or higher (I think) this will be easy. If your using lower then 8, I’ll still show you how to do this.

If you click on Image Literal it will let you choose from your images you put in the folder. So add the amount of images you’d like.

If your not using Xcode 8 or if you want to know how to do it the typed out way, it’s like so:

Now that we have the images in our array we can create a function to loop through our images and then add them to our scrollView.

You don’t have to put your function outside your viewDidLoad like I am, but I like to keep it clean.

Here’s our function:

Hope your not too confused of that.

It’s quite simple actually.

The first line, says func setupImages(_ images: [UIImage]){

It just means we have a function called setUpImages and it will take an array of UIImage .

Now we have our for loop we give our loop a variable of i . i contains each UIImage so if you have 10 images, it loops 10 times. It’s pretty simple.

We also set our imageView’s image equal to our images[i] . Which will go through each object and set the image.

Then we set our UIImageView’s frame. We need to make sure each imageView isn’t on the same page. So we multiply the width of the screen by i . This makes our images start on different ‘pages’.

Setting our scrollView’s contentView is important, we need to tell our scroll view how big it needs to be.

Then we add it to our scrollView’s subview.

Step 5: Add scrollView to the view & call our setupImages function

In viewDidLoad make sure you add scrollView & call our function:

Wrapping up!

That’s about it, you should be able to run it and now swipe through your images.

If you have any questions or suggestions feel free to comment below 😊.

Thanks as always for reading!