SOLVED: UIScrollView with embedded UIImageView; image to fill the screen

@Gakkienl HWS+

Aug '20

UIKit/Programmatic UI

I have an UIScrollView with an UIImageView inside. The image is set by user selection and can have all kinds of sizes. What I want is that the image initially fills the screen (view) and then can be zoomed and scrolled all the way to the edges of the image.

If I add the ImageView directly to the view (no scrollView), I get it to fill the screen with the following code:

        mapImageView.image = ProjectImages.projectDefaultImage
        mapImageView.translatesAutoresizingMaskIntoConstraints = false
        mapImageView.contentMode = .scaleAspectFill
        view.addSubview(mapImageView)

Now the same with the scrollView and the embedded imageView:

        view.insertSubview(mapImageScrollView, at: 0)
        mapImageScrollView.delegate = self
        mapImageScrollView.translatesAutoresizingMaskIntoConstraints = false
        mapImageScrollView.contentMode = .scaleAspectFill
        mapImageScrollView.maximumZoomScale = 4.0
        mapImageScrollView.pinToEdges(of: view, safeArea: true)

        mapImageView.image = ProjectImages.projectDefaultImage
        mapImageView.translatesAutoresizingMaskIntoConstraints = false
        mapImageView.contentMode = .scaleAspectFill
        mapImageScrollView.addSubview(mapImageView)

And now, if the image's height is smaller than the view's height, the image does not fill the screen and I'm left with a blank view area below the image. I can zoom and scroll ok, and then the image does fill the view.

Adding contsraints will fill the view as I want, but interferes with the zooming and scrolling and prevents me getting to the edges of the image when zoomed in.

How to set this up correctly ?

@Gakkienl HWS+

Aug '20

I've found this solution that works for me, when setting and changing the image, I calculate the minimum needed zoom scale and set it on the scrollView:

    var selectedMapImage: MapImage? {
        didSet {
            mapImageView.image = mapImagesController.getImageForMapImage(selectedMapImage!)
            mapImageScrollView.minimumZoomScale = view.bounds.height / mapImageView.image!.size.height
            mapImageScrollView.setZoomScale(mapImageScrollView.minimumZoomScale, animated: true)
            mapImageScrollView.scrollRectToVisible(view.bounds, animated: true)
        }
    }

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.