CODEWITHSUNDEEP
iosswiftuiscrollviewuiimageviewstoryboard
Sal
Sal

Reputation: 45

Pan Large Image in Scrollview through StoryBoard

I am building an application where I want to display a floor plan where the image is 2952x3600, larger than the size of my view controller. I want the user to be able to pan the image and zoom in and out, similar to how a map behaves in Mapview.

I was able to obtain the desired result programmatically with the below code. However, I want to be able to add buttons to the image and it will be easier to do in the storyboard. How can I accomplish the same result in the Storyboard?

class ViewController: UIViewController, UIScrollViewDelegate {
    var scrollView: UIScrollView!
    var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        imageView = UIImageView(image: UIImage(named: "TorontoPATHNetworkMap_v.2018.08.pdf"))
        scrollView = UIScrollView(frame: view.bounds)
        scrollView.contentSize = imageView.bounds.size
        scrollView.addSubview(imageView)
        scrollView.delegate = self
        scrollView.minimumZoomScale = 0.3
        scrollView.maximumZoomScale = 5
        view.addSubview(scrollView)
    }

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

Upvotes: 0

Views: 470

Answers (1)

DonMag
DonMag

Reputation: 77568

If you want to add other UI elements (buttons, labels, subviews, etc) and have them scale and move when the scroll view content is zoomed, you have a couple options:

1) Add your buttons in code as subviews of the image view. They will move / size along with the image view.

2) If you'd find it easier to layout your buttons visually, you can do your layout in Storyboard / Interface Builder. In IB, though, you cannot add subviews to a UIImageView, so you will need to embed the image view and buttons in a "container" UIView. Then in your controller class return that container view from viewForZooming

Edit

Here's an example of setting up the views in Storyboard / IB: https://github.com/DonMag/PDFImagePanZoom

Upvotes: 1

Related Questions