0

I have a problem understanding how the auto layout works. I have the following structure in my controller scene:

View
   ScrollView
      View
         Image View

      Constraints
         SuperView.Bottom = View.Buttom
         SuperView.Trailing = View.Trailing
         View.Leading = SuperView.Leading
         View.Top = SuperView.Top
    Constraints
       ScrollView.Top = SuperView.TopMargin
       SuperView.TrailingMargin = ScrollView.Trailing (-16)
       ScrollView.Leading = SuperView.Leading (-16)
       BottomLayoutGuide.Top = ScrollView.Bottom (-40)

This handles the scrollview that I need. There are other contents in the view but I "uninstalled" them for now to make the Image View Work first. I want to make the ImageView to have width based on the screen size (iPhone 5 will have 320px, iPhone 6+ will have 1080px). So, I tried to add constraints to the ImageView (View.Trailing = SuperView.Trailing; View.Leading = SuperView.Leading; AspectRatio - 2:1) but it just keeps making the image size bigger extremely huge that, it doesn't even fit the screen. If I put height constraints, it works, but I don't want to put height constraints as I want the size to not be dependent of a constant width/height.

What am I doing wrong? I don't quiet understand AutoLayout; I understand the basic concept of AutoLayout but when it comes to implementation, I have no idea what to do... :/

Gasim
  • 7,615
  • 14
  • 64
  • 131

2 Answers2

1

The size / aspect ratio of the image has to do with the image view's contentMode. Set the contentMode appropriately (it sounds like you probably want UIViewContentModeScaleAspectFit) and set the clipsToBounds to true so the image won't be bigger than the image view. Then limit the image view's size, or else it will be resized to fit the image. Even better, use an image that is more like the right size; you are clearly using a huge image (otherwise it would not be drawn huge), which is wasteful.

matt
  • 515,959
  • 87
  • 875
  • 1,141
  • I changed the contentMode to Aspect Fit and I already had `imageView.clipsToBounds = true`. How do I limit the image view's size? It is actual size is currently 320x160... Having the Leading and Trailing constraints makes the image huge. And if I add height constraint, it moves the image to somewhere off the screen horizontally... I will be making image sizes much smaller but that is not my main concern right now. I don't want to rely on an image to have a proper layout. – Gasim Oct 24 '14 at 21:35
  • You limit the image view's size with constraints. You are being very vague about what you are actually doing, so I cannot guess, but obvious it is not turning out to your satisfaction. Why not stop and _learn_ about auto layout so that you _do_ understand it, before proceeding any further? – matt Oct 24 '14 at 22:41
  • The problem that was causing this was the scroll view. I have learned about the auto layout. I know how this works but there is always a case where learning isn't enough and I need to ask for an experience to find out. So, lets take a basic uitextview; no scrolling, no nothing. How do I make it's size to be 100%. Adding constraint (Width = SuperView.Width) doesn't work. If I am missing something, can you give me a tutorial where I will see this constraints work in action; theoretically the above should work but no.. Of course it wouldn't work. – Gasim Oct 25 '14 at 17:47
  • Scroll views in auto layout work differently. The inside measurements do _not_ relate to the scroll view's size; they relate to its `contentSize`. See my explanation here: http://stackoverflow.com/a/13548039/341994 – matt Oct 25 '14 at 18:01
  • Thank you! I was finally able to understand how AutoLayout works and now it's time to learn how it works with ScrollView. – Gasim Oct 25 '14 at 19:08
1

Two things to check/try:

  1. Call sizeToFit on your imageView after it loads its image. This causes it to update its contentSize appropriately.
  2. Then, set the zoomScale in your scrollView -- it's probably just displaying the imageView zoomed way in. zoomScale should be superview.bounds.size.width/imageView.bounds.size.width where superview is the main viewController view (self.view)
Anna Dickinson
  • 3,307
  • 24
  • 43