How to scale a UIImage view to a square with Autolayout inside a UIScrollView

1
votes

I've been struggling to learn autolayout (finally). I want to have a vertically scrolling UIScrollView that holds all the content for the view. I want to pin a UIImage view to the top of the scrollview and keep the image a square (scaleToFill). Basically I want to do this (only I want to do it with autolayout):

enter image description here

I can't get the image to keep its aspect ratio while staying within the screen bounds. Whenever I add an aspect ratio constraint the imageView grows to like 600 points (the width of the png I think), but I want it to just be as wide as the screen.

I think I am setting the constraints up for the UIImageView correctly because if I get rid of the scrollView and just drop the imageViw directly on the view then it seems to do what I want it to. The trick is putting it inside the scrollView.

This is how I currently have it set up:

enter image description here

The 4 vertical/horizontal space constraints on the scroll view are all set to constant 0.

1
iosuiscrollviewautolayoutios-autolayout
Do you want to keep the original aspect ratio of the image, so it scrolls in the scrollview if the size is larger than the bounds of the screen ? Or just fit the frame ? If the latter, then why do you need a scrollview anyway ? – Petar
I do not want to keep the aspect ration of the image. I want it to always be a square. I'm going to put a bunch of content underneath the image that a user could scroll down to read. – Chase Roberts
Why don't you put the scroll view beneath the image then ? – Petar
I want the image to scroll away when the users scrolls down. – Chase Roberts

1 Answers

1
votes

Since the size of the UIScrollView depends on its content, you cannot have the size of your UIImageView subview dependent on it.

You have to remove the aspect ratio constraint of the UIImageView and use a fixed width one. You can also have your UIImageView width dependent on another view in the UIScrollView which has either a fixed width or otherwise unambiguous width.

Don't forget to use Placeholder as the intrinsic size value in Interface Builder.

Hope this helps.