Limit image size to ScrollView, Swift

Question

I have an image which is set inside a scroll view, though I have set the frame of the scrollView to fixed height and width as shown below, the image goes beyond the bounds (see below picture).

How can I limit the picture to fit inside the scrollView.

imageScrollView.frame = CGRect(x: 0, y: 0, width: viewWidth, height: viewHeight-50)
imageScrollView.clipsToBounds = true // Has no affect on the image

Answer 1

Do you have a reference to the UIImageView? If so, then set its content mode to aspect fit. Like this:

        theImageView.contentMode = .scaleAspectFit

The clipsToBounds you set only covers up any parts of child views that are sticking out of the bounds of the parent view, so that's why it doesn't do anything for you.

OR if you're using Interface Builder, set this option:

---

So, what if you don't have the reference to the UIImageView?... You could iterate through the subviews of your scroll view, and whenever it finds a UIImageView, you can set the content mode like that. Something like:

//This is off the top of my head, so my filtering may not be right...
//This is also a one and done solution if you've got a lot of images in your scroll view
for anImgVw in imageScrollView.subviews.filter({$0.isKind(of: UIImageView.self)})
{
    anImgVw.contentMode = .scaleAspectFit
}

Otherwise, I'm not sure if it's possible without a reference to the UIImageView.

Answer 2

The library you are using is coded to match the scaling to the device orientation. So, if the image orientation doesn't match the view orientation, you end up with the image not quite fitting in your scroll view.

You'll need to edit the ImageScrollView.swift source file. Assuming you're using the same version that is currently at the link you provided ( https://github.com/huynguyencong/ImageScrollView ), change the setMaxMinZoomScalesForCurrentBounds() function as follows:

fileprivate func setMaxMinZoomScalesForCurrentBounds() {
    // calculate min/max zoomscale
    let xScale = bounds.width / imageSize.width    // the scale needed to perfectly fit the image width-wise
    let yScale = bounds.height / imageSize.height   // the scale needed to perfectly fit the image height-wise

    // fill width if the image and phone are both portrait or both landscape; otherwise take smaller scale
    //let imagePortrait = imageSize.height > imageSize.width
    //let phonePortrait = bounds.height >= bounds.width
    //var minScale = (imagePortrait == phonePortrait) ? xScale : min(xScale, yScale)
    //
    // just take the min scale, so the image will completely fit regardless of orientation
    var minScale = min(xScale, yScale)

    let maxScale = maxScaleFromMinScale*minScale

    // don't let minScale exceed maxScale. (If the image is smaller than the screen, we don't want to force it to be zoomed.)
    if minScale > maxScale {
        minScale = maxScale
    }

    maximumZoomScale = maxScale
    minimumZoomScale = minScale * 0.999 // the multiply factor to prevent user cannot scroll page while they use this control in UIPageViewController
}

Answer 3

you can use the screenHeight rather than the viewHeight

let screenSize: CGRect = UIScreen.mainScreen().bounds
let screenWidth = screenSize.width
let screenHeight = screenSize.height

imageScrollView.frame = CGRect(x: 0, y: 0, width: viewWidth, height: screenHeight-50)