How to use UIImageView & UIScrollView to swipe through images- swift

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

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 in your controller and modifying it’s 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 to obtain 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 to that with addSubview() soon.

Step 4: including images

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.

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 then 8, I’ll still illustrate you how to execute this.

If you tap 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:

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 object and set the image.

Then we set our UIImageView’s frame. We require ensure each imageView isn’t on the 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 informs our scroll view how big it needs to be.

Then we include it to 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)

}

 

Last Update: October 8, 2018  

October 8, 2018   113   Nandini R    Swift Significance    
Total 0 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

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

Facebook
Twitter
INSTAGRAM
LinkedIn