UIImageView pinch zoom swift

Question

I was hoping someone could help me out. I am trying to allow a user to pinch zoom on a UIImageView(with a max and min level allowed). But for some reason the it does not work right. The image zooms a little then just bounces back. Thank you.

here is the zoom func

func zoom(sender:UIPinchGestureRecognizer) {


    if sender.state == .Ended || sender.state == .Changed {

        let currentScale = self.view.frame.size.width / self.view.bounds.size.width
        var newScale = currentScale*sender.scale

        if newScale < 1 {
            newScale = 1
        }
        if newScale > 9 {
            newScale = 9
        }

        let transform = CGAffineTransformMakeScale(newScale, newScale)

        self.imageView?.transform = transform
        sender.scale = 1

    }

}

You can use `ImageScrollView` open source, a zoomable and scrollable image view. https://github.com/huynguyencong/ImageScrollView — huynguyen, Mar 06 '16 at 16:25
^^^ That worked great for me, took all of about 30 seconds. Thank you — 36 By Design, Apr 15 '16 at 18:50

score 144 · Answer 1 · edited Jun 20 '20 at 09:12

144

UIImageView pinch zoom with UIScrollView || image zooming ios in swift 3 and Xcode 8 letter Youtube video URL

set uiscrollview Delegate in storyboard

 class PhotoDetailViewController: UIViewController, UIScrollViewDelegate {

    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var imgPhoto: UIImageView!
      
    override func viewDidLoad() {
        
        super.viewDidLoad()
    
        scrollView.minimumZoomScale = 1.0
        scrollView.maximumZoomScale = 6.0        
        // scrollView.delegate = self - it is set on the storyboard.
    }  
        
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
       
        return imgPhoto
    }

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 16 '16 at 07:55

Parth Changela

955
2
8
6

4

Remarkable! It really is as easy as this post says! – instanceof Mar 27 '17 at 10:22
1

This should be the accepted answer for Swift 3. Nothing else I tried worked, including the accepted answer above. – hawmack13 Apr 06 '17 at 09:57
1

It is not necessary to set the scroll views delegate in code since it was already set via the storyboard as seen in the image above. – C6Silver May 19 '17 at 22:26
Im m very new to swift and xcode, and im trying to do the same thing in a tableview, which contains images, each tablecell has its own backend. So im trying to put the delegate as the backend for each tablecell, but it doesnt work. Did the steps above, is there anything I am missing? – Joel Wahlund Jun 30 '17 at 06:42
Great answer! I like the simplicity (no unnecessary subclasses etc) and that it works well with no storyboard (just need to set the delegate and use add the UIImageView as a subview of the UIScrollView. – biomiker Feb 01 '18 at 06:22
Also if you are the storyboard type, no need to set the zoom scales in code, you can do it right in the storyboard's attributes inspector. This means you don't necessarily even need an outlet for the UIScrollView. – biomiker Feb 01 '18 at 07:35
scrollView.minimumZoomScale is less than 1 let say 0.5 how can i make it in center? – Iraniya Naynesh Feb 28 '18 at 11:42
@reza_khalafi huh? can't they unpinch using their fingers? – Jul 25 '18 at 13:31
how can i limit the zoom for the example in the video? – Ben Shabat Dec 03 '18 at 09:08
work only for pitch zoom. how about double tap zooming – Pyae Phyo Aung Jul 22 '19 at 09:48

score 62 · Accepted Answer · edited Apr 03 '18 at 15:14

I decided to add the imageView to a UIScrollView. It allows the user to zoom and pan over. Here is the code I used.

in order to set max/min zoom I used :

    scrollImg.minimumZoomScale = 1.0
    scrollImg.maximumZoomScale = 10.0

here is the rest of the code.

    var vWidth = self.view.frame.width
    var vHeight = self.view.frame.height

    var scrollImg: UIScrollView = UIScrollView()
    scrollImg.delegate = self
    scrollImg.frame = CGRectMake(0, 0, vWidth!, vHeight!)
    scrollImg.backgroundColor = UIColor(red: 90, green: 90, blue: 90, alpha: 0.90)
    scrollImg.alwaysBounceVertical = false
    scrollImg.alwaysBounceHorizontal = false
    scrollImg.showsVerticalScrollIndicator = true
    scrollImg.flashScrollIndicators()

    scrollImg.minimumZoomScale = 1.0
    scrollImg.maximumZoomScale = 10.0

    defaultView!.addSubview(scrollImg)

    imageView!.layer.cornerRadius = 11.0
    imageView!.clipsToBounds = false
    scrollImg.addSubview(imageView!)

I also had to add this as well

func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
    return self.imageView
}

