在具有特定约束的滚动视图中显示图像（使用自动布局）

我想在视图控制器中显示标题和图像下方。 我的限制是：

• 标签可以位于屏幕顶部 50 像素处
• 标签可以有一行或多行
• 图像可以位于我的标签的 50 像素处
• 图像必须具有屏幕的宽度
• 滚动视图必须根据所有这些元素的大小进行滚动

我有一个带有滚动视图的视图控制器：

-视图控制器

---view

------滚动视图

---------容器视图

- - - - - - 标签

- - - - - - 图像

我想使用故事板和自动布局。

我已成功正确对齐标签，但无法在标签的 50 像素处显示图像并保持其比例。

如果我对图像视图使用“宽高比”或“缩放填充”，在这种情况下，标签和图像的尺寸为 50px，就像我想要的那样。

与方面适合：

有刻度来填充：

但如果我使用“宽高比填充”，我不明白图像是如何显示的。

使用方面填充：

我已经关注这个问题大约三天了，这让我抓狂。 我还尝试使用不可见的“间隔”视图...... 我找不到解决方案。

我使用 Xcode 6 快速开发。

编辑 1：通过 vacawama 建议解决图像定位问题

为您的 imageView 添加一个 @IBOutlet 并为您的视图控制器添加一个属性以跟踪约束：

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

然后添加新图像：

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!)

编辑2：但之后，我的视图不再滚动

我的容器视图的约束：

我删除了底部约束，以便容器视图的高度适应内容，但出现错误：

问题是 imageView 的高度没有改变，所以图像只是在旧框架上居中。视图模式设置（Aspect Fit、Scale To Fit 或 Aspect Fill）不会更改 imageView 的高度。您需要对 imageView 的高度进行约束，但此约束会根据您的图像而变化。

我能够通过执行以下操作来完成这项工作。

1. 我将图像的宽度限制为视图的宽度。

2. 我向图像添加了 AspectRatio 约束。这设置了宽度与高度的比率，并且由于我已经指定了图像的宽度，所以现在将完全指定高度。我本来希望在加载新图像时能够在代码中更新此约束（因为不同的图像具有不同的长宽比），但我只能更改constant来自代码而不是multiplier。因此，为了解决这个问题，我通过检查将其设置为占位符约束占位符 in the 属性检查器。这意味着这个约束将在构建时被删除。

3. 在代码中，当我为 imageView 设置图像时，我添加了一个约束，通过乘数将 imageView 的宽度设置为 imageView 的高度。这取代了 Interface Builder 中设置的宽高比约束。

   首先，添加一个@IBOutlet为您的 imageView 和视图控制器的属性来跟踪约束：

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

   然后添加新图像：

   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!)
   

   当需要更改图像时，请先删除之前的宽高比约束，然后再添加新的宽高比约束：

   imageView.removeConstraint(aspectRatio!)
   

我实现了类似于你的布局的东西。我的项目有一个按钮代替了您的标签，但其他方面是相似的。当用户按下按钮时，我的应用程序会将图像替换为具有完全不同宽高比的图像。这是文档大纲和我的项目的所有限制。

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