How to use UIImageView & UIScrollView to swipe through images – Swift iOS

In this tutorial, we will show you How to use UIImageView & UIScrollView to swipe through images are followed:

Start building your iOS apps in Swift with well-equipped solution

UIImageView & UIScrollView to swipe through images

Step 1: Create a new project

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

Step 2: Set ViewController.swift as the rootViewController

We can execute this in our AppDelegate.swift pretty simply.

class AppDelegate: UIResponder, UIApplicationDelegate {

var window: UIWindow?

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
 // Override point for customization after application launch.

 window = UIWindow(frame: UIScreen.main.bounds)
 self.window?.rootViewController = viewController()
 self.window?.makeKeyAndVisible()

 return true
 }

If you run your application at this instant, it should have a black screen.

You can fix this by going into your controller and modifying its backgroundColor.

view.backgroundColor = UIColor.white

Step 3: Create our UIScrollView

Now we can programmatically build our UIScrollView, some of you who love Storyboards may require obtaining used to this, but it’s not that hard.

import UIKit

class ViewController: UIViewController {

 let scrollView: UIScrollView = {
 let scroll = UIScrollView()
 scroll.isPagingEnabled = true
 scroll.showsVerticalScrollIndicator = false
 scroll.showsHorizontalScrollIndicator = false
 scroll.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
 return scroll
 }()

We haven’t essentially “added” a UIScrollView yet, we’ll do that with addSubview() soon.

Step 4: Including images –

UIImageView & UIScrollView

We require images to illustrate; if you have some images laying around on your computer you can use those or obtain them off the web.

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

UIImageView & UIScrollView – Looping through our images

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

import UIKit

class ViewController: UIViewController {

 var imageArray = [UIImage]()

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

Instant in viewDidLoad we’ll confer our array values.

This will be simple if you are in Xcode 8 or higher. If you are using lower than 8, I’ll still illustrate to you how to execute this.

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

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

imageArray = [UIImage(named:"yourimagename"), UIImage(named: "yourimagename")]

At present, 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 cover to put your function outside your viewDidLoad like I am, but I like to keep it clean.

Here’s our function:

func setupImages(_ images: [UIImage]){

for i in 0..<images.count {

let imageView = UIImageView()
 imageView.image = images[i]
 let xPosition = UIScreen.main.bounds.width * CGFloat(i)
 imageView.frame = CGRect(x: xPosition, y: 0, width: scrollView.frame.width, height: scrollView.frame.height)
 imageView.contentMode = .scaleAspectFit

scrollView.contentSize.width = scrollView.frame.width * CGFloat(i + 1)
 scrollView.addSubview(imageView)
 scrollView.delegate = self


 }

}

It’s somewhat easy actually.

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

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

At this instant, we have our for loop we offer our loop a variable of i. I enclose each UIImage so if you have 10 images, it loops 10 times. It’s pretty easy.

We, too, set our imageView’s image equivalent to our images[i] . Which will navigate through all objects and set the image.

Then we set our UIImageView’s frame. We require to ensure each imageView isn’t on a similar page. Therefore, we multiply the width of the screen by i. This makes our images start on different ‘pages’.

Setting our scrollView’s contentView is vital, we require to inform our scroll view how big it needs to be.

Then we include it in our scrollView’s subview.

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

In viewDidLoad ensure you include scrollView & call our function:

override func viewDidLoad() {
 super.viewDidLoad()

// Do any additional setup after loading the view.
 view.addSubview(scrollView)

imageArray = ["Your Image","Your Image")]

setupImages(imageArray)

}

Wrapping up

Still, confused with Swift related development? Click here and get consulted today.