Swift 3 & above function prototype

func viewForZooming(in scrollView: UIScrollView) -> UIView? {
    return self.mainImage
}

Was my case, where I needed had `UIImageView` within `UIScrollView`. Worked like a charm so far. Let's see what our QA will say about that — peetadelic, Mar 31 '22 at 08:22

score 52 · Answer 3 · answered Oct 25 '19 at 12:09

52

Supporting Swift 5.1, You can create an extension of UIImageView, like this:

extension UIImageView {
  func enableZoom() {
    let pinchGesture = UIPinchGestureRecognizer(target: self, action: #selector(startZooming(_:)))
    isUserInteractionEnabled = true
    addGestureRecognizer(pinchGesture)
  }

  @objc
  private func startZooming(_ sender: UIPinchGestureRecognizer) {
    let scaleResult = sender.view?.transform.scaledBy(x: sender.scale, y: sender.scale)
    guard let scale = scaleResult, scale.a > 1, scale.d > 1 else { return }
    sender.view?.transform = scale
    sender.scale = 1
  }
}

answered Oct 25 '19 at 12:09

John Lima

852
7
7

13

love this solution. Can it possible to scroll right left? @John Lima – Naveed Ahmad Dec 28 '19 at 07:05
3

I found this always zooms in on the same area, no matter where you pinch to zoom. Would there be a way to have this zoom wherever you pinch to zoom? – Robin Sep 27 '21 at 12:27
2

The scrolling works better using a scroll view – John Lima Sep 28 '21 at 13:16

score 17 · Answer 4 · answered Apr 03 '18 at 08:48

17

The option for swift 4

class ViewController: UIViewController, UIScrollViewDelegate {

@IBOutlet weak var scrolView: UIScrollView!
@IBOutlet weak var imgPhoto: UIImageView!

  override func viewDidLoad() {
    super.viewDidLoad()
    scrolView.delegate = self
    scrolView.minimumZoomScale = 1.0
    scrolView.maximumZoomScale = 10.0
  }

  func viewForZooming(in scrollView: UIScrollView) -> UIView? {
    return imgPhoto
  }
}

answered Apr 03 '18 at 08:48

Heretic Sic

364
2
9

2

When pinching ends, call `scrollView.zoomScale = 1.0` – Marco Leong Aug 22 '18 at 00:09
Working Solution, Thanks – Naveed Ahmad May 13 '19 at 12:33

huynguyen · Answer 5 · 2016-09-23T00:38:31.870

15

You can use ImageScrollView open source, a zoomable and scrollable image view. http://github.com/huynguyencong/ImageScrollView

Like this opensource, add ImageView to ScrollView

open class ImageScrollView: UIScrollView {
   var zoomView: UIImageView? = nil
}

extension ImageScrollView: UIScrollViewDelegate{

    public func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return zoomView
    }

    public func scrollViewDidZoom(_ scrollView: UIScrollView) {
        adjustFrameToCenter()
    }
}

edited Sep 23 '16 at 00:38

answered Sep 20 '16 at 18:56

huynguyen

7,616
5
35
48

1

I think this is the best answer. It's zoomable and also scrollable. In addition it supports double tab action. – mazend Feb 15 '20 at 05:39
2

I want to say one more things. It's really easy to use. – mazend Feb 15 '20 at 05:57
1

This approach worked best for me. – Carl Smith Mar 18 '22 at 09:47

score 9 · Answer 6 · edited Nov 18 '22 at 23:37

Using Swift 5.0, here is how it works for me:

