Search code examples
swiftuiscrollviewuiimageview

Trying to set a wide image in UIScrollview, with a fixed height


Novice that has been stuck on this problem for 2 days (please help!). I have an image that is much wider than the screen. I want the user to be able to scroll horizontally on the Image, and also want the image to be a specific height while maintaining it's aspect ratio.

Currently the UIImageView is nested within the ScrollView. The ScrollView has constraints to the Safe Area in all 4 directions, that place it in the upper half of the screen (250 from the bottom of the Safe Area). The ImageView has all 4 constraints of 0 to the "Content Layout Guide" of the Scrollview, and a 5th constraint of having an equal height to the "Frame Layout Guide" of the ScrollView.

I initially tried to set the image Content Mode to "Aspect Fit". This maintained the aspect ratio and set the image with the desired height within the ScrollView, however left a huge amount of transparency either side of the image so the user has to scroll for a while before seeing the image. For this I could not find a solution that contained the scrollview within the bounds of the non-transparent section only, so I then changed the image Content Mode to "Aspect Fill".

This removed the transparency either side but the image is now too tall and goes off the screen vertically. I have set "Clip to bounds" on the ImageView Size Inspector and also set it to true in code, but the image is still to tall and outside the height constraint specified. I also used:

gym_imageView.sizeToFit()
scrollView.contentSize = gym_imageView.frame.size

But none of this is fixing it.

My expected result was that the image with original dimensions (W: 12064px, H: 1696px) Would resize itself to the constraint height (0 to top & bottom of Content Layout Guide of Scrollview, which in turn is constraint 0 to top of Safe Area, 250+ to bottom of Safe Area) while maintaining aspect ratio.

Any ideas?


Solution

  • The Content Mode changes how the image appears in the imageView, but it does nothing to resize the imageView itself.

    You should set an explicit aspect ratio constraint on your imageView with a multiplier of 12064:1696. Then Auto Layout will be able to calculate the correct width of your imageView based upon the fact that it already knows the desired height.