Make your own 360˚ Product Viewer in iOS with Swift 3 🐤

360˚ Product Viewer

To make a 360˚ product viewer, you’ll need a series of photos of the product taken from the different angles. i’ll not go through the process of creating those shots however if you want to learn about it, you can visit https://www.ecwid.com/blog/guide-to-360-product-photography.html

Import Images

After you get those shots, drag those pictures to image asset. don’t forget to name them in incrementing number order.

Setup Views

Now that we have the pictures, now lets switch to Storyboard and drag a ImageView from Object Library in a ViewController. add the needful constraints to your ImageView. I want my ImageView to be square taking the whole width and positioned at the center of the screen. so, i will add Leading, Trailing and Vertically Center constraint to the view and also 1:1 Aspect Ratio constraint to ImageView. you can have your constraints setup as per your design requiremnt.

Also drag a Pan Gesture Recognizer from Object Library to ImageView. To make the Pan Gesture work, you have to enable User Interaction for ImageView. To enable it, go to Attribute Inspector and in the Interaction attribute check the User Interaction Enabled property.

Coding!!

Now that we have setup our view for 360 product viewer, lets start coding by creating Outlet of ImageView and Action of Pan Gesture Recognizer.

@IBOutlet weak var imageView: UIImageView!
@IBAction func gesture(_ sender: UIPanGestureRecognizer) {
}

Define some variables. currentIndex will hold the current index of the image, images will hold array of product images that will be displayed, lastPoint will hold the coordinate of last touch point and sensitivity defines the drag sensitivity of the viewer.

var currentIndex: Int = 0
var images: [UIImage] = [UIImage]()
var lastPoint: CGPoint = CGPoint.zero
let sensitivity: CGFloat = 5.0

now lets write a logic inside the gesture action that will change the imageView image on dragging over it. the logic is simple. when the user drag over the imageView, we get the coordinate of the touch point on imageView and set it to currentPoint. then, we check if the dragging has just started or it has been already started. if the drag has just started, we only set the lastPoint to currentPoint. else, we get the velocity of the drag and set it to velocity variable to find out if the user is dragging left to right or right to left. when the user drag from left to right, we get positive velocity and negative velocity when the user drags to left from right. we also check the x position of currentPoint for smooth and less sensitive action. if the velocity is positive and currentPoint is greater than lastPoint x position plus sensitivity, we decrement the currentIndex by 1 till 0 and when the currentIndex reaches to 0, we set it back to last index (i.e images.count -1). by doing this, we achieve endless scrolling. similarly, if the velocity is negative and currentPoint is lesser than lastPoint x position minus sensitivity, we increment the currentIndex till last index (i.e images.count -1) and when the currentIndex reaches to last index, we set it back to 0. in both case we also set lastPoint to currentPoint.

let currentPoint = sender.location(in: imageView)
if sender.state == .began{
   lastPoint = currentPoint
}else if sender.state == .changed {
   let velocity = sender.velocity(in: imageView)
   if velocity.x > 0 && currentPoint.x > lastPoint.x + sensitivity{
      currentIndex = currentIndex > 0 ? currentIndex - 1 : images.count - 1
      lastPoint = currentPoint
   }else{
      if currentPoint.x < lastPoint.x - sensitivity {
         currentIndex = currentIndex < images.count - 1 ? currentIndex + 1 : 0
         lastPoint = currentPoint
      }
   }
}

every time currentIndex is changed, we need to update the imageView image. i would like to do it inside currentIndex didSet method. so lets update the image of imageView every time currentIndex value changes.

var currentIndex: Int = 0{
  didSet{
     imageView.image = images[currentIndex]
  }
}

Initialization

we are almost done. now we have to initialize our 360 product viewer by adding images on images array and setting the initial currentIndex. for this tutorial, the image source is image asset but you can also fetch from Network and set those to images array.

for i in 2...65 {
   images.append(UIImage(named: "\(i)")!)
}
currentIndex = 0

Thank you!! 😉

hope you like the tutorial. if you have any query, i will be happy to help you out with that and if you got any feedback for me, i will appreciate that 🙏. and once again thanks for reading. 🙂

Complete Project: https://github.com/aatish-rajkarnikar/360productview