Display an image in a scrollview with specific constraints (with auto layout)

问题

I would like display a title and below a image in my view controller. My constraints are :

the label can be at 50px of the top of the screen
the label can have one or many rows
the image can be at 50px of my label
the image must have the width of the screen
the scroll view must scroll depending on the size of all these elements

I have a view controller with a scroll view :

-view controller

---view

------scroll view

---------container view

------------label

------------image

I want use storyboard and auto layout.

I have succeeded to align the label correctly, but I am unable to display the image at 50px of the label and keep it ratio.

If I use "aspect fit" or "scale to fill" for the imageview, in this case, the label and the image are at 50px like I want.

With aspect fit :

With scale to fill :

But if I use "aspect fill", I don't understand how the image is displayed.

With aspect fill :

It has been about 3 days that I'm on this issue, it make me crazy. I tried also to use invisible "spacer" views... I don't find the solution.

I develop in swift with Xcode 6.

EDIT 1 : Positioning the image is solved with the vacawama advice

Add an @IBOutlet for your imageView and a property to your view controller to keep track of the constraint:

@IBOutlet weak var imageView: UIImageView!
var aspectRatio:NSLayoutConstraint?

Then add a new image:

let tree = UIImage(named: "WinterTree.jpg")!

imageView.image = tree
aspectRatio = NSLayoutConstraint(item: imageView, attribute: .Height, relatedBy: .Equal, toItem: imageView, attribute: .Width, multiplier: tree.size.height/tree.size.width, constant: 1)
imageView.addConstraint(aspectRatio!)

EDIT 2 : But after, my view is no longer to scroll

Constraints of my container view :

I removed the bottom constraint in order to the height of the container view adapts to the content, but I get an error :

回答1:

The problem is that the height of the imageView is not getting changed, so the image is just centered over the old frame. The view mode setting (Aspect Fit, Scale To Fit, or Aspect Fill) does not change the height of your imageView. You need a constraint for the height of your imageView, but this constraint will change depending on your image.

I was able to make this work by doing the following.

I constrained the width of the image to the width of the view.
I added an AspectRatio constraint to the image. This sets the ratio of the width to the height, and since I have specified the width of the image, the height will now be fully specified. I had hoped to be able to update this constraint in code when I loaded a new image (because different images have different aspect ratios), but I could only change the constant from code and not the multiplier. So, to get around this, I made this a Placeholder constraint by checking Placeholder in the Attributes Inspector. This means that this constraint will be removed at build time.
In code, when I set the image for the imageView, I add a constraint that sets the width of the imageView to the height of the imageView with a multiplier. This takes the place of the aspect ratio constraint that was set in Interface Builder.

First, add an @IBOutlet for your imageView and a property to your view controller to keep track of the constraint:
```
@IBOutlet weak var imageView: UIImageView!
var aspectRatio:NSLayoutConstraint?
```
Then add a new image:
```
let tree = UIImage(named: "WinterTree.jpg")!

imageView.image = tree
aspectRatio = NSLayoutConstraint(item: imageView, attribute: .Height, relatedBy: .Equal, toItem: imageView, attribute: .Width, multiplier: tree.size.height/tree.size.width, constant: 1)
imageView.addConstraint(aspectRatio!)
```
When it is time to change your image, remove the previous aspectRatio constraint before adding a new one:
```
imageView.removeConstraint(aspectRatio!)
```

I implemented something similar to your layout. My project has a button in place of your label, but otherwise it is similar. When the user presses the button, my app replaces the image with one with an entirely different aspect ratio. Here is the Document Outline and all of the constraints from my project.

First Item:       WinterTree1.jpg.Width
Relation:         Equal
Second Item:      WinterTree1.jgp.Height
Constant:         1
Priority:         1000
Multiplier:       0.68

First Item:       WinterTree1.jpg.Leading
Relation:         Equal
Second Item:      ContentView.Leading
Constant:         8

First Item:       ContentView.Bottom
Relation:         Equal
Second Item:      WinterTree1.jpg.Bottom
Constant:         8

First Item:       ContentView.Trailing
Relation:         Equal
Second Item:      WinterTree1.jpg.Trailing
Constant:         8

First Item:       WinterTree1.jpg.Top
Relation:         Equal
Second Item:      Button.Bottom
Constant:         20

First Item:       Button.Top
Relation:         Equal
Second Item:      ContentView.Top
Constant:         20

First Item:       ContentView.Center X
Relation:         Equal
Second Item:      Button.Center X
Constant:         0

First Item:       Superview.Trailing
Relation:         Equal
Second Item:      ContentView.Trailing
Constant:         0

First Item:       ContentView.Leading
Relation:         Equal
Second Item:      Superview.Leading
Constant:         0

First Item:       Superview.Bottom
Relation:         Equal
Second Item:      ContentView.Bottom
Constant:         0

First Item:       ContentView.Top
Relation:         Equal
Second Item:      Superview.Top
Constant:         0

First Item:       ContentView.Width
Relation:         Equal
Second Item:      Superview.Width
Constant:         0

First Item:       Scroll View.Leading
Relation:         Equal
Second Item:      Superview.Leading
Constant:         0

First Item:       Scroll View.Top
Relation:         Equal
Second Item:      Superview.Top
Constant:         0

First Item:       Superview.Trailing
Relation:         Equal
Second Item:      Scroll View.Trailing
Constant:         0

First Item:       Bottom Layout Guide.Top
Relation:         Equal
Second Item:      Scroll View.Bottom
Constant:         0

来源：https://stackoverflow.com/questions/27589875/display-an-image-in-a-scrollview-with-specific-constraints-with-auto-layout

标签

ios

swift

storyboard

autolayout

constraints