1

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.

Chase Roberts
  • 9,082
  • 13
  • 73
  • 131
  • 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 Sep 10 '14 at 19:34
  • 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 Sep 10 '14 at 19:43
  • 1
    Why don't you put the scroll view beneath the image then ? – Petar Sep 10 '14 at 19:44
  • I want the image to scroll away when the users scrolls down. – Chase Roberts Sep 10 '14 at 19:47

1 Answers1

1

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.

Petar
  • 2,241
  • 1
  • 24
  • 38
  • So can you not set the contentSize of the scrollview manually then in IB? Normally I just set a frame and a content size. Is there not a way to just tell the whole thing to adjust based on the frame I create that instance with? What's this business about placeholder as the intrinsic size value? I've seen other posts on SO about that but I don't yet understand what it does/what the reason is. – Chase Roberts Sep 10 '14 at 20:57
  • Sorry about all the follow up questions. – Chase Roberts Sep 10 '14 at 20:57
  • 1
    The scrollView behaves a bit different when used with AutoLayout. You can read about it here : https://developer.apple.com/library/ios/technotes/tn2154/_index.html . The reason to use the placeholder as the intrinsic size value is so you can see your view in IB with the size you have set, if the default value is chosen IB will complain. From IB: "Setting a design time intrinsic content size only affects a view while editing in Interface Builder. The view will not have this intrinsic content size at runtime." – Petar Sep 10 '14 at 21:13
  • If you have both a fixed width and height, there is no need to do that. I am also trying to learn autolayout, its a bit tricky, but I think its very powerful. – Petar Sep 10 '14 at 21:15