let myImageView = UIImageView(image: myImage)
myImageView.isUserInteractionEnabled = true
let pinchMethod = UIPinchGestureRecognizer(target: self, action: #selector(pinchImage(sender:)))
myImageView.addGestureRecognizer(pinchMethod)

@objc func pinchImage(sender: UIPinchGestureRecognizer) {
  guard let sender = sender.view else { return }

if let scale = (sender.view?.transform.scaledBy(x: sender.scale, y: sender.scale)) {
  guard scale.a > 1.0 else { return }
  guard scale.d > 1.0 else { return }
  sender.view?.transform = scale
  sender.scale = 1.0
 }
}

You can use scale.a, scale.b, scale.c, scale.d, scale.tx and scale.ty to set your scale limits.

score 6 · Answer 7 · answered May 03 '15 at 14:02

In my view, the problem is your determination of currentScale. It always equals 1, because you change the scale of your imageView. You should assign your currentScale as follows:

let currentScale = self.imageView?.frame.size.width / self.imageView?.bounds.size.width

RajeshKumar R · Answer 8 · 2018-04-30T09:01:58.933

Swift 3 solution

By default UIImageView's userInteration is disabled. Enable it before adding any gestures in UIImageView.

imgView.isUserInteractionEnabled = true

The scale factor relative to the points of the two touches in screen coordinates

var lastScale:CGFloat!
func zoom(gesture:UIPinchGestureRecognizer) {
    if(gesture.state == .began) {
        // Reset the last scale, necessary if there are multiple objects with different scales
        lastScale = gesture.scale
    }
    if (gesture.state == .began || gesture.state == .changed) {
    let currentScale = gesture.view!.layer.value(forKeyPath:"transform.scale")! as! CGFloat
    // Constants to adjust the max/min values of zoom
    let kMaxScale:CGFloat = 2.0
    let kMinScale:CGFloat = 1.0
    var newScale = 1 -  (lastScale - gesture.scale)
    newScale = min(newScale, kMaxScale / currentScale)
    newScale = max(newScale, kMinScale / currentScale)
    let transform = (gesture.view?.transform)!.scaledBy(x: newScale, y: newScale);
    gesture.view?.transform = transform
    lastScale = gesture.scale  // Store the previous scale factor for the next pinch gesture call
  }
}

try to explain clearly...whats is lastScale whats new scale here, where did you declared them,what's their subclass — srivas, Aug 28 '17 at 11:58
Can you please add more detail here. Code is not complete. whats is lastScale whats new scale here? — aBilal17, Apr 27 '18 at 22:17
How to back to original size when end pinching @rajeshkumar-r — reza_khalafi, May 13 '18 at 05:42

score 5 · Answer 9 · answered Jul 24 '17 at 10:30

Swift 3 solution

This is the code I used. I added imageView to scrollView as a subview.

class ZoomViewController: UIViewController,UIScrollViewDelegate {

@IBOutlet weak var scrollView:UIScrollView!
@IBOutlet weak var imageView:UIImageView!

override func viewDidLoad() {

        super.viewDidLoad()
        scrollView.delegate = self

        scrollView.minimumZoomScale = 1.0
        scrollView.maximumZoomScale = 10.0//maximum zoom scale you want
        scrollView.zoomScale = 1.0

}

func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return imageView
}

score 2 · Answer 10 · answered Sep 17 '22 at 20:20

2

[September 2022, Swift 5]

One of the ways It seems to be working fine for me was embedding the image view into a scroll view which you can have a quick look at the library I'm sharing for better understanding to keep this answer short. I have built up this small library and used it in production apps. You can install or just copy-paste the files into your project. It is very easy to work with as an UIView and listen to its delegate for more options if you need them.

The library is called InteractiveImageView, it supports iOS 11.0 and up, link to GitHub: https://github.com/egzonpllana/InteractiveImageView

answered Sep 17 '22 at 20:20

Egzon P.

4,498
3
32
31

Great, will try it soon. So is the library stable for production use right? – sabiland Nov 03 '22 at 06:54
1

Yes, it works like all good! – Egzon P. Nov 03 '22 at 15:16
1

Great, will replace current ImageScrollView library with yours. Toggle-view option is exactly what I am missing with current library. – sabiland Nov 04 '22 at 05:13

score 1 · Answer 11 · answered Jan 26 '17 at 23:22

1

I think the biggest problem is at the end of your func, you have sender.scale = 1. If you remove that line of code, your image shouldn't just bounce back each time.

answered Jan 26 '17 at 23:22

Logan

828
7
10

score 1 · Answer 12 · answered Oct 04 '18 at 07:51

This is an old question but I don't see any answers that explain what is wrong with the original code.

This line:

let currentScale = self.view.frame.size.width / self.view.bounds.size.width

Is working on the main view rather than the imageView so the scale calculation is always ~1

This simple change makes it behave as expected

let currentScale = sender.view!.frame.size.width / sender.view!.bounds.size.width

by changing self to sender (and forcing view to unwrap) the scale calculation works as expected.

score 0 · Answer 13 · answered Oct 26 '18 at 23:15

I ended up here, probably searching the wrong way.

I was after having my imageView in contentMode = .centre. But I was judging it too zoomed in and I was searching a way to zoom it out. Here's how:

    self.imageView.contentScaleFactor = 3

1 is as if you were doing anything. More that 1 zooms out... 3 works for me but you need to test it out.

UIImageView pinch zoom swift

13 Answers13

Linked

